Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-07-23 12:24:26 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix up layout, and adapt to recent changes in file structure

Browse source
This commit is contained in:
howard-stearns 2016-08-11 16:23:01 -07:00
parent e6746acf4c
commit e3aae0e93f
1 changed files with 53 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
scripts/system/html/ShareSnapshot.html
View file

@ -1,9 +1,48 @@
<html> <html>
<head> <head>
<title>Share</title> <title>Share</title>
<link rel="stylesheet" type="text/css" href="edit-style.css"> <link rel="stylesheet" type="text/css" href="css/edit-style.css">
<style type="text/css">
.snapshot-container{
width:100%;
}
.snapshot-column-left{
width:50%;
float:left;
}
.snapshot-column-right{
width:50%;
float:right;
}
.snapshot-column-right > div > img{
max-width: 100%;
height:auto;
}
@media (max-width: 768px){
.snapshot-column-left{
width:100%;
}
.snapshot-column-right{
width:100%;
}
.snapshot-column-right > div > img{
margin-top:32px;
}
}
.snapsection{
width:95% !important;
padding-right:0px;
}
div.clear { clear: both; }
</style>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="eventBridgeLoader.js"></script> <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script> <script>
var paths = [], idCounter = 0; var paths = [], idCounter = 0;
function addImage(data) { function addImage(data) {
@ -14,7 +53,7 @@
id = "p" + idCounter++; id = "p" + idCounter++;
function toggle() { data.share = input.checked; } function toggle() { data.share = input.checked; }
img.src = data.localPath; img.src = data.localPath;
label.appendChild(img); div.appendChild(img);
// 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;
@ -24,13 +63,14 @@
div.class = "property checkbox"; div.class = "property checkbox";
div.appendChild(input); div.appendChild(input);
div.appendChild(label); div.appendChild(label);
document.getElementById("images").appendChild(div); document.getElementById("snapshot-images").appendChild(div);
paths.push(data); paths.push(data);
} }
window.onload = function () { window.onload = function () {
// Something like the following will allow testing in a browser. // Something like the following will allow testing in a browser.
//addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'}); //addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'});
//addImage({localPath: 'http://lorempixel.com/1512/1680'});
openEventBridge(function () { openEventBridge(function () {
// Set up a handler for receiving the data, and tell the .js we are ready to receive it. // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
EventBridge.scriptEventReceived.connect(function (message) { EventBridge.scriptEventReceived.connect(function (message) {
@ -47,32 +87,27 @@
EventBridge.emitWebEvent([]); EventBridge.emitWebEvent([]);
}; };
</script> </script>
<style type="text/css">
div.columns div:first-child { width: 300px; }
div.columns div { float: left; }
div.clear { clear: both; }
img { width: 400; }
</style>
</head> </head>
<body> <body>
<div class="columns"> <div class="snapshot-container">
<div> <div class="snapshot-column-left">
<div class="section-header"> <div class="section-header snapsection">
<label>Snapshots sucessfully saved!</label> <label>Snapshots sucessfully saved!</label>
</div> </div>
<div class="sub-section-header"> <div class="sub-section-header snapsection">
<label>Would you like to share?</label> <label>Would you like to share?</label>
</div> </div>
<div class="sub-section-header"> <div class="sub-section-header snapsection">
<input type="button" id="share" value="SHARE IN FEED" onclick="shareSelected()"/> <input type="button" id="share" value="SHARE IN FEED" onclick="shareSelected()"/>
</div> </div>
<div class="sub-section-header"> <div class="sub-section-header snapsection">
<input type="button" class="red" id="close" value="DON'T SHARE" onclick="doNotShare()"/> <input type="button" class="red" id="close" value="DON'T SHARE" onclick="doNotShare()"/>
</div> </div>
</div> </div>
<div id="images" class="image-column"/> <div id="snapshot-images" class="snapshot-column-right"/>
</div>
</div> </div>
<div class="clear"></div>
</body> </body>
</html> </html>