Attempt to improve sidebar

Author: guruz

data/codebrowser.js

@@ -1238,7 +1238,10 @@ $(function () {
 
 /*-------------------------------------------------------------------------------------*/
 
-    $('#content').append('<div id="allSideBoxes">');
+    //$('body').append('<div id="allSideBoxes">');
+    //$('#content').prepend('<div id="allSideBoxes">');
+    //$('body').prepend('<div id="allSideBoxes">');
+    $('#content').before('<div id="allSideBoxes">');
 
     // The definitions side bar
     var dfns = document.getElementsByClassName('def');

data/common.css

@@ -8,15 +8,20 @@ a:hover{  text-decoration: underline }
 div#header { position:fixed; top:0; left:0; right:0; background-color: #f5f5f5; z-index:2; height: 5.2em; overflow: clip; }
 div#header+hr {position:fixed; top:5.2em; left:0; right:0; z-index:2}
 div#header input {-webkit-appearance:searchfield;-moz-appearance:searchfield;appearance:searchfield;}
-div#content { margin-top: 5.3em; }
+div#content { margin-top: 5.3em; overflow:auto;/*width:100%;*/height:calc(100vh - 5.3em);}
 
 /* Fixme: We could experiment around with max-height: 90 vh? */
 #allSideBoxes {
-position:fixed; margin-top:1ex; top:5.2em; right:10px; z-index:1;
-max-height:30em;
+    float:right;
+    display:inline-block;
+/*position:fixed; margin-top:0px; margin-right:0px;top:5.2em; right:0px*/;/* z-index:1;*/
+/*max-height:30em;
+max-height:calc(100vh - 5.2em);
+height:calc(100vh - 5.2em);*/
+background-color:red;
 }
 .sideBox {
-padding:1ex; border-radius:0.5ex; overflow:hide; font-size:smaller; margin-bottom:1em;
+padding:1ex; border-radius:0.25ex; overflow:hide; font-size:smaller; margin-bottom:1em;
 max-height:100%;
 }
 .sideBox h3 { text-align:center; width:100%; cursor: pointer; cursor: hand; margin: 0;}
@@ -26,6 +31,9 @@ display:block; overflow:auto; max-width:20em; max-height:20em; list-style:none;
 .sideBox li {
 list-style-type: none; padding: 0; margin-right: 1ex;
 }
+@media only screen and (max-height: 50em) {
+.sideBox {max-height:25em;}
+}
 
 .code { border-collapse:collapse; width:100%; padding:0 }
 .code { font-family: monospace; }