From 3cdc8377afcd945f4f7aff80c334432375b3164d Mon Sep 17 00:00:00 2001 From: minORC Date: Fri, 26 Jan 2024 13:42:09 -0800 Subject: [PATCH] DBC22-974: Improvements to filters and advisories on map (#260) --- src/frontend/src/Components/Filters.js | 404 +++++++++--------- src/frontend/src/Components/Filters.scss | 180 ++++---- .../advisories/AdvisoriesOnMap.scss | 7 +- 3 files changed, 299 insertions(+), 292 deletions(-) diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js index c12cb3c10..87338efa9 100644 --- a/src/frontend/src/Components/Filters.js +++ b/src/frontend/src/Components/Filters.js @@ -116,225 +116,223 @@ export default function Filters(props) { { open &&
- { !largeScreen && -
-

Filters

- -
- } +

Filters

+ + +
+
+

Delays

+
+
+
+ { + toggleHandler('closures', e.target.checked); + toggleHandler('closuresLines', e.target.checked, true); + setClosures(!closures) + }} + defaultChecked={mapContext.visible_layers.closures} + /> + + + ? + +
-
-

Delays

-
-
-
- { - toggleHandler('closures', e.target.checked); - toggleHandler('closuresLines', e.target.checked, true); - setClosures(!closures) - }} - defaultChecked={mapContext.visible_layers.closures} - /> - - - ? - -
+
+ { + toggleHandler('majorEvents', e.target.checked); + toggleHandler('majorEventsLines', e.target.checked, true); + setMajorEvents(!majorEvents) + }} + defaultChecked={mapContext.visible_layers.majorEvents} + /> + + + ? + +
-
- { - toggleHandler('majorEvents', e.target.checked); - toggleHandler('majorEventsLines', e.target.checked, true); - setMajorEvents(!majorEvents) - }} - defaultChecked={mapContext.visible_layers.majorEvents} - /> - - - ? - -
+
+ { + toggleHandler('minorEvents', e.target.checked); + toggleHandler('minorEventsLines', e.target.checked, true); + setMinorEvents(!minorEvents); + }} + defaultChecked={mapContext.visible_layers.minorEvents} + /> + + + ? + +
-
- { - toggleHandler('minorEvents', e.target.checked); - toggleHandler('minorEventsLines', e.target.checked, true); - setMinorEvents(!minorEvents); - }} - defaultChecked={mapContext.visible_layers.minorEvents} - /> - - - ? - -
- -
- { - toggleHandler('futureEvents', e.target.checked); - toggleHandler('futureEventsLines', e.target.checked, true); - setFutureEvents(!futureEvents); - }} - defaultChecked={mapContext.visible_layers.futureEvents} - /> - - - ? - +
+ { + toggleHandler('futureEvents', e.target.checked); + toggleHandler('futureEventsLines', e.target.checked, true); + setFutureEvents(!futureEvents); + }} + defaultChecked={mapContext.visible_layers.futureEvents} + /> + + + ? + +
-
+
+

Conditions and features

+
+
+
+ {toggleHandler('highwayCams', e.target.checked); setHighwayCams(!highwayCams)}} + defaultChecked={mapContext.visible_layers.highwayCams} + disabled={disableFeatures} + /> + + + ? + +
-
-

Conditions and features

