From a6ef592353ca416054a8bc0f66a06f93288e57ae Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 28 Mar 2017 14:43:26 +1300 Subject: [PATCH] Non-scrolling window with images scaled to fit --- scripts/system/html/SnapshotReview.html | 17 +++--- scripts/system/html/css/SnapshotReview.css | 71 ++++++++++++++++++---- scripts/system/html/js/SnapshotReview.js | 18 ++++-- 3 files changed, 81 insertions(+), 25 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 089e223602..3a2262e308 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -8,16 +8,17 @@ -
-
- -
-
+
+ +
+
+
-
+
+
+
-
Would you like to share your pics in the Snapshots feed?
@@ -30,7 +31,7 @@
-
+
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 13fb119992..34b690a021 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -10,32 +10,81 @@ body { padding-top: 0; -} - -.snapshot-container { - width: 100%; -} - -#snapshot-images > img { - width: 100%; + padding-bottom: 14px; } .snapsection { - padding-top: 21px; + padding-top: 14px; text-align: center; } -.snapsection:first-child { +.snapsection.title { padding-top: 0; text-align: left; } -.title { +.title label { font-size: 18px; position: relative; top: 12px; } +#snapshot-pane { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + padding-top: 56px; + padding-bottom: 175px; +} + +#snapshot-images { + height: 100%; + width: 100%; + position: relative; +} + +#snapshot-images > div { + position: relative; + text-align: center; +} + +#snapshot-images img { + max-width: 100%; + max-height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + vertical-align: middle; +} + +#snapshot-images div.property { + margin-top: 0; + position: absolute; + top: 50%; + left: 7px; + transform: translate(0%, -50%); +} + +#snapshot-images img { + box-sizing: border-box; + padding: 0 7px 0 7px; +} + +#snapshot-images img.multiple { + padding-left: 28px; +} + +#snapshot-controls { + width: 100%; + position: absolute; + left: 0; + bottom: 14px; +} + .prompt { font-family: Raleway-SemiBold; font-size: 14px; diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index efe30196ee..d97207384a 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -10,7 +10,7 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -var paths = [], idCounter = 0, useCheckboxes; +var paths = [], idCounter = 0, imageCount; function addImage(data) { if (!data.localPath) { return; @@ -19,11 +19,16 @@ function addImage(data) { input = document.createElement("INPUT"), label = document.createElement("LABEL"), img = document.createElement("IMG"), + div2 = document.createElement("DIV"), id = "p" + idCounter++; function toggle() { data.share = input.checked; } + div.style.height = "" + Math.floor(100 / imageCount) + "%"; + if (imageCount > 1) { + img.setAttribute("class", "multiple"); + } img.src = data.localPath; div.appendChild(img); - if (useCheckboxes) { // I'd rather use css, but the included stylesheet is quite particular. + if (imageCount > 1) { // I'd rather use css, but the included stylesheet is quite particular. // Our stylesheet(?) requires input.id to match label.for. Otherwise input doesn't display the check state. label.setAttribute('for', id); // cannot do label.for = input.id = id; @@ -31,9 +36,10 @@ function addImage(data) { input.checked = (id === "p0"); data.share = input.checked; input.addEventListener('change', toggle); - div.class = "property checkbox"; - div.appendChild(input); - div.appendChild(label); + div2.setAttribute("class", "property checkbox"); + div2.appendChild(input); + div2.appendChild(label); + div.appendChild(div2); } else { data.share = true; } @@ -73,7 +79,7 @@ window.onload = function () { handleShareButtons(shareMsg); // rest are image paths which we add - useCheckboxes = message.action.length > 1; + imageCount = message.action.length; message.action.forEach(addImage); }); EventBridge.emitWebEvent(JSON.stringify({