From 83e011c45436c133fd9cdfe94404882471681d9b Mon Sep 17 00:00:00 2001
From: terichadbourne <terichad@gmail.com>
Date: Fri, 26 Feb 2021 16:38:27 -0500
Subject: [PATCH 1/4] modal without media queries

---
 src/components/Lesson.vue                    |  6 ++
 src/components/modals/MobileWarningModal.vue | 85 ++++++++++++++++++++
 src/static/translations/en.json              | 12 +++
 3 files changed, 103 insertions(+)
 create mode 100644 src/components/modals/MobileWarningModal.vue

diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue
index 6e5edf8a8..fbe258614 100644
--- a/src/components/Lesson.vue
+++ b/src/components/Lesson.vue
@@ -1,6 +1,10 @@
 <template>
   <div :class="{'overflow-hidden': expandChallenge}">
     <TutorialRedirectModal :tutorial="tutorial" :lesson="lesson" />
+    <MobileWarningModal v-if="!isResources && (tutorialType === 'code' || tutorialType === 'file-upload')"
+      :tutorial="tutorial"
+      :lesson="lesson"
+    />
     <Header/>
     <div class="container center-l mw7-l ph3">
       <section class="mw7 center mt3 pt2">
@@ -155,6 +159,7 @@ 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 TypeIcon from './TypeIcon.vue'
 
 const MAX_EXEC_TIMEOUT = isProduction ? 10000 : 60000
@@ -224,6 +229,7 @@ export default {
     Validator,
     TutorialCompletionCallout,
     TutorialRedirectModal,
+    MobileWarningModal,
     TypeIcon
   },
   props: {
diff --git a/src/components/modals/MobileWarningModal.vue b/src/components/modals/MobileWarningModal.vue
new file mode 100644
index 000000000..0b50effbc
--- /dev/null
+++ b/src/components/modals/MobileWarningModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <BaseModal
+    :show="true"
+    :onClose="onStay"
+    :title="translations.title"
+    data-cy="mobile-warning-modal"
+  >
+    <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
+  },
+  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>
diff --git a/src/static/translations/en.json b/src/static/translations/en.json
index b6ae6d241..50cb8ca74 100644
--- a/src/static/translations/en.json
+++ b/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": "If you're on a computer with a keyboard and just shrunk the window, you can maximize the window and keep working!",
+        "_3": "If you're on a mobile device or a device without a keyboard, we suggest coming back on a computer. This tutorial requires writing code in the browser, so it's difficult to do on a handheld device.",
+        "_4": "In the meantime, please check out our text- and quiz-based tutorials, which should work just find on any device!"
+      },
+      "actions": {
+        "codeFree": "View code-free tutorials"
+      }
     }
   }
 }

From 099161a3034e9cdfa048739e902ec43d42c0b7fd Mon Sep 17 00:00:00 2001
From: terichadbourne <terichad@gmail.com>
Date: Mon, 1 Mar 2021 11:21:44 -0500
Subject: [PATCH 2/4] add media query

---
 src/components/Lesson.vue                    |  1 +
 src/components/modals/BaseModal.vue          | 18 +++++++++++++++---
 src/components/modals/MobileWarningModal.vue |  4 +++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue
index fbe258614..f2ab30b61 100644
--- a/src/components/Lesson.vue
+++ b/src/components/Lesson.vue
@@ -2,6 +2,7 @@
   <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"
     />
diff --git a/src/components/modals/BaseModal.vue b/src/components/modals/BaseModal.vue
index 562db5ac8..4a991c8bc 100644
--- a/src/components/modals/BaseModal.vue
+++ b/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;
 
diff --git a/src/components/modals/MobileWarningModal.vue b/src/components/modals/MobileWarningModal.vue
index 0b50effbc..9556ec738 100644
--- a/src/components/modals/MobileWarningModal.vue
+++ b/src/components/modals/MobileWarningModal.vue
@@ -4,6 +4,7 @@
     :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>
@@ -40,7 +41,8 @@ export default {
   },
   props: {
     tutorial: Object,
-    lesson: Object
+    lesson: Object,
+    targetClass: String
   },
   computed: {
     translations: function () {

From bfe2b73bf415d0228fd2b900b57834b875f4788e Mon Sep 17 00:00:00 2001
From: terichadbourne <terichad@gmail.com>
Date: Mon, 1 Mar 2021 11:30:05 -0500
Subject: [PATCH 3/4] update wording

---
 src/static/translations/en.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/static/translations/en.json b/src/static/translations/en.json
index 50cb8ca74..bda8a26c8 100644
--- a/src/static/translations/en.json
+++ b/src/static/translations/en.json
@@ -71,9 +71,9 @@
       "title": "Hey there!",
       "body": {
         "_1": "We noticed that you're viewing our site at a low resolution.",
-        "_2": "If you're on a computer with a keyboard and just shrunk the window, you can maximize the window and keep working!",
-        "_3": "If you're on a mobile device or a device without a keyboard, we suggest coming back on a computer. This tutorial requires writing code in the browser, so it's difficult to do on a handheld device.",
-        "_4": "In the meantime, please check out our text- and quiz-based tutorials, which should work just find on any device!"
+        "_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"

From 60a1ad6a13da8d17a420155a4bca48f79caae0da Mon Sep 17 00:00:00 2001
From: terichadbourne <terichad@gmail.com>
Date: Fri, 12 Mar 2021 12:17:58 -0500
Subject: [PATCH 4/4] add mobile warning banner

---
 src/components/Lesson.vue                     |  8 +++
 src/components/Tutorial.vue                   |  5 +-
 .../callouts/MobileWarningBanner.vue          | 54 +++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/components/callouts/MobileWarningBanner.vue

diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue
index f2ab30b61..bd2d9828c 100644
--- a/src/components/Lesson.vue
+++ b/src/components/Lesson.vue
@@ -26,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"
@@ -161,6 +167,7 @@ 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
@@ -231,6 +238,7 @@ export default {
     TutorialCompletionCallout,
     TutorialRedirectModal,
     MobileWarningModal,
+    MobileWarningBanner,
     TypeIcon
   },
   props: {
diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
index 7d11b6b53..ed8cf3eb7 100644
--- a/src/components/Tutorial.vue
+++ b/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 {
diff --git a/src/components/callouts/MobileWarningBanner.vue b/src/components/callouts/MobileWarningBanner.vue
new file mode 100644
index 000000000..fa38d3f09
--- /dev/null
+++ b/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>