diff --git a/src/frontend/src/App.scss b/src/frontend/src/App.scss index ec39ed437..b18dc571e 100644 --- a/src/frontend/src/App.scss +++ b/src/frontend/src/App.scss @@ -153,11 +153,9 @@ a[target="_blank"] { &:not(.social-icon):after { position: absolute; - top: 0; - right: -18px; - //content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' alt='external link'%3E%3Cpath fill='%23474543' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'%3E%3C/path%3E%3C/svg%3E"); + margin-top: 1px; + margin-left: 4px; content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' alt='external link'%3E%3Cpath fill='%23474543' d='M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16H457.4L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6V176c0 8.8 7.2 16 16 16s16-7.2 16-16V16c0-8.8-7.2-16-16-16H336zM64 32C28.7 32 0 60.7 0 96V448c0 35.3 28.7 64 64 64H416c35.3 0 64-28.7 64-64V304c0-8.8-7.2-16-16-16s-16 7.2-16 16V448c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H64z'/%3E%3C/svg%3E"); - display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js index 1cf2442f0..5890e85d1 100644 --- a/src/frontend/src/Components/Filters.js +++ b/src/frontend/src/Components/Filters.js @@ -112,7 +112,7 @@ export default function Filters(props) { onClick={() => { open ? setOpen(false) : setOpen(true) } }> - {textOverride ? textOverride : 'Layer Filters'} + {textOverride ? textOverride : 'Layer filters'} diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js index ccce89320..c4b42e90c 100644 --- a/src/frontend/src/Components/Map.js +++ b/src/frontend/src/Components/Map.js @@ -31,6 +31,7 @@ import { faLocationCrosshairs, faXmark, } from '@fortawesome/pro-solid-svg-icons'; +import {useMediaQuery} from '@uidotdev/usehooks'; // Components and functions import CamPopup from './map/camPopup.js'; @@ -72,6 +73,7 @@ import AdvisoriesOnMap from './advisories/AdvisoriesOnMap'; import CurrentCameraIcon from './CurrentCameraIcon'; import Filters from './Filters.js'; import RouteSearch from './map/RouteSearch.js'; +import ExitSurvey from './advisories/ExitSurvey.js'; // Map & geospatial imports import { applyStyle } from 'ol-mapbox-style'; @@ -1251,6 +1253,8 @@ export default function MapWrapper({ clickedRestStop ); + const smallScreen = useMediaQuery('only screen and (max-width: 767px)'); + return (
+
+ {smallScreen && ( + + )}
)} + {(!isPreview && !smallScreen) && ( + + )} + {!isPreview && ( )} +
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss index 9c9cb9750..58ab2d702 100644 --- a/src/frontend/src/Components/Map.scss +++ b/src/frontend/src/Components/Map.scss @@ -162,7 +162,7 @@ height: 100%; overflow: hidden; - .routing-outer-container { + .map-left-container, .routing-outer-container { position: absolute; z-index: 16; width: 100%; @@ -242,7 +242,7 @@ margin-right: 8px; } } - &.map-view, &.my-location, &.open-filters { + &.map-view, &.my-location { svg { margin-right: 8px; } @@ -272,7 +272,7 @@ right: 1rem; z-index: 5; - @media (max-width: 768px) { + @media (max-width: 767px) { top: initial; bottom: 1rem; } diff --git a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss index b6c7ac810..db522703d 100644 --- a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss +++ b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss @@ -3,8 +3,11 @@ .advisories-on-map { position: relative; top: 6rem; - left: 1rem; - width: fit-content; + padding: 0 1rem; + + @media (min-width: 768px) { + width: fit-content; + } .btn.advisories-on-map__btn { background: #FAF9F8; @@ -53,14 +56,10 @@ border-radius: 4px; box-shadow: 0px 1.937px 4.358px 0px rgba(0, 0, 0, 0.13), 0px 0.363px 1.089px 0px rgba(0, 0, 0, 0.10); padding: 1rem; - position: fixed; - bottom: 0; - left: 0; - z-index: 20; + position: relative; @media (min-width: 768px) { width: 360px; - position: relative; } h4 { diff --git a/src/frontend/src/Components/advisories/ExitSurvey.js b/src/frontend/src/Components/advisories/ExitSurvey.js new file mode 100644 index 000000000..4b7092877 --- /dev/null +++ b/src/frontend/src/Components/advisories/ExitSurvey.js @@ -0,0 +1,50 @@ +// React +import React, { useState } from 'react'; + +// Third party packages +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import { + faComment, + faXmark +} from '@fortawesome/pro-solid-svg-icons'; +import Button from 'react-bootstrap/Button'; + +// Styling +import './ExitSurvey.scss'; + +export default function ExitSurvey({ mobile=false }) { + + // States + const [show, setShow] = useState(true); + + // Rendering + return (show && (sessionStorage.getItem('exit-survey') === null)) ? ( +
+ + +
+
+
+ +
+
+
+

Thank you for checking out the new DriveBC beta!

+

We'd love to hear your feedback on your experience using the new site. Please take a few minutes to + + complete our anonymous survey + +

+
+
+
+ ) : null; +} diff --git a/src/frontend/src/Components/advisories/ExitSurvey.scss b/src/frontend/src/Components/advisories/ExitSurvey.scss new file mode 100644 index 000000000..94ad72b4c --- /dev/null +++ b/src/frontend/src/Components/advisories/ExitSurvey.scss @@ -0,0 +1,77 @@ +@import "../../styles/variables.scss"; + +.exit-survey { + position: absolute; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); + width: 365px; + background-color: #F1F8FE; + padding: 0.75rem; + border: 1px solid #053662; + border-radius: 4px; + box-shadow: 0px 1.937px 4.358px 0px rgba(0, 0, 0, 0.13), 0px 0.363px 1.089px 0px rgba(0, 0, 0, 0.10); + z-index: 22; + + &.mobile { + position: relative; + bottom: inherit; + left: inherit; + transform: none; + width: 100%; + border: none; + + .content__text { + margin: 0 0 0 1rem; + } + } + + .exit-survey-close-btn { + position: absolute; + top: 0.75rem; + right: 0.75rem; + padding: 0; + margin-bottom: 0; + font-size: 0.75rem; + width: 20px; + height: 20px; + border-radius: 10px; + } + + .content { + display: flex; + + &__icon { + display: flex; + align-items: center; + + .square-icon { + width: 48px; + height: 48px; + background-color: $BC-Blue; + color: #D8EAFD; + border-radius: 8px; + font-size: 28px; + display: flex; + align-items: center; + justify-content: center; + } + } + + &__text { + margin: 0 2rem 0 1rem; + + p { + font-size: 0.875rem; + + &:first-of-type { + margin-bottom: 0; + } + + &.feedback { + color: #053662; + } + } + } + } +} diff --git a/src/frontend/src/pages/CamerasListPage.scss b/src/frontend/src/pages/CamerasListPage.scss index 135c25cc6..fc0f7290e 100644 --- a/src/frontend/src/pages/CamerasListPage.scss +++ b/src/frontend/src/pages/CamerasListPage.scss @@ -9,7 +9,7 @@ justify-content: space-between; margin-bottom: 1.5rem; - @media (max-width: 768px) { + @media (max-width: 767px) { flex-direction: column; } @@ -17,7 +17,7 @@ display: flex; align-items: center; - @media (max-width: 768px) { + @media (max-width: 767px) { width: 100%; } @@ -25,7 +25,7 @@ position:relative; padding: 0; - @media (max-width: 768px) { + @media (max-width: 767px) { width: 100%; } .swap-button{ @@ -39,7 +39,7 @@ .search-container { min-width: 360px; - @media (max-width: 768px) { + @media (max-width: 767px) { min-width: 100%; width: 100%; margin-top: 1rem; diff --git a/src/frontend/src/pages/EventsListPage.js b/src/frontend/src/pages/EventsListPage.js index 18c331240..c4582be6f 100644 --- a/src/frontend/src/pages/EventsListPage.js +++ b/src/frontend/src/pages/EventsListPage.js @@ -301,7 +301,7 @@ export default function EventsListPage() { toggleHandler={eventCategoryFilterHandler} disableFeatures={true} enableRoadConditions={false} - textOverride={'List Filters'} + textOverride={'List filters'} />
diff --git a/src/frontend/src/pages/EventsListPage.scss b/src/frontend/src/pages/EventsListPage.scss index 8a495ca9a..7691bccbb 100644 --- a/src/frontend/src/pages/EventsListPage.scss +++ b/src/frontend/src/pages/EventsListPage.scss @@ -10,7 +10,7 @@ justify-content: space-between; margin-bottom: 1.5rem; - @media (max-width: 768px) { + @media (max-width: 767px) { flex-direction: column; margin-bottom: 1rem; } @@ -18,7 +18,7 @@ .route-display-container { display: flex; - @media (max-width: 768px) { + @media (max-width: 767px) { width: 100%; margin-bottom: 20px; } @@ -27,7 +27,7 @@ padding: 0; position:relative; - @media (max-width: 768px) { + @media (max-width: 767px) { width: 100%; } .swap-button{ @@ -41,7 +41,7 @@ .right-container { display: flex; - @media (max-width: 768px) { + @media (max-width: 767px) { margin-bottom: 1rem; justify-content: space-between; } diff --git a/src/frontend/src/styles/typography.scss b/src/frontend/src/styles/typography.scss index ebeb51dd3..a034a1110 100644 --- a/src/frontend/src/styles/typography.scss +++ b/src/frontend/src/styles/typography.scss @@ -99,6 +99,10 @@ ul { color: $Error; } +.blue-text { + color: $BC-Blue; +} + .lowercase { text-transform: lowercase; } \ No newline at end of file