moar css (#18)

RouxRC · May 8, 2017 · f22c167 · f22c167
1 parent 936521e
commit f22c167
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/web/css/webmonitor.css b/web/css/webmonitor.css
@@ -1,5 +1,5 @@
 body {
-  margin: 5px;
+  margin: 10px;
   overflow: hidden;
 }
 h1 {
@@ -15,13 +15,13 @@ h1 {
   overflow-x: auto;
   overflow-y: overlay;
   text-align: center;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 #versions {
   position: sticky;
   top: 0;
   background-color: white;
-  height: 22px;
+  height: 18px;
 }
 #versions p {
   margin: 0px 1px;
@@ -42,15 +42,18 @@ h1 {
   background: linear-gradient(to right, lightpink, lightgreen);
 }
 #screenshots img {
-  margin: 1px;
+  margin-right: 2px;
+  padding: 3px;
   vertical-align: top;
   cursor: pointer;
+  border: 1px dotted lightblue;
+  border-top: 0;
 }
 .expand {
   position: fixed;
-  right: 6px;
+  right: 11px;
   width: 18px;
-  background-color: #f9f999;
+  background-color: #ebd9fb;
   font-size: 12px;
   border-left: 1px solid darkgrey;
   border-bottom: 1px solid darkgrey;
@@ -61,7 +64,7 @@ h1 {
   top: 2px;
 }
 #selecter .expand {
-  top: 31px;
+  top: 36px;
 }
 #diff {
   width: 100%;

diff --git a/web/js/webmonitor.js b/web/js/webmonitor.js
@@ -67,7 +67,7 @@
       name = ns.nameVersion(version, true);
     curwin = curwin || ns.currentwin;
     $(".select" + curwin).removeClass('select' + curwin);
-    $("#" + version).addClass('select' + curwin);
+    $("." + version).addClass('select' + curwin);
     $("." + curwin + " .name").text(name)
     $("." + curwin + " a").attr("href", url);
     $("." + curwin + " iframe").attr("src", url);
@@ -91,7 +91,7 @@
   ns.loadReal = function(){
     var url = ns.url || "http://regardscitoyens.org";
     $(".selectorig").removeClass('selectorig');
-    $("#real").addClass('selectorig');
+    $(".real").addClass('selectorig');
     $(".orig a").text("live web " + url)
                 .attr("href", url);
     $(".orig .content").empty();
@@ -130,6 +130,7 @@
     } else {
       $("#diff" + typ).animate({height: 3 * ns.pieceHeight - 2}, ns.transitions);
       $("#diff" + typ + " .differ").height(3 * ns.pieceHeight - 2);
+      $(".differ").width($("#selecter").width() + 6);
       ns.mergely[typ].mergely('resize');
     }
   };
@@ -189,9 +190,10 @@
       imgW = Math.max(200, Math.min(350, parseInt(winW/ns.versions.length)));
     $("#selecter").height(ns.selecterHeight - 2);
     $("#selecter_large, #screenshots").width((ns.versions.length) * (imgW + 2) + 1);
-    $("#versions p, #screenshots img").width(imgW);
-    ns.diffHeight = winH - ns.selecterHeight - 42;
-    ns.selecterMaxHeight = winH - 40;
+    $("#versions p").width(imgW);
+    $("#screenshots img").width(imgW - 8);
+    ns.diffHeight = winH - ns.selecterHeight - 57;
+    ns.selecterMaxHeight = winH - 50;
     ns.pieceHeight = (ns.diffHeight - 18 * 4) / 3;
     $(".differ").width(winW - 10);
     $(".copy iframe, .orig iframe, #fullshots img").width((winW - 3) / 2);
@@ -209,8 +211,9 @@
         onclic = function(){
           ns.loadVersion(version);
         };
-      p.id = version;
+      p.className = version;
       p.textContent = textVersion;
+      i.className = version;
       i.src = ns.buildUrl(version, "png").replace(/.png$/, "-small.png");
       i.title = textVersion;
       i.alt = textVersion;