From 548bcd6e3a5b002a736a64edfb7d7b7500b80649 Mon Sep 17 00:00:00 2001 From: Nicolas Garnier Date: Fri, 26 Apr 2019 19:49:30 +0200 Subject: [PATCH 1/4] Move the time container to the drawer on mobile devices. Hide the time containers when time has not been provided in the codelab. --- .../google-codelab/google_codelab.js | 31 +++++++++++++------ .../google-codelab/google_codelab.scss | 29 ++++++++++++++--- .../google-codelab/google_codelab.soy | 5 +-- 3 files changed, 49 insertions(+), 16 deletions(-) diff --git a/codelab-elements/google-codelab/google_codelab.js b/codelab-elements/google-codelab/google_codelab.js index 13a9eee0c..c6206936f 100644 --- 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,10 +555,11 @@ class Codelab extends HTMLElement { * @private */ updateTimeRemaining_() { - if (!this.timeContainer_) { + if (!this.timeContainer_ || !this.timeContainer_.length) { return; } + let time = 0; for (let i = this.currentSelectedStep_; i < this.steps_.length; i++) { const step = /** @type {!Element} */ (this.steps_[i]); @@ -568,13 +569,23 @@ 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); - } + this.timeContainer_.forEach((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 +817,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 +826,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 index 2dca83f96..a46821535 100644 --- a/codelab-elements/google-codelab/google_codelab.scss +++ b/codelab-elements/google-codelab/google_codelab.scss @@ -15,7 +15,7 @@ * limitations under the License. */ -google-codelab { + google-codelab { display: flex; width: 100%; height: 100%; @@ -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 index ca7305e52..17cd70d06 100644 --- a/codelab-elements/google-codelab/google_codelab.soy +++ b/codelab-elements/google-codelab/google_codelab.soy @@ -28,7 +28,7 @@ close menu -
+
@@ -59,7 +59,7 @@ */ {template .timeRemaining} {@param time: number} -
+
access_time {if $time == 1} {$time} min remaining @@ -76,6 +76,7 @@ {template .drawer} {@param steps: list} {@param? feedback: string} +
    {for $step in $steps} From 69a5ec806dba8b1c76fe1ec93229b72ecce653ec Mon Sep 17 00:00:00 2001 From: Nicolas Garnier Date: Sun, 28 Apr 2019 22:10:06 +0200 Subject: [PATCH 2/4] Removed typo --- codelab-elements/google-codelab/google_codelab.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/codelab-elements/google-codelab/google_codelab.scss b/codelab-elements/google-codelab/google_codelab.scss index a46821535..1e209900e 100644 --- a/codelab-elements/google-codelab/google_codelab.scss +++ b/codelab-elements/google-codelab/google_codelab.scss @@ -15,7 +15,7 @@ * limitations under the License. */ - google-codelab { +google-codelab { display: flex; width: 100%; height: 100%; From 2a2c42cb17528c3cce50a15d10704d7586c9f467 Mon Sep 17 00:00:00 2001 From: Nicolas Garnier Date: Sun, 28 Apr 2019 22:10:56 +0200 Subject: [PATCH 3/4] Removed typo --- codelab-elements/google-codelab/google_codelab.js | 1 - 1 file changed, 1 deletion(-) diff --git a/codelab-elements/google-codelab/google_codelab.js b/codelab-elements/google-codelab/google_codelab.js index c6206936f..28d8f3cc4 100644 --- a/codelab-elements/google-codelab/google_codelab.js +++ b/codelab-elements/google-codelab/google_codelab.js @@ -559,7 +559,6 @@ class Codelab extends HTMLElement { return; } - let time = 0; for (let i = this.currentSelectedStep_; i < this.steps_.length; i++) { const step = /** @type {!Element} */ (this.steps_[i]); From d0667dfeb50e6b39ab982972832e082179f089aa Mon Sep 17 00:00:00 2001 From: Nicolas Garnier Date: Mon, 29 Apr 2019 12:49:59 +0200 Subject: [PATCH 4/4] Fix for IE 11 --- codelab-elements/google-codelab/google_codelab.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/codelab-elements/google-codelab/google_codelab.js b/codelab-elements/google-codelab/google_codelab.js index 28d8f3cc4..9657c0a4b 100644 --- a/codelab-elements/google-codelab/google_codelab.js +++ b/codelab-elements/google-codelab/google_codelab.js @@ -568,7 +568,7 @@ class Codelab extends HTMLElement { } } - this.timeContainer_.forEach((timeContainer) => { + Array.prototype.forEach.call(this.timeContainer_, (timeContainer) => { // Hide the time container if there was no time indication. if (!time) { timeContainer.style.display = 'none'; @@ -584,7 +584,6 @@ class Codelab extends HTMLElement { dom.appendChild(timeContainer, newTimeEl); } }); - } /**