Merge pull request #371 from Qblack/feature/tighter-ui

Feature/tighter UI
flask-dashboard · Feb 10, 2021 · bea4de5 · bea4de5
2 parents a3ef6bf + 9556400
commit bea4de5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/flask_monitoringdashboard/frontend/sass/custom.css b/flask_monitoringdashboard/frontend/sass/custom.css
@@ -507,4 +507,10 @@ footer.sticky-footer {
     color: red;
     vertical-align: super;
     font-size: small;
+}
+
+@media (min-width: 1644px) {
+    .container {
+        max-width: 1600px !important;
+    }
 }
diff --git a/flask_monitoringdashboard/static/elements/monitorLevel.html b/flask_monitoringdashboard/static/elements/monitorLevel.html
@@ -1,4 +1,4 @@
-<ul class="pagination">
+<ul class="pagination mb-0 ml-2">
     <li ng-repeat="n in [0, 1, 2, 3]" class="page-item">
         <a class="page-link" ng-click="sendForm(n)"
            ng-style="{'background-color': computeColor(n),

diff --git a/flask_monitoringdashboard/static/pages/overview.html b/flask_monitoringdashboard/static/pages/overview.html
@@ -65,7 +65,7 @@
 
             <div class="row">
                 <div class="col-md-12">
-                    <table class="table table-hover table-bordered">
+                    <table class="table table-hover table-bordered table-sm">
                         <thead>
                         <tr>
                             <th></th>
@@ -87,23 +87,15 @@
                             ng-click="go('/endpoint/' + row.id + '/hourly_load')">
 
                             <td style="background-color: {{ row.color }}"></td>
-                            <td style="max-width: 200px;">{{ row.name }}</td>
-
-
-                            <td class="table_cell_with_error_count"
+                            <td class="align-middle">{{ row.name }}</td>
+                            <td class="table_cell_with_error_count align-middle"
                                 ng-show="isHits"
                                 style="text-align: right;"
                                 ng-attr-error-count="
-
-
-
-
                                         {{ (row['hits-today-errors'] > 0) ? row['hits-today-errors'] : ''}}">
                                 {{ row['hits-today'] | number }}
                             </td>
-
-
-                            <td class="table_cell_with_error_count"
+                            <td class="table_cell_with_error_count align-middle"
                                 ng-show="isHits" style="text-align: right;"
                                 ng-attr-error-count="
 
@@ -114,17 +106,17 @@
                                 {{ row['hits-week'] | number }}
                             </td>
 
-                            <td ng-show="isHits" style="text-align: right;">
+                            <td ng-show="isHits" style="text-align: right;" class="align-middle">
                                 {{ row['hits-overall'] | number }}
                             </td>
 
-                            <td ng-show="isHits==false"
+                            <td ng-show="isHits==false" class="align-middle"
                                 style="text-align: right;">{{ row['median-today'] | duration_ms }}</td>
-                            <td ng-show="isHits==false"
+                            <td ng-show="isHits==false" class="align-middle"
                                 style="text-align: right;">{{ row['median-week'] | duration_ms }}</td>
-                            <td ng-show="isHits==false"
+                            <td ng-show="isHits==false" class="align-middle"
                                 style="text-align: right;">{{ row['median-overall'] | duration_ms }}</td>
-                            <td style="text-align: center;">{{ row['last-accessed'] | dateDifference }}</td>
+                            <td style="text-align: center;" class="align-middle">{{ row['last-accessed'] | dateDifference }}</td>
                             <td ng-click="$event.stopPropagation()">
                                 <monitorlevel name="row.name"
                                               value="row.monitor"></monitorlevel>