Address header border expansion by maintaining logo larger than navbar (

#452) Address report list buttons pushing out of alignment by overriding bootstrap table vertical alignment Address header margin for medium size screens with media query Forecasts and observations -> Forecasts & Observations in navbar
SolarArbiter · Oct 8, 2021 · f07cb89 · f07cb89
1 parent 66f25a9
commit f07cb89
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/sfa_dash/static/css/styles.css b/sfa_dash/static/css/styles.css
@@ -30,6 +30,10 @@ table.table {
   table-layout: fixed;
 }
 
+table.table td, table.table th {
+  vertical-align: middle;
+}
+
 @media (min-width: 992px) {
   .name-column {
     width: 40%;
@@ -51,12 +55,18 @@ main {
   margin-bottom: 2rem;
 }
 
+
+
 @media (min-width: 768px) {
+  main {
+    margin-top: 5rem;
+  }
+}
+@media (min-width: 992px) {
   main {
     margin-top: 4rem;
   }
 }
-
 @media (max-width: 767px) {
   main {
     margin-top: 0;
@@ -76,7 +86,9 @@ main {
 ul.sidebar-menu {
   padding-left: 0;
 }
-
+.logo-wrap {
+  border: 4px solid transparent;
+}
 .logo-wrap  img {
   height: 3em;
 }
@@ -346,8 +358,8 @@ a.help-button {
   color: white;
   font-weight: bolder;
   background-color: #6c757d;
-  border-radius: 12px;
-  width: 24px;
+  border-radius: 1rem;
+  width: 1.5rem;
   display: inline-block;
   text-align: center;
 }
@@ -940,6 +952,7 @@ h5, .h5 {
     color: #68696a;
     padding: 1em;
     transition: background-color .2s, color .2s, text-shadow .2s;
+    border-bottom: 1px solid transparent;
   }
   ul.site-menu .nav-item a.nav-link.active {
     border-bottom: 2px solid #552288;
@@ -962,3 +975,8 @@ h5, .h5 {
 .ctrl-buttons a.btn {
     margin: 2px 0;
 }
+
+/* override bootstrap classes causing misalignment with other inputs */
+.btn {
+  margin-bottom: 3px;
+}
diff --git a/sfa_dash/templates/data/reports.html b/sfa_dash/templates/data/reports.html
@@ -27,7 +27,7 @@
           <a href="{{ url_for('data_dashboard.report_view', uuid=report['report_id']) }}">{{ report['report_parameters']['name'] }}</a>
         </td>
         <td>
-            <div class="report-details-expander btn-sm btn-primary">Metadata</div>
+            <button class="report-details-expander btn btn-sm btn-primary">Metadata</button>
             {# start report details block #}
             <div class="report-metadata-popup" hidden>
             {{ meta_macro.report_metadata(report, all_metrics, metric_categories) }}

diff --git a/sfa_dash/templates/navitems.html b/sfa_dash/templates/navitems.html
@@ -24,6 +24,6 @@
   <a class="nav-link{% if active == "reports" %} active{% endif %}" href="{{ url_for('data_dashboard.reports') }}">Reports</a>
 </li>
 <li class="nav-item">
-  <a class="nav-link{% if active == "fxobs" %} active{% endif %}" href="{{ url_for('data_dashboard.observations') }}">Forecasts and Observations</a>
+  <a class="nav-link{% if active == "fxobs" %} active{% endif %}" href="{{ url_for('data_dashboard.observations') }}">Forecasts & Observations</a>
 </li>
 {% endif %}