round complete for phone

Author: nwah

app/components/JamoTable.js

@@ -27,7 +27,13 @@ const JamoTable = ({known = {}, newJamos = {}, geometric, jamos = {}}) => (
         style={{
           animationDelay: `${Math.max(0, newJamos.indexOf(jamo)) * 120}ms`
         }}
+        data-jamo={jamo}
         onClick={() => jamos[jamo] && play(jamos[jamo].audio.url)}
+        onTouchStart={(e) => {
+          let el = document.querySelector(`[data-jamo="${jamo}"]`);
+          el.classList.add('touched');
+          setTimeout(() => el.classList.remove('touched'), 500);
+        }}
       >
         <div className={classNames("jamo-table__jamo__latin", {"vowel": isMedial(jamo)})}>
           {getJamoHint(jamo)}

app/components/Level.js

@@ -10,7 +10,8 @@ const Level = ({children, params, location, level}) => {
   return (
     <div className="level-container">
       <div className={classNames("level", {
-        'level--learning': /\/learn$/.test(location.pathname),
+        'level--learning': /\/learn/.test(location.pathname),
+        'level--round-complete': /\/round\/\d+\/complete/.test(location.pathname),
       })}>
         <Logo />
         <YouAreHere params={params} />

app/components/RoundComplete.js

@@ -40,9 +40,11 @@ const RoundComplete = ({level, round, rounds, nextRound, newJamos = [], params,
           }
         </div>
 
-        <Link to={path} className="button button--forward round__complete__continue-bottom" data-autofocus="true">
-          Continue
-        </Link>
+        <div className="back-forward-buttons">
+          <Link to={path} className="button button--forward round__complete__continue-bottom" data-autofocus="true">
+            Continue
+          </Link>
+        </div>
 
         {showingLetters ?
           <JamoTable newJamos={newJamos} known={known} />
@@ -103,10 +105,11 @@ const RoundComplete = ({level, round, rounds, nextRound, newJamos = [], params,
           </div>
         </div>
 
-
-        <Link to={path} className="button button--forward round__complete__continue" data-autofocus="true">
-          Continue
-        </Link>
+        <div className="back-forward-buttons">
+          <Link to={path} className="button button--forward round__complete__continue" data-autofocus="true">
+            Continue
+          </Link>
+        </div>
       </div>
   );
 }

app/styles/common/_media-queries.scss

@@ -46,6 +46,12 @@ $mq-desktop-above: screen and (min-width: $bp-desktop-min);
   }
 }
 
+@mixin small-desktop {
+  @media screen and (min-width: 1200px) and (max-width: $bp-desktop-min - 1px) {
+    @content;
+  }
+}
+
 @mixin desktop {
   @media #{$mq-desktop-only} {
     @content;

app/styles/components/_JamoTable.scss

@@ -16,20 +16,36 @@
 .jamo-table {
   width: 1000px;
 
+  @include phone {
+    width: 100%;
+  }
+
   &__jamo {
     position: relative;
     float: left;
     width: 100px;
     height: 100px;
     cursor: pointer;
 
+    @include phone {
+      width: 20%;
+      height: 2rem;
+    }
+
     .geometric-jamo {
       position: relative;
       left: 20px;
       top: 20px;
       width: 60px;
       height: 60px;
       z-index: 5;
+
+      @include phone {
+        top: .4rem;
+        left: 20%;
+        width: 60%;
+        height: 1.2rem;
+      }
     }
 
     &__latin {
@@ -39,7 +55,7 @@
       transform: translateX(-50%) translateY(-50%);
       font-weight: 900;
       color: $red;
-      font-size: 32px;
+      font-size: .8888rem;
       pointer-events: none;
       opacity: 0;
 
@@ -48,7 +64,8 @@
       }
     }
 
-    .can-hover &:hover {
+    .can-hover &:hover,
+    &.touched {
       .jamo-table__jamo__latin {
         opacity: 1;
       }
@@ -76,6 +93,14 @@
       border-radius: 80px;
       animation: scale-in .72s both;
       animation-delay: inherit;
+
+      @include phone {
+        left: 10%;
+        top: .1rem;
+        width: 80%;
+        height: 0;
+        padding-bottom: 80%;
+      }
     }
   }
 }

app/styles/components/_Level.scss

@@ -1,9 +1,20 @@
 .level {
   // @extend .radial;
 
-  &--learning .logo {
-    @include phone {
-      display: none !important;
+  &--learning,
+  &--round-complete {
+    .logo {
+      @include phone {
+        display: none !important;
+      }
+    }
+  }
+
+  &--round-complete {
+    .you-are-here {
+      @include phone {
+        display: none !important;
+      }
     }
   }
 }