+
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({