WIP Add warning for mobile users attempting coding tutorials

src/components/Lesson.vue

@@ -1,6 +1,11 @@
 <template>
   <div :class="{'overflow-hidden': expandChallenge}">
     <TutorialRedirectModal :tutorial="tutorial" :lesson="lesson" />
+    <MobileWarningModal v-if="!isResources && (tutorialType === 'code' || tutorialType === 'file-upload')"
+      targetClass="dn-ns"
+      :tutorial="tutorial"
+      :lesson="lesson"
+    />
     <Header/>
     <div class="container center-l mw7-l ph3">
       <section class="mw7 center mt3 pt2">
@@ -21,7 +26,13 @@
             :tutorial="tutorial"
             class="mv4"
         />
+
         <h1 v-if="!isResources">{{lesson.title}}</h1>
+        <MobileWarningBanner
+          v-if="(tutorialType === 'code' || tutorialType === 'file-upload') && lessonType !== 'code' && lessonType !== 'file-upload'"
+          :tutorial="tutorial"
+          class="mb4"
+        />
         <Concepts v-if="concepts" :concepts="concepts" />
         <Resources v-if="isResources"
           :data="resources"
@@ -155,6 +166,8 @@ import Info from './Info.vue'
 import Validator from './Validator.vue'
 import TutorialCompletionCallout from './callouts/TutorialCompletion.vue'
 import TutorialRedirectModal from './modals/TutorialRedirectModal.vue'
+import MobileWarningModal from './modals/MobileWarningModal.vue'
+import MobileWarningBanner from '../components/callouts/MobileWarningBanner.vue'
 import TypeIcon from './TypeIcon.vue'
 
 const MAX_EXEC_TIMEOUT = isProduction ? 10000 : 60000
