diff --git a/src/assets/style.css b/src/assets/style.css index f6dee00..93412f8 100644 --- 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,19 +583,15 @@ 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; } } @@ -603,7 +599,7 @@ body{ 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 index 4c8e6ee..c32d8a0 100644 --- 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')