Cleaning up CSS

diff --git a/public/script.js b/public/script.js
index f0967d587085675d2d2c3991cffa4d11651ca5ed..585d4db45bdf5718a8ad0b98e8bf1a072ea7db28 100644 (file)
--- a/public/script.js
+++ b/public/script.js
@@ -23,20 +23,26 @@ $(document).ready(function() {
     link.click(function() {
       scrim(1, function() {
         $('#subcontent .container').empty();
-        $('#subcontent').fadeIn(100);
+        var offset = 150;
+        $('#subcontent').css({
+            width : window.innerWidth - offset + "px",
+            height : window.innerHeight - offset + "px",
+            top : offset / 2,
+            left : offset / 2
+          })
+          .fadeIn(100);
 
-        //console.log(thumbs_url);
+        $('#subcontent .container').text("loading...");
 
         $.getJSON('/thumbs/?url=' + thumbs_url, function(data) {
 
-          var destElem = '#subcontent .container';
+          $('#subcontent .container').empty();
 
-          console.log(data);
-          var items = [];
+          var destElem = '#subcontent .container';
 
           $('<div/>', {
             'class' : 'desc',
-            html : '<a target="_blank" href="' + data.url + '"> ' + data.url + ' </a>'
+            html : '<p><a target="_blank" href="' + data.url + '"> ' + data.url + ' </a></p>'
           }).appendTo(destElem);
 
           $('<ul/>', {
@@ -46,7 +52,7 @@ $(document).ready(function() {
 
           $.each(data.links, function(key, thumb) {
             $('<li><a target="_blank" href="'+thumb.url+'"><img src="' + thumb.img + '"></a></li>')
-              .appendTo('#subcontent .container ul.thumbs')
+              .appendTo(destElem + ' ul.thumbs')
           });
 
         });

diff --git a/public/style.css b/public/style.css
index c29ecf1df92d1b88686fe10ac529b7e76b7f4390..d5ba721d771a30dd8a22b5840c4157908f234ebc 100644 (file)
--- a/public/style.css
+++ b/public/style.css
@@ -23,9 +23,8 @@ ul.thumbs li img {
     width:160px;
     height:110px;
 }
-
 #scrim {
-    background:rgba(0,0,0,0.5);
+    background:rgba(0,0,0,0.8);
     width:100%;
     height:100%;
     position:fixed;
@@ -34,22 +33,19 @@ ul.thumbs li img {
     z-index: 100;
     display: none;
 }
-
 #subcontent {
+    overflow: auto;
     position:fixed;
     z-index:200;
     display:none;
-    left: 50%;
-    top:20px;
-    width:75%;
+    background:#333;
 }
 #subcontent .container {
-    position: relative;
-    left: -50%;
-    background:#444;
-    width:100%;
     text-align:center;
 }
+#subcontent .container ul {
+    padding:20px;
+}
 #subcontent .container li {
     display:inline-block;
     margin:5px;