mirror of
https://github.com/overte-org/overte.git
synced 2025-04-09 07:12:45 +02:00
Non-scrolling window with images scaled to fit
This commit is contained in:
David Rowe
parent
ead1f00bbf
commit
a6ef592353
3 changed files with 81 additions and 25 deletions
|
|
@ -8,16 +8,17 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="snapshot-container">
|
||||
<div class="snapsection">
|
||||
<label class="title">Snap</label>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="snapsection title">
|
||||
<label>Snap</label>
|
||||
</div>
|
||||
<hr />
|
||||
<div id="snapshot-pane">
|
||||
<div id="snapshot-images">
|
||||
</div>
|
||||
<div class="snapsection">
|
||||
</div>
|
||||
<div id="snapshot-controls">
|
||||
<div class="snapsection" id="snap-buttons">
|
||||
<div id="sharing">
|
||||
<div class="prompt">Would you like to share your pics in the Snapshots feed?</div>
|
||||
<div class="button">
|
||||
<span class="compound-button">
|
||||
<input type="button" class="blue" id="share" value="Share in Feed" onclick="shareSelected()" />
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="snapsection">
|
||||
<div class="snapsection" id="snap-settings">
|
||||
<span class="setting">
|
||||
<input type="button" class="glyph naked" id="snapshotSettings" value="@" onclick="snapshotSettings()" />
|
||||
<label for="snapshotSettings">Snapshot settings</label>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue