rearranged layout, so ui works left-to-right

sajal · Jan 22, 2012 · c7314ec · c7314ec
1 parent b60819b
commit c7314ec
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/popup.html b/popup.html
@@ -62,13 +62,13 @@ <h3 class="ui-widget-header">New Purge Request</h3>
           <div id="invalspinner" style="display:none"><img src="spinner-16x16.gif" width="16" height="16"> Waiting for response from Cloudfront ...</div>
           <div id="invalerror" class="error" style="display:none"></div>
         </div>
-        <div id="invaldetails" class="ui-widget-content" style="width:100%;display:none;">
-          <h3 class="ui-widget-header">Purge details</h3>
-        </div>
+        <div id="invalidations" class="column ui-widget-content" style="width:100%;display:none;">
       </div>
 
-      <div id="invalidations" class="column ui-widget-content" style="display:none">
-
+      </div>
+
+      <div id="invaldetails" class="column ui-widget-content" style="display:none">
+        <h3 class="ui-widget-header">Purge details</h3>
       </div>
 
     </div>

diff --git a/script.js b/script.js
@@ -159,11 +159,13 @@ var updatedistlist = function(dist){
   distributions.style.display="";
   $( "#distlist" ).selectable();
   $( "#distlist" ).bind( "selectableselected", function(event, ui) {
+    document.getElementById("invaldetails").innerHTML = "";
+    document.getElementById("invaldetails").style.display = "block";
+
     id = ui.selected.getElementsByClassName("id")[0].innerHTML;
     window.currentdist = id;
     cfobj.getAllInvalidations(id, updateinvalidations);
-    document.getElementById("invalidations").innerHTML = '<span id="invallistspinner" ><img src="spinner-16x16.gif" width="16" height="16">Loading your last purge requests ...</span>';
-
+    document.getElementById("invalidations").innerHTML = '<span id="invallistspinner" ><img src="spinner-16x16.gif" width="16" height="16">Loading your last purge requests ...</span>';    
   });
 
 }
@@ -181,27 +183,31 @@ var updateinvalidations = function(invals){
   //<h3 class="ui-widget-header ui-corner-all">Invalidations</h3>
   title = document.createElement('h3');
   title.className = "ui-widget-header ui-corner-all";
-  title.appendChild(document.createTextNode("Purge Request Status"));
+  title.appendChild(document.createTextNode("Status of Last Purge Requests"));
   invalidations.appendChild(title);
   var ol = document.createElement('ul');
   ol.id = "invallist";
   for (i=0;i<invals.length;i++){
-    var box = document.createElement('div');
+    var box = document.createElement('li');
     box.className = "invalbox";
     var el = document.createElement('div');
     el.className = "id";
     el.appendChild(document.createTextNode(invals[i].Id["#text"]));
     var st = document.createElement('div');
-    st.className = invals[i].Status["#text"];
+    st.className = "status " + invals[i].Status["#text"];
     //box.classList.add(invals[i].Status["#text"]);
     var status = invals[i].Status["#text"];
     if (status == "InProgress"){
       status = "In progress";
     }
+    /*var link = document.createElement('div');
+    link.className = "details";
+    link.appendChild(document.createTextNode("details")); */
 
     st.appendChild(document.createTextNode(status));
     box.appendChild(el);
     box.appendChild(st);
+    //box.appendChild(link);
     //box.onclick = invaldetails;
     ol.appendChild(box);
     invalidations.appendChild(ol);

diff --git a/style.css b/style.css
@@ -93,6 +93,7 @@ input[type="submit"]:active { position:relative; top:1px; }
 #row  { display:table-row; }
 .column { display:table-cell; padding:0; border:none;}
 
+#distributions { width:306px; }
 #distlist .ui-selecting { background:#eee; }
 #distlist .ui-selected { background:#eee; }
 #distlist { list-style-type: none; margin: 0; padding: 0; }
@@ -101,17 +102,30 @@ input[type="submit"]:active { position:relative; top:1px; }
 .distbox .id { color:#1C778A; font-weight:bold; text-decoration:underline; } /* f7a8od */
 .distbox .cnames { margin-left:0px; }
 
+#newinval { width:400px; padding:0 10px; }
 #newpurge { margin-bottom:20px; }
-#newinval { width:100%; padding:0 10px; }
 
 #invalidations { width:226px; }
 #invallist { list-style-type:none; margin:0; padding:0; }
-.invalbox { width:220px; margin:5px 0; padding:3px; }
+.invalbox { margin:0px 0; padding:0; }
 .invalbox:hover { cursor:pointer;}
 #invallist .ui-selected { background:#eee; /*color:#f7a80d;*/ }
-.invalbox .id { color:#222; }
+.invalbox .id { width: 190px; float:left; margin:5px 0; color:#1C778A; text-decoration:underline; }
+.invalbox .status { width: 190px; float:left; margin:5px 0; }
+/*.invalbox .details { width: 80px; float:left; color:#1C778A; text-decoration:underline; }*/
+
 #invalspinner, #invalerror { margin-top:10px; }
 
+#invaldetails { width: 214px; word-wrap: break-word; }
+@media only screen and (min-width:1060px) {
+  #invaldetails { width: 314px; }
+}
+@media only screen and (min-width:1160px) {
+  #invaldetails { width: 414px; }
+}
+@media only screen and (min-width:1260px) {
+  #invaldetails { width: 514px; }
+}
 /* in html/js, we can remove the .ui-selectee, i think */
 
 /* #distlist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }*/