RGL Browser: a bunch of style updates to make it less fugly

lib/doc/browse/index.html

@@ -7,7 +7,6 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width">
   <link rel="shortcut icon" href="icon.png" type="image/png">
-  <link rel="stylesheet" href="http://www.grammaticalframework.org/css/style.css">
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="google-code-prettify/prettify-gf.css">
 </head>
@@ -25,8 +24,7 @@
     </div>
     <div class="pane right">
       <div id="tabbar">
-        <h2>...</h2>
+        Module: <span id="module_name">...</span>
-        <a href="http://www.grammaticalframework.org/lib/doc/synopsis.html" title="RGL Synopsis">Synopsis...</a>
       </div>
       <div id="scope" class="panel scope maxheight">
         <div id="scope_controls">
@@ -34,7 +32,7 @@
           &nbsp;<span id="scope_count">0</span> items&nbsp;
           <input type="submit" id="submit" value="Filter" />
           <input type="reset" id="clear" value="Clear" />
-          <input type="checkbox" id="case_sensitive" checked="checked" /><label for="case_sensitive">Case sensitive?</label>
+          <input type="checkbox" id="case_sensitive" /><label for="case_sensitive">Case sensitive?</label>
           <input type="radio" name="show" id="show_all" checked="checked" /><label for="show_all">Show all</label>
           <input type="radio" name="show" id="show_local" /><label for="show_local">Local only</label>
         </div>

lib/doc/browse/script.js

@@ -127,7 +127,7 @@ $(document).ready(function() {
     }
 
     var setTitle = function(s){
-        $('#tabbar h2').html(s);
+        $('#module_name').html(s);
         $('title').html(state.title + ": " + s);
     }
 
@@ -189,7 +189,7 @@ $(document).ready(function() {
                 return false;
             })
 //            .appendTo("#tabbar")
-            .insertBefore("#tabbar *:last-child")
+            .insertAfter("#tabbar *:last-child")
     });
     showPanel(".panel:first");
 
