From e3aae0e93f0e2a2d55bbbd6055efaf6c313e9a1b Mon Sep 17 00:00:00 2001
From: howard-stearns <howard.stearns@gmail.com>
Date: Thu, 11 Aug 2016 16:23:01 -0700
Subject: [PATCH] Fix up layout, and adapt to recent changes in file structure

---
 scripts/system/html/ShareSnapshot.html | 71 +++++++++++++++++++-------
 1 file changed, 53 insertions(+), 18 deletions(-)
diff --git a/scripts/system/html/ShareSnapshot.html b/scripts/system/html/ShareSnapshot.html
index 4691b7488c..fd865cfb7a 100644
--- a/scripts/system/html/ShareSnapshot.html
+++ b/scripts/system/html/ShareSnapshot.html
@@ -1,9 +1,48 @@
 <html>
   <head>
     <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="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
     <script>
     var paths = [], idCounter = 0;
     function addImage(data) {
@@ -14,7 +53,7 @@
             id = "p" + idCounter++;
         function toggle() { data.share = input.checked; }
         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.
         label.setAttribute('for', id); // cannot do label.for =
         input.id = id;
@@ -24,13 +63,14 @@
         div.class = "property checkbox";
         div.appendChild(input);
         div.appendChild(label);
-        document.getElementById("images").appendChild(div);
+        document.getElementById("snapshot-images").appendChild(div);
         paths.push(data);
 
     }
     window.onload = function () {
         // 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: 'http://lorempixel.com/1512/1680'});
         openEventBridge(function () {
             // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
             EventBridge.scriptEventReceived.connect(function (message) {
@@ -47,32 +87,27 @@
         EventBridge.emitWebEvent([]);
     };
     </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>
 
   <body>
-    <div class="columns">
-      <div>
-        <div class="section-header">
+    <div class="snapshot-container">
+      <div class="snapshot-column-left">
+        <div class="section-header snapsection">
           <label>Snapshots sucessfully saved!</label>
         </div>
-        <div class="sub-section-header">
+        <div class="sub-section-header snapsection">
           <label>Would you like to share?</label>
         </div>
-        <div class="sub-section-header">
+        <div class="sub-section-header snapsection">
           <input type="button" id="share" value="SHARE IN FEED" onclick="shareSelected()"/>
         </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()"/>
         </div>
       </div>
-      <div id="images" class="image-column"/>
+      <div id="snapshot-images" class="snapshot-column-right"/>
+      </div>
     </div>
-    <div class="clear"></div>
   </body>
 </html>
