Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-08-07 18:21:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Non-scrolling window with images scaled to fit

Browse source
This commit is contained in:
David Rowe 2017-03-28 14:43:26 +13:00
parent ead1f00bbf
commit a6ef592353
3 changed files with 81 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
scripts/system/html/SnapshotReview.html
View file

@ -8,16 +8,17 @@
</head> </head>
<body> <body>
<div class="snapshot-container"> <div class="snapsection title">
<div class="snapsection"> <label>Snap</label>
<label class="title">Snap</label> </div>
</div> <hr />
<hr /> <div id="snapshot-pane">
<div id="snapshot-images"> <div id="snapshot-images">
</div> </div>
<div class="snapsection"> </div>
<div id="snapshot-controls">
<div class="snapsection" id="snap-buttons">
<div id="sharing"> <div id="sharing">
<div class="prompt">Would you like to share your pics in the Snapshots feed?</div>
<div class="button"> <div class="button">
<span class="compound-button"> <span class="compound-button">
<input type="button" class="blue" id="share" value="Share in Feed" onclick="shareSelected()" /> <input type="button" class="blue" id="share" value="Share in Feed" onclick="shareSelected()" />
@ -30,7 +31,7 @@
</div> </div>
</div> </div>
<hr /> <hr />
<div class="snapsection"> <div class="snapsection" id="snap-settings">
<span class="setting"> <span class="setting">
<input type="button" class="glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" /> <input type="button" class="glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
<label for="snapshotSettings">Snapshot settings</label> <label for="snapshotSettings">Snapshot settings</label>

71
scripts/system/html/css/SnapshotReview.css
View file

@ -10,32 +10,81 @@
body { body {
padding-top: 0; padding-top: 0;
} padding-bottom: 14px;
.snapshot-container {
width: 100%;
}
#snapshot-images > img {
width: 100%;
} }
.snapsection { .snapsection {
padding-top: 21px; padding-top: 14px;
text-align: center; text-align: center;
} }
.snapsection:first-child { .snapsection.title {
padding-top: 0; padding-top: 0;
text-align: left; text-align: left;
} }
.title { .title label {
font-size: 18px; font-size: 18px;
position: relative; position: relative;
top: 12px; 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 { .prompt {
font-family: Raleway-SemiBold; font-family: Raleway-SemiBold;
font-size: 14px; font-size: 14px;

18
scripts/system/html/js/SnapshotReview.js
View file

@ -10,7 +10,7 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // 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) { function addImage(data) {
if (!data.localPath) { if (!data.localPath) {
return; return;
@ -19,11 +19,16 @@ function addImage(data) {
input = document.createElement("INPUT"), input = document.createElement("INPUT"),
label = document.createElement("LABEL"), label = document.createElement("LABEL"),
img = document.createElement("IMG"), img = document.createElement("IMG"),
div2 = document.createElement("DIV"),
id = "p" + idCounter++; id = "p" + idCounter++;
function toggle() { data.share = input.checked; } function toggle() { data.share = input.checked; }
div.style.height = "" + Math.floor(100 / imageCount) + "%";
if (imageCount > 1) {
img.setAttribute("class", "multiple");
}
img.src = data.localPath; img.src = data.localPath;
div.appendChild(img); 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. // 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 = label.setAttribute('for', id); // cannot do label.for =
input.id = id; input.id = id;
@ -31,9 +36,10 @@ function addImage(data) {
input.checked = (id === "p0"); input.checked = (id === "p0");
data.share = input.checked; data.share = input.checked;
input.addEventListener('change', toggle); input.addEventListener('change', toggle);
div.class = "property checkbox"; div2.setAttribute("class", "property checkbox");
div.appendChild(input); div2.appendChild(input);
div.appendChild(label); div2.appendChild(label);
div.appendChild(div2);
} else { } else {
data.share = true; data.share = true;
} }
@ -73,7 +79,7 @@ window.onload = function () {
handleShareButtons(shareMsg); handleShareButtons(shareMsg);
// rest are image paths which we add // rest are image paths which we add
useCheckboxes = message.action.length > 1; imageCount = message.action.length;
message.action.forEach(addImage); message.action.forEach(addImage);
}); });
EventBridge.emitWebEvent(JSON.stringify({ EventBridge.emitWebEvent(JSON.stringify({