Style

sand-ci · Jan 6, 2024 · a3d1957 · a3d1957
1 parent b3a6546
commit a3d1957
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -197,7 +197,7 @@ body{
     border-color: #cbd4e7;
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1680px) {
     .sidebysite-cont {
         width: 100% !important;
     }
@@ -568,12 +568,12 @@ body{
     background-color: #ffffff;
 }
 
-@media (max-width: 1080.98px) {
+@media (max-width: 1380.98px) {
     .status-box {
         flex: 1 0 100%;
         /* Grow and shrink as needed, but don't allow multiple items on one line */
         margin-right: 0 2px;
-        /* Add a bit of space below each box on small screens */
+        margin-bottom: 1rem;
     }
 }
 
@@ -583,27 +583,23 @@ body{
     margin-bottom: 0;
 }
 
+@media (min-width: 2000px) {
+    .status-count-header {
+        flex: 0 0 33.33% !important;
+        max-width: 33.33% !important;
+    }
 
-.status-text {
-    display: flex;
-    flex-direction: column;
-    color: #373737;
-    /* Stack .status-text and .status-number vertically by default */
-}
-
-@media (min-width: 1092px) {
-    /* Large screens in Bootstrap are ≥992px */
-    .status-text {
-        flex-direction: row important!;
-        /* Place .status-text and .status-number side by side on large screens */
+    .status-count-numbers {
+        flex: 0 0 16.66% !important;
+        max-width: 16.66% !important;
     }
 }
 
 .how-status-table {
     border: 1px solid #dfdfdf;
 }
 
-@media (max-width: 1200.98px) {
+@media (max-width: 1500.98px) {
     .how-status-cont {
         flex: 1 0 100%;
         /* Grow and shrink as needed, but don't allow multiple items on one line */

diff --git a/src/pages/home.py b/src/pages/home.py
@@ -197,7 +197,8 @@ def total_number_of_alarms(sitesDf):
             , align="center", justify='center', className='h-100'),
         ], className='status-box boxwithshadow', md=3, xs=12)]
     # add the status count to the html
-    total_status = [dbc.Col(html.H1('Summary', className='h-100'), md=3, xs=12)]
+    total_status = [dbc.Col(html.H1('Summary', className='h-100'),
+                            md=12, className='status-count-header')]
     for s in status:
         total_status.append(
             dbc.Col(
@@ -210,10 +211,11 @@ def total_number_of_alarms(sitesDf):
                     ),
                     className='mb-3',
                 ),
-                md=2, xs=6
+                md=3, className='status-count-numbers'
             )
         )
 
+
     html_elements.append(dbc.Col([
         dbc.Row(children=total_status, justify="center", align="center", className='h-100')],
         className='status-box boxwithshadow col-md-auto', md=3, xs=12))
@@ -354,10 +356,10 @@ def layout(**other_unknown_query_strings):
                         dbc.Col(
                             [
                                 html.Div(children=statusTable, id='site-status', className='datatables-cont'),
-                            ], className='page-cont sidebysite-cont'
+                            ], className='page-cont sidebysite-cont', lg=6
                         ),
                         dbc.Col(dcc.Graph(figure=builMap(sitesDf), id='site-map',
-                                  className='cls-site-map mb-1 page-cont sidebysite-cont'), 
+                                  className='cls-site-map mb-1 page-cont sidebysite-cont'), lg=6
                         ),
                         dbc.Col(
                             html.Div(
@@ -381,7 +383,7 @@ def layout(**other_unknown_query_strings):
                 html.Div(id='page-content-noloading'),
                 html.Br(),
 
-            ], className='g-0', align="start", style={"padding": "0.5% 1.5%"})
+            ], className='g-0', align="start", style={"padding": "0 1.5%"})
             ], className='main-cont')