merge UI developments

IQSS · Jun 24, 2015 · 9c6da34 · 9c6da34
2 parents a70f24f + 5c9f591
commit 9c6da34
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/app.css b/app.css
@@ -102,8 +102,11 @@ text.id {
     width:100%;
     height:600px;
 }
-#main.svg-leftpanel svg, #main.svg-rightpanel svg {width: calc(100% - 300px);}
-#main.svg-leftpanel.svg-rightpanel svg {width: calc(100% - 300px);}
+#main.svg-leftpanel svg, #main.svg-rightpanel svg {width: 100%;} /* This is size when left/right panel minimized. Was: calc(100% - 300px);}*/
+#main.svg-leftpanel.svg-rightpanel svg {width: 100%;}   /*  Was: calc(100% - 300px);} /*
+/* Above changes fix issue when screen gets very small, and right margin is fixed at 300px, obscuring central display, even while left tab is shrinking below 300px */
+
+
 /* #main.svg-marg-left svg {margin-left:0px;}
 #main.svg-marg-right svg {margin-right:0px;} */
 
@@ -154,7 +157,7 @@ div.popover.variables div.popover-content.form-horizontal .form-group {
 #rightpanel #rightContentArea div.active {display:block;}
 #rightpanel.expandpanel {width:40%;}
 #rightpanel.closepanel {width:1px;}
-#rightpanel.closepanel #rightpaneltitle, #rightpanel.closepanel div.btn-toolbar, #rightpanel.closepanel div.row-fluid.closepanel {display:none;}
+#rightpanel.closepanel #rightpaneltitle, #rightpanel.closepanel div.btn-group-justified, #rightpanel.closepanel div.row-fluid.closepanel {display:none;}
 
 div.sidepanel div.panelbar {
   position:absolute;
@@ -179,7 +182,7 @@ div.sidepanel div.panelbar span {
 #main {
     border:1px solid #ADADAD;
     width: 100%;
-    margin-bottom:160px;
+    margin-bottom:50px;   /* This is the hard coded height of the ticker div.  Was 160px; which gave too much padding and empty bottom space.*/
     position: relative;
 }
 

diff --git a/app_ddi.js b/app_ddi.js
@@ -1976,10 +1976,10 @@ function makeCorsRequest(url,btn,callback, warningcallback, jsonstring) {
     xhr.onerror = function() {
         // note: xhr.readystate should be 4, and status should be 200.  a status of 0 occurs when the url becomes too large
         if(xhr.status==0) {
-            alert('There was an error making hte request. xmlhttprequest status is 0.');
+            alert('There was an error making the request. xmlhttprequest status is 0.');
         }
         else if(xhr.readyState!=4) {
-            alert('There was an error making hte request. xmlhttprequest readystate is not 4.');
+            alert('There was an error making the request. xmlhttprequest readystate is not 4.');
         }
         else {
             alert('Woops, there was an error making the request.');

diff --git a/gui.html b/gui.html
@@ -86,7 +86,7 @@ <h4 id="dataName" style="display:inline;" onclick="citetoggle=clickcite(citetogg
 
         <div id="legend" class="legendary panel panel-default" style="display:none">
             <div class="panel-heading">
-                <h3 class="panel-title">Legend  <span class="glyphicon glyphicon-large glyphicon-chevron-up pull-right" style="cursor: pointer; cursor: hand;" data-toggle="collapse" data-target="#collapseLegend"
+                <h3 class="panel-title">Legend  <span class="glyphicon glyphicon-large glyphicon-chevron-down pull-right" style="cursor: pointer; cursor: hand;" data-toggle="collapse" data-target="#collapseLegend"
                 href="#collapseLegend" onclick="$(this).toggleClass('glyphicon-chevron-up').toggleClass('glyphicon-chevron-down');"></span></h3>
             </div>
             <div id="collapseLegend" class="panel-collapse collapse in">
@@ -149,7 +149,7 @@ <h3 class="popover-title">Summary Statistics</h3>
                 <h3 class="panel-title">Data Selection</h3>
             </div>
 
-            <div class="btn-toolbar" role="toolbar" style="margin-left:.5em;margin-top:.5em;">
+            <div class="btn-toolbar" role="toolbar" style="margin-left:.5em;margin-top:.5em;"> 
                 <div class="btn-group" style="margin-left:0;">
                     <button type="button" class="btn active" id="btnVariables" title="Click variable name to add or remove the variable pebble from the modeling space." onclick="tabLeft('tab1');">Variables</button>
                     <button type="button" class="btn btn-default" id="btnSubset" onclick="tabLeft('tab2');">Subset</button>
@@ -166,6 +166,7 @@ <h3 class="panel-title">Data Selection</h3>
                             <p style="padding:.5em 1em;">Select a variable from within the visualization in the center panel to view its summary statistics.</p>
                         </div>
                     </div>
+
                 </div>
             </div>
         </div>
@@ -178,13 +179,16 @@ <h3 class="panel-title">Data Selection</h3>
               <h3 class="panel-title">Model Selection</h3>
           </div>
 
-         <div class="btn-toolbar" role="toolbar" style="margin-left:.5em;margin-top:.5em;">
-             <div class="btn-group" style="margin-right:0;">
-                 <button type="button" class="btn active" id="btnModels" onclick="tabRight('btnModels');">Models</button>
-                 <button type="button" class="btn btn-default" id="btnSetx" title="Select values at which to simulate quantities of interest (Zelig's setx function)." onclick="tabRight('btnSetx');">Set Covar.</button>
-                 <button type="button" class="btn btn-default" id="btnResults" onclick="tabRight('btnResults');">Results</button>
-             </div>
-         </div>
+
+        <!-- <div class="btn-toolbar" role="toolbar" style="margin-left:.5em;margin-top:.5em;"> -->
+        <!-- The following is fix for the longstanding button wrapping problem on small screens -->
+        <div class="btn-group btn-group-justified" role="group" style="margin-top:.5em;" aria-label="...">   
+             <!--<div class="btn-group" style="margin-right:0;"> -->
+                 <button type="button" class="btn active" id="btnModels" onclick="tabRight('btnModels');" style="width: 33%">Models</button>
+                 <button type="button" class="btn btn-default" id="btnSetx" onclick="tabRight('btnSetx');" style="width: 34%">Set Covar.</button>
+                 <button type="button" class="btn btn-default" id="btnResults" onclick="tabRight('btnResults');" style="width: 33%">Results</button>
+             <!-- </div> -->
+        </div> 
 
 
             <div class="row-fluid">