Merge pull request #231 from googlecodelabs/time-container

Move the time container to the drawer on mobile devices.
googlecodelabs · Apr 29, 2019 · b05c952 · b05c952
2 parents 48e770f + d0667df
commit b05c952
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 15 deletions.
diff --git a/codelab-elements/google-codelab/google_codelab.js b/codelab-elements/google-codelab/google_codelab.js
@@ -125,7 +125,7 @@ class Codelab extends HTMLElement {
     /** @private {?Element} */
     this.stepsContainer_ = null;
 
-    /** @private {?Element} */
+    /** @private {?NodeList} */
     this.timeContainer_ = null;
 
     /** @private {?Element} */
@@ -555,7 +555,7 @@ class Codelab extends HTMLElement {
    * @private
    */
   updateTimeRemaining_() {
-    if (!this.timeContainer_) {
+    if (!this.timeContainer_ || !this.timeContainer_.length) {
       return;
     }
 
@@ -568,13 +568,22 @@ class Codelab extends HTMLElement {
       }
     }
 
-    const newTimeEl =  soy.renderAsElement(Templates.timeRemaining, {time});
-    const oldTimeEl = this.timeContainer_.querySelector('#time-remaining');
-    if (oldTimeEl) {
-      dom.replaceNode(newTimeEl, oldTimeEl);
-    } else {
-      dom.appendChild(this.timeContainer_, newTimeEl);
-    }
+    Array.prototype.forEach.call(this.timeContainer_, (timeContainer) => {
+      // Hide the time container if there was no time indication.
+      if (!time) {
+        timeContainer.style.display = 'none';
+        return;
+      }
+
+      // Update the time container with remaining time.
+      const newTimeEl =  soy.renderAsElement(Templates.timeRemaining, {time});
+      const oldTimeEl = timeContainer.querySelector('.time-remaining');
+      if (oldTimeEl) {
+        dom.replaceNode(newTimeEl, oldTimeEl);
+      } else {
+        dom.appendChild(timeContainer, newTimeEl);
+      }
+    });
   }
 
   /**
@@ -806,7 +815,6 @@ class Codelab extends HTMLElement {
 
     this.drawer_ = this.querySelector('#drawer');
     this.titleContainer_ = this.querySelector('#codelab-title');
-    this.timeContainer_ = this.querySelector('#codelab-time-container');
     this.stepsContainer_ = this.querySelector('#steps');
     this.controls_ = this.querySelector('#controls');
     this.prevStepBtn_ = this.querySelector('#controls #previous-step');
@@ -816,6 +824,7 @@ class Codelab extends HTMLElement {
     this.steps_.forEach((step) => dom.appendChild(this.stepsContainer_, step));
     this.setupSteps_();
     this.renderDrawer_();
+    this.timeContainer_ = this.querySelectorAll('.codelab-time-container');
 
     if (document.location.hash) {
       const h = parseInt(document.location.hash.substring(1), 10);

diff --git a/codelab-elements/google-codelab/google_codelab.scss b/codelab-elements/google-codelab/google_codelab.scss
@@ -36,7 +36,8 @@ google-codelab #codelab-title {
   left: 0;
   width: 100%;
   background: #FFFFFF;
-  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
+  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .3),
+    0px 2px 6px 2px rgba(60, 64, 67, .15);
   color: #3C4043;
   display: flex;
   align-items: center;
@@ -58,9 +59,10 @@ google-codelab #codelab-title h1 {
   text-overflow: ellipsis;
   overflow: hidden;
   width: 0;
+  display: inline-block;
 }
 
-google-codelab #codelab-title #time-remaining {
+google-codelab #codelab-title .time-remaining {
   flex-shrink: 0;
   flex-grow: 0;
   display: flex;
@@ -70,7 +72,7 @@ google-codelab #codelab-title #time-remaining {
   white-space: nowrap;
 }
 
-google-codelab #codelab-title #time-remaining i {
+google-codelab #codelab-title .time-remaining i {
   margin-right: 3px;
 }
 
@@ -156,5 +158,24 @@ google-codelab #fabs a[disappear] {
   background: #0f9d58;
 }
 
+google-codelab #drawer .codelab-time-container {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  google-codelab #codelab-title .codelab-time-container {
+    display: none;
+  }
+
+  google-codelab #drawer .codelab-time-container {
+    display: block;
+    padding: 20px 10px 10px 23px;
+  }
+
+  google-codelab #drawer .time-remaining i {
+    margin-right: 9px;
+  }
+}
+
 @import "drawer";
 @import "steps";
diff --git a/codelab-elements/google-codelab/google_codelab.soy b/codelab-elements/google-codelab/google_codelab.soy
@@ -28,7 +28,7 @@
       <a href="{$homeUrl}" id="arrow-back"><i class="material-icons">close</i></a>
       <a href="#" id="menu"><i class="material-icons">menu</i></a>
     </div>
-    <div id="codelab-time-container"></div>
+    <div class="codelab-time-container"></div>
     <devsite-user></devsite-user>
   </div>
   <div id="main">
@@ -59,7 +59,7 @@
  */
 {template .timeRemaining}
   {@param time: number}
-  <div id="time-remaining" title="Time remaining">
+  <div class="time-remaining" title="Time remaining">
    <i class="material-icons">access_time</i>
    {if $time == 1}
     {$time} min remaining
@@ -76,6 +76,7 @@
 {template .drawer}
   {@param steps: list<string>}
   {@param? feedback: string}
+  <div class="codelab-time-container"></div>
   <div class="steps">
     <ol>
       {for $step in $steps}