@@ -232,7 +232,6 @@ $(document).ready(function() {
             if (!module) continue;
             $('<a>')
                 .html(module)
-                .addClass('button')
                 .attr('href', "#"+lang+"/"+module+".gf")
                 .appendTo("#modules");
         }
@@ -406,7 +405,8 @@ $(document).ready(function() {
     });
 
     var recalculateHeights = function() {
-        $('body').height( $(window).height()-60); // just found empirically
+        var x = 40; // just found empirically
+        $('body').height( $(window).height()-x);
         $('.maxheight').each(function(){
             var obj = $(this);
             var parent = obj.parent();

lib/doc/browse/style.css

@@ -2,78 +2,75 @@
   GF RGL Browser
   John J. Camiller, 2012
 */
-.scroll-y
+
-{ 
+body {
+  background-color: white;
+  margin:0;
+}
+
+h1,h2,h3,h4 {
+  font-family: sans-serif;
+  color: #303030;
+  text-shadow: rgba(0,0,0,0.25) 2px 2px 5px;
+}
+
+.scroll-y { 
   overflow-y:auto;
-  }
+}
-header h1
+
-{
+header {
-  text-align:left;
+  background:#f2f2f2;
-  margin:0 0 0.2em;
+  padding:10px;
-  }
+}
-div[role='main']
+header h1 {
-{ 
+  margin:0;
+  font-size:1em;
+}
+div[role='main'] { 
   overflow:hidden;
   width:100%;
   height:100%;
- }
+  font: 13px sans-serif;
-.pane
+}
-{ 
+
+.pane { 
   display:block;
   height:100%;
- }
+}
-.pane.left
+.pane.left { 
-{ 
   width:170px;
   float:left;
-  background:#ddd;
+  background:#f2f2f2;
-  padding:0.2em;
+}
- }
+.pane.right { 
-.pane.right
-{ 
   margin-left:170px;
- }
+  padding:5px 0 0 10px;
-.panel
+
-{
+  border-width:1px 0 0 1px;
-  padding:15px;
+  border-style:solid;
-  }
+  border-color:#ddd;
-.button
+}
-{
+#language_select { 
-  cursor:pointer;
-  color:#00e;
-  padding:1px;
-  }
-.button:hover
-{ 
-  text-decoration:underline;
- }
-#language_select
-{ 
-  font-size:1em;
   width:100%;
-  }
+}
-#modules a
+#modules a { 
-{ 
+  display: block;
-  display:block;
+  text-decoration: none;
-  margin:0.1em;
+  margin: 2px 5px;
-  text-decoration:none;
+}
-  }
+#modules a:hover { 
-#modules a:hover
-{ 
   text-decoration:underline;
-  }
+}
-#tabbar *
+
-{ 
+#tabbar {
-  display:inline-block;
+  border-bottom: 1px dotted #ccc;
- }
+  padding-bottom: 5px;
-#tabbar h2
+}
-{ 
+#module_name { 
-  margin: 0 1em;
+  font-weight: bold;
-  font-size: 1em;
+  margin-right: 2em;
-  border:0;
+}
- }
+.tab { 
-.tab
-{ 
   cursor:pointer;
   padding:0.5em 0.5em;
   margin-right:0.5em;
@@ -82,105 +79,96 @@ div[role='main']
   text-decoration:none;
   font-family:sans-serif;
   font-weight:bold;
-  font-size:0.9em;
+  background: #aaa;
-  }
+  color: white;
-#loading
+  border-radius: 0.5em;
-{ 
+  line-height: 1;
+}
+.tab:hover {
+  background: #666;
+}
+
+#loading {
   position: fixed;
-  top: 5px;
+  top: 10px;
-  left: 50%;
+  left: 46%;
   white-space: nowrap;
   padding: 0.5em 1em;
   border: 1px solid #F0C36D;
   background: #F9EDBE;
-  color: #222;
+  color: #333;
   vertical-align: top;
-  font-family: sans-serif;
+  font: bold 13px sans-serif;
- }
+}
-.scope
+.scope { 
-{ 
+}
-  background:#fff;
+.code { 
-  color:#333;
+}
- }
+.help { 
-.code
+}
-{ 
+input#search {
-  background:#444;
-  color:#eee;
- }
-.help
-{ 
-  background:#ccc;
-  color:#000;
- }
-input#search
-{
-  font-size:1em;
   font-family:monospace;
   width:25em;
   padding:0.25em;
   background:#eee;
-  }
+}
-#scope
+
-{
+.panel {
-  padding: 1em;
+  padding:10px 5px;
-  }
+}
-#scope_controls
+
-{ 
+#scope_controls { 
   border-bottom: 1px solid #CCC;
   padding-bottom: 0.5em;
-  }
+}
-#scope_list
+#scope_list {
-{
+  font: 12px monospace;
-  font-family:monospace;
   width:100%;
   margin-top:1em;
-  }
+  border-collapse: collapse;
-#scope_list tr:hover
+}
-{
+#scope_list tr:hover {
   background:#f9f9f9;
-  }
+}
-#scope_list tr.indir
+#scope_list tr.indir {
-{
   font-style:italic;
-  }
+}
-#scope_list tr.local td:nth-child(2)
+#scope_list tr.local td:nth-child(2) {
-{
   font-weight:bold;
-  }
+}
-#scope_list th
+#scope_list th {
-{
   text-align:left;
-  }
+}
-#scope_list th, #scope_list td
+#scope_list th, #scope_list td {
-{
   padding:0.4em;
   border-style: solid;
   border-width: 0 0 1px 0;
-  border-color: #ddd;
+  border-color: #eee;
   background:none;
   white-space:nowrap;
-  }
+}
-#scope_list td:nth-child(6)
+#scope_list td:nth-child(6) {
-{
   white-space:normal;
-  }
+}
-#code pre
+#code pre {
-{
   margin:0;
   color:#000;
   overflow:auto;
-  }
+  font: 12px monospace;
-dt
+}
-{ 
+#code ol.linenums {
+  color: #aaa;
+  margin: 0;
+}
+dt { 
   font-weight:bold;
-  }
+}
-footer
+footer { 
-{ 
+  padding:3px 6px;
-  padding:0.5em;
   color:#333;
-  font-size:0.9em;
+  font-size:13px;
   text-align:right;
   position:fixed;
   top:0;
   right:0;
-  }
+}