@@ -224,6 +237,8 @@ export default {
     Validator,
     TutorialCompletionCallout,
     TutorialRedirectModal,
+    MobileWarningModal,
+    MobileWarningBanner,
     TypeIcon
   },
   props: {

src/components/Tutorial.vue

@@ -35,6 +35,7 @@
 
       <p class="f5 fw5 mt2 mb3 lh-copy charcoal-muted" v-html="description"></p>
       <TutorialMessage :tutorial="tutorial" class="mb4" />
+      <MobileWarningBanner :tutorial="tutorial" class="mb4" />
       <ul class="lessons-list mv2 pa0 f5 br3">
         <template v-for="(lesson, index) in tutorial.lessons">
           <li :key="index">
@@ -60,6 +61,7 @@ import LessonLink from '../components/LessonLink.vue'
 import TypeIcon from '../components/TypeIcon.vue'
 import ProjectIcon from '../components/icons/ProjectIcon.vue'
 import TutorialMessage from '../components/callouts/TutorialMessage.vue'
+import MobileWarningBanner from '../components/callouts/MobileWarningBanner.vue'
 import { isTutorialPassed } from '../utils/tutorials'
 
 const resourcesLesson = {
@@ -78,7 +80,8 @@ export default {
     LessonLink,
     TypeIcon,
     ProjectIcon,
-    TutorialMessage
+    TutorialMessage,
+    MobileWarningBanner
   },
   data: self => {
     return {

src/components/callouts/MobileWarningBanner.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="container ph3 pt2 pb2 ba b--light-gray br3 flex-row tutorial-message flex">
+    <InfoIcon class="mr1" />
+    <div>
+      <h2 class="f5 fw6 ttu mt0 nb1 p0 flex items-center content-center">Coding Challenges Ahead</h2>
+      <div class="f6 lh-copy mt2 mb2 tutorial-message-text">
+        <span>This tutorial includes coding challenges! You'll need some familiarity with JavaScript and a high resolution device with a keyboard to complete them.</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import InfoIcon from '../../static/images/icons/info.svg?inline'
+import { state as tutorialState } from '../../utils/tutorials'
+
+export default {
+  props: {
+    tutorial: Object
+  },
+  components: {
+    InfoIcon
+  },
+  computed: {
+    tutorialState: function () {
+      return tutorialState.get(this.tutorial)
+    }
+  }
+}
+</script>
+<style scoped>
+.tutorial-message {
+    --size: 30px;
+    --padding: calc(-1 * var(--size) * 0.16);
+
+    background-color: var(--color-snow-muted);
+}
+
+.tutorial-message h2 {
+    height: var(--size);
+    transform: translateY(1px);
+}
+
+.tutorial-message svg {
+    height: var(--size);
+    min-width: var(--size);
+
+    margin-left: var(--padding);
+}
+
+.tutorial-message svg path {
+    color: var(--color-yellow-muted);
+}
+</style>

src/components/modals/BaseModal.vue

@@ -1,7 +1,7 @@
 <template>
-  <portal to="modal" v-if="show">
-    <div class="modal-overlay"></div>
-    <div class="modal" :data-cy="dataCy">
+  <portal to="modal" v-if="show" :target-class="targetClass">
+    <div :class="`modal-overlay ${targetClass}`"></div>
+    <div :class="`modal ${targetClass}`" :data-cy="dataCy">
       <div class="modal-content pa4">
         <div v-if="title" class="modal-title f2 measure-narrow b mb4 lh-title">{{title}}</div>
         <slot></slot>
@@ -24,6 +24,11 @@ export default {
   },
   props: {
     show: Boolean,
+    targetClass:
+    {
+      type: String,
+      default: ''
+    },
     onClose: {
       type: Function,
       default: () => {}
@@ -65,6 +70,13 @@ export default {
   align-items: center;
 }
 
+@media screen and (min-width: 30em) {
+  .modal.dn-ns,
+  .modal-overlay.dn-ns {
+    display: none !important;
+  }
+}
+
 .modal-content {
   position: relative;
 

src/components/modals/MobileWarningModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <BaseModal
+    :show="true"
+    :onClose="onStay"
+    :title="translations.title"
+    data-cy="mobile-warning-modal"
+    :targetClass="targetClass"
+  >
+    <p class="f4 measure lh-copy">{{translations.body._1}}</p>
+    <p class="f4 measure lh-copy">{{translations.body._2}}</p>
+    <p class="f4 measure lh-copy">{{translations.body._3}}</p>
+    <p class="f4 measure lh-copy">{{translations.body._4}}</p>
+
+    <div class="buttons mt4">
+      <ButtonLink
+        class="mr3"
+        :onClick="this.resume ? onStay : onResume"
+        :text="translations.actions.codeFree"
+        to="/tutorials?code=false"
+        :data-cy="mobile-warning-modal-code-free"
+      />
+    </div>
+  </BaseModal>
+</template>
+
+<script>
+// import { getTutorialType } from '../../utils/tutorials'
+// import { debugLog } from '../../utils/debug'
+// import countly from '../../utils/countly'
+import translations from '../../static/translations'
+import ButtonLink from '../buttons/ButtonLink'
+import BaseModal from './BaseModal'
+
+// const debugGroup = '[modals/MobileWarningModal]'
+
+export default {
+  name: 'MobileWarningModal',
+  components: {
+    ButtonLink,
+    BaseModal
+  },
+  props: {
+    tutorial: Object,
+    lesson: Object,
+    targetClass: String
+  },
+  computed: {
+    translations: function () {
+      return translations.modals.mobileWarning
+    }
+    // trackingData: function () {
+    //   return {
+    //     tutorial: this.tutorial.shortTitle,
+    //     path: this.$route.path,
+    //     lessonType: this.lesson.type,
+    //     tutorialType: getTutorialType(this.tutorial.formattedId)
+    //   }
+    // }
+  }
+  // methods: {
+  //   trackEvent (action) {
+  //     countly.trackEvent(countly.events.MOBILE_WARNING_MODAL_ACTION, {
+  //       ...this.trackingData,
+  //       action
+  //     })
+  //   },
+  //   onStay () {
+  //     // this.trackEvent('stay')
+  //   },
+  //   onCodeFree () {
+  //     // this.trackEvent('codeFree')
+  //   }
+  // }
+}
+</script>
+<style scoped>
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media only screen and (max-width: 24rem) {
+  .buttons {
+    justify-content: center;
+  }
+}
+</style>

src/static/translations/en.json

@@ -66,6 +66,18 @@
         "resume": "Resume tutorial",
         "stay": "View lesson"
       }
+    },
+    "mobileWarning": {
+      "title": "Hey there!",
+      "body": {
+        "_1": "We noticed that you're viewing our site at a low resolution.",
+        "_2": "Our coding challenges work best on a computer or high-res device with a keyboard.  This tutorial requires writing code in the browser, which isn't supported on a touchscreen.",
+        "_3": "If you're on a computer with a keyboard and just shrunk the window, you can maximize the window and keep working!",
+        "_4": "Otherwise, please check out our text- and quiz-based tutorials, which should work just find on any device!"
+      },
+      "actions": {
+        "codeFree": "View code-free tutorials"
+      }
     }
   }
 }