Merge pull request #7690 from guerler/fix_side_panel_styles

Fix side panel styling, adjust appearance in reports

client/galaxy/style/scss/base.scss

@@ -1502,88 +1502,57 @@ div.permissionContainer {
 @import "ui/error-modal.scss";
 
 // ==== Tool menu styles
-
 .toolMenuContainer {
     color: $panel-text-color;
     a {
         color: $panel-text-color;
-        // text-decoration: none;
     }
     background: $panel-bg-color;
     min-height: 100%;
     @extend .m-3;
 }
 
-div.toolSectionPad {
-    margin: 0;
-    padding: 0;
-    height: 5px;
-    font-size: 0px;
-}
-
 div.toolSectionWrapper {
-    margin-bottom: 5px;
-}
-
-div.toolSectionDetailsInner {
-    margin-left: 5px;
-    margin-right: 5px;
+    @extend .mb-1;
 }
 
 div.toolSectionTitle {
     font-weight: 500;
-    font-size: 1rem;
+    font-size: $h4-font-size;
 }
 
 div.toolPanelLabel {
-    padding-top: 10px;
-    padding-bottom: 5px;
+    @extend .m-2;
     font-weight: bold;
-    color: gray;
+    color: $gray-600;
     text-transform: uppercase;
 }
 
 div.toolTitle {
-    margin-left: 10px;
-    margin-right: 10px;
+    @extend .m-2;
     display: block;
     .labels {
         float: right;
-        margin-left: 2px;
     }
 }
 
 div a.tool-link {
     text-decoration: none;
     display: block;
-    padding-top: 5px;
-    padding-bottom: 5px;
-
     span.tool-old-link {
         text-decoration: underline;
     }
-
     &:hover {
         background: darken($panel-bg-color, 5%);
     }
 }
 
-div.toolSectionBody div.toolPanelLabel {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-left: 16px;
-    margin-right: 10px;
-    display: list-item;
-    list-style: none outside;
-}
-
 div.toolTitleNoSection {
-    padding-bottom: 5px;
+    @extend .pb-1;
     font-weight: bold;
 }
 
 // Dataset Display Styles
-
 #loading_indicator {
     position: fixed;
     right: 10px;
@@ -1943,7 +1912,7 @@ div.toolTitleNoSection {
 }
 
 /* Toolshed, reports custom styles from mako templates */
-body.toolshed {
+body.toolshed, body.reports {
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -1958,15 +1927,6 @@ body.toolshed {
     }
 }
 
-body.reports {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    #left {
-        background: #c1c9e5 url(../../images/menu_bg.png) top repeat-x;
-    }
-}
-
 /* Used in Galaxy IE for spinner loading TODO: Remove in IE entrypoint refactoring */
 #ie-loading-spinner {
     position: absolute;

client/galaxy/style/scss/reports.scss

@@ -1,21 +1,5 @@
 // ############################################################# Reports Webapp
 
-// ======================================================== Left ==============
-.reports-panel-container {
-    position: absolute;
-    /*From base.scss, top should be $panel_header_height*/
-    top: 30px;
-    bottom: 10px;
-    overflow: scroll;
-    width: 100%;
-    padding: 10px;
-}
-#reports_home {
-    position: relative;
-    top: -7px;
-    float: right;
-}
-
 // ======================================================== SparkLines ========
 #spark_time_select {
     display: inline-block;

templates/webapps/reports/base_panels.mako

@@ -38,13 +38,11 @@
         </table>
     </div>
     ## Logo, layered over tabs to be clickable
-    <div class="navbar-brand" style="position: absolute; top: 0; left: 0;">
-        <a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
-        <img border="0" src="${h.url_for('/static/images/galaxyIcon_noText.png')}" style="width: 26px; vertical-align: top;">
-        Galaxy Reports
+    <a class="navbar-brand" href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
+        <img class="navbar-brand-image" src="${h.url_for('/static/images/galaxyIcon_noText.png')}" />
+        <span class="navbar-brand-title">Galaxy Reports</span>
         %if app.config.brand:
             <span class='brand'>/ ${app.config.brand}</span>
         %endif
-        </a>
-    </div>
+    </a>
 </%def>

templates/webapps/reports/index.mako

@@ -30,12 +30,12 @@
     %>
     <div class="unified-panel-header" unselectable="on">
         <div class='unified-panel-header-inner'><span>Reports</span>
-            <a target="galaxy_main" href="${h.url_for( controller='home', action='run_stats' )}">
-                <button id="reports_home" data-toggle="tooltip" data-placement="top" title="Dashboard" class="btn btn-secondary primary-button" type="button"><span class="fa fa-home"></span></button>
+            <a target="galaxy_main" href="${h.url_for( controller='home', action='run_stats' )}" class="float-right">
+                <span class="fa fa-home"></span>
             </a>
         </div>
     </div>
-    <div class="page-container reports-panel-container">
+    <div class="unified-panel-body">
         <div class="toolMenu">
             <div class="toolSectionList">
                 <div class="toolSectionPad"></div>