-
-
-
- {toggleHandler('highwayCams', e.target.checked); setHighwayCams(!highwayCams)}} - defaultChecked={mapContext.visible_layers.highwayCams} - disabled={disableFeatures} - /> - - - ? - -
+
+ { + toggleHandler('roadConditions', e.target.checked); + toggleHandler('roadConditionsLines', e.target.checked); + setRoadConditions(!roadConditions); + }} + defaultChecked={mapContext.visible_layers.roadConditions} + disabled={disableFeatures} + /> + + + ? + +
+ +
+ {toggleHandler('inlandFerries', e.target.checked); setInlandFerries(!inlandFerries)}} + defaultChecked={mapContext.visible_layers.inlandFerries} + disabled={disableFeatures} + /> + + + ? + +
-
- { - toggleHandler('roadConditions', e.target.checked); - toggleHandler('roadConditionsLines', e.target.checked); - setRoadConditions(!roadConditions); - }} - defaultChecked={mapContext.visible_layers.roadConditions} - disabled={disableFeatures} - /> -
-
- {toggleHandler('inlandFerries', e.target.checked); setInlandFerries(!inlandFerries)}} - defaultChecked={mapContext.visible_layers.inlandFerries} - disabled={disableFeatures} - /> -
- -
- - - - - - - ? - -
- */}
+
} diff --git a/src/frontend/src/Components/Filters.scss b/src/frontend/src/Components/Filters.scss index 069fe621a..5fad4d86f 100644 --- a/src/frontend/src/Components/Filters.scss +++ b/src/frontend/src/Components/Filters.scss @@ -35,13 +35,13 @@ button.btn.open-filters { top: 4.4375rem; bottom: initial; left: initial; - right: 2rem; + right: 1rem; width: 300px; height: auto; } .filters-title { - margin-bottom: 24px; + margin-bottom: 8px; } button.close-filters { @@ -57,122 +57,126 @@ button.btn.open-filters { font-size: 1.4rem; } - .filter-group { - &__title { - - font-weight: 700; - padding-bottom: 8px; - border-bottom: 1px solid $Divider; - } - - & + .filter-group { - margin-top: 24px; - } + .filters-list { + padding-top: 16px; - .filter-item { - display: flex; - align-items: center; + .filter-group { + &__title { - & + .filter-item { - margin-top: 8px; + font-weight: 700; + padding-bottom: 8px; + border-bottom: 1px solid $Divider; } - - &--closures { - svg { - font-size: 1.25rem; - } + + & + .filter-group { + margin-top: 24px; } - label { + .filter-item { display: flex; align-items: center; - &:hover { - cursor: pointer; - text-decoration: underline; + & + .filter-item { + margin-top: 8px; } - } - - &.checked { - .filter-item__icon { - background-color: $Type-Link; - border-color: $Type-Link; - + + &--closures { svg { - color: $White; + font-size: 1.25rem; } + } - .customIcon-bg { - fill: white; - } + label { + display: flex; + align-items: center; - .customIcon-fg { - fill: $Type-Link; + &:hover { + cursor: pointer; + text-decoration: underline; } - } - } - &.disabled { - .filter-item__icon { - background-color: $Divider; - border-color: $Divider; + &.checked { + .filter-item__icon { + background-color: $Type-Link; + border-color: $Type-Link; - svg { - color: $Type-Disabled; - } + svg { + color: $White; + } - .customIcon-bg { - fill: $Type-Disabled; - } + .customIcon-bg { + fill: white; + } + + .customIcon-fg { + fill: $Type-Link; + } - .customIcon-fg { - fill: $Divider; } } - label { - color: $Type-Disabled; - &:hover { - cursor: auto; - text-decoration: none; + &.disabled { + .filter-item__icon { + background-color: $Divider; + border-color: $Divider; + + svg { + color: $Type-Disabled; + } + + .customIcon-bg { + fill: $Type-Disabled; + } + + .customIcon-fg { + fill: $Divider; + } + } + label { + color: $Type-Disabled; + + &:hover { + cursor: auto; + text-decoration: none; + } } } - } - &__icon { - margin-right: 8px; - height: 36px; - width: 36px; - border-radius: 18px; - border: 1px solid; - background-color: $White; - border-color: $Type-Link; - display: flex; - justify-content: center; - align-items: center; + &__icon { + margin-right: 8px; + height: 36px; + width: 36px; + border-radius: 18px; + border: 1px solid; + background-color: $White; + border-color: $Type-Link; + display: flex; + justify-content: center; + align-items: center; - svg { - color: $Type-Link; + svg { + color: $Type-Link; + } } - } - input { - position: absolute; - z-index: -1; - margin-left: 10px; - } + input { + position: absolute; + z-index: -1; + margin-left: 10px; + } - .tooltip-info { - margin-left: 8px; - color: $White; - background-color: $Type-Secondary; - padding: 0 6px; - border-radius: 18px; - font-size: 0.75rem; + .tooltip-info { + margin-left: 8px; + color: $White; + background-color: $Type-Secondary; + padding: 0 6px; + border-radius: 18px; + font-size: 0.75rem; - &:hover { - cursor: pointer; + &:hover { + cursor: pointer; + } } } } diff --git a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss index 6ee3baa65..95fd3e5b9 100644 --- a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss +++ b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss @@ -4,6 +4,7 @@ position: relative; top: 1rem; left: 1rem; + width: fit-content; .btn.advisories-on-map__btn { background: #FAF9F8; @@ -57,7 +58,7 @@ left: 0; z-index: 20; - @media (min-width: 575px) { + @media (min-width: 768px) { width: 360px; position: relative; } @@ -91,6 +92,10 @@ border-top: 1px solid $Divider; } + &:hover { + text-decoration: underline; + } + .advisory-li-title { color: #584215; font-size: 0.875rem;