diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html index 05e989657..d97e10c0d 100644 --- a/src/frontend/public/index.html +++ b/src/frontend/public/index.html @@ -23,8 +23,10 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + DriveBC +
diff --git a/src/frontend/src/App.scss b/src/frontend/src/App.scss index c6c325ce8..db44dd20e 100644 --- a/src/frontend/src/App.scss +++ b/src/frontend/src/App.scss @@ -145,3 +145,21 @@ body { .grecaptcha-badge { visibility: hidden !important; } + +// Icon for links opening in new tabs +a[target="_blank"] { + position: relative; + margin-right: 18px; + + &:after { + position: absolute; + top: 2px; + right: -18px; + font: var(--fa-font-regular); + content: '\f08e'; + display: inline-block; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + color: $Type-Secondary; + } +} \ No newline at end of file diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss index 88eb9cf45..b4206e904 100644 --- a/src/frontend/src/Components/Map.scss +++ b/src/frontend/src/Components/Map.scss @@ -99,7 +99,7 @@ right: 1rem; padding: 0; min-width: 0; - line-height: 8.25rem; + line-height: 1.25rem; height: auto; background: none; border: none; diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js index 1597c7ab2..8733e3a01 100644 --- a/src/frontend/src/Components/map/mapPopup.js +++ b/src/frontend/src/Components/map/mapPopup.js @@ -14,7 +14,7 @@ import { faSnowflake, faWind, faEye, - faArrowUpRightFromSquare + faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'; import { faSunCloud @@ -150,120 +150,6 @@ export function getFerryPopup(ferryFeature) { - - // Road weather conditions html structure - //
- //
- //
- // - //
- //

Local Weather

- // Weather Stations - //
- //
- //
- //

Trout Creek

- // - //

Southside of Highway 15, 22km northwest of Smithers.

- //
- //
- //
- //

Packed snow of 5cm

- //

Road Condition

- //
- //
- //
- //

17℃

- //

Air

- //
- //
- //

22℃

- //

Road

- //
- //
- //
- //
- //
- // - //
- //

Elevation

- //

410m

- //
- //
- //
- // - //
- //

Precipitation (last 12 hours)

- //

240mm

- //
- //
- //
- // - //
- //

Snow (last 12 hours)

- //

240cm

- //
- //
- //
- // - //
- //
- //
- //

Average wind

- //

SE 15 km/h

- //
- //
- //

Maximum wind

- //

20 km/h

- //
- //
- //
- - //
- //
- //
- //
- - // Regional weather html structure - //
- //
- //
- // - //
- //

Regional Weather

- //
- //
- //
- //

Cummins Lakes Park

- // - //
- //
- // - //

Partly cloudy

- //

24℃

- //
- //
- //
- // - //
- //

Visibility

- //

42km

- //
- //
- //
- // - //
- //

Wind

- //

SW 27 gusts 44 km/h

- //
- //
- //
- //
- //
- //

Past 24 hours

- //

Courtesy of Environment Canada

- //
- //
); } export function getWeatherPopup(weatherFeature) { @@ -285,10 +171,13 @@ export function getWeatherPopup(weatherFeature) {

{weatherData.location_description}

-
-

{weatherData.road_condition}

-

Road Condition

-
+ { weatherData.road_condition && ( +
+

{weatherData.road_condition}

+

Road Condition

+
+ )} + {(weatherData.air_temperature || weatherData.road_temperature) && (
{weatherData.air_temperature && ( @@ -359,5 +248,51 @@ export function getWeatherPopup(weatherFeature) {
+ + // Regional weather html structure + //
+ //
+ //
+ // + //
+ //

Regional Weather

+ //
+ //
+ // + //

Arctic outflow warning

+ //

Details

+ //
+ //
+ //
+ //

Cummins Lakes Park

+ // + //
+ //
+ // + //

Partly cloudy

+ //

24℃

+ //
+ //
+ //
+ // + //
+ //

Visibility

+ //

42km

+ //
+ //
+ //
+ // + //
+ //

Wind

+ //

SW 27 gusts 44 km/h

+ //
+ //
+ //
+ //
+ //
+ //

Past 24 hours

+ //

Courtesy of Environment Canada

+ //
+ //
); } diff --git a/src/frontend/src/Components/map/mapPopup.scss b/src/frontend/src/Components/map/mapPopup.scss index a595acc27..a65dcf9a8 100644 --- a/src/frontend/src/Components/map/mapPopup.scss +++ b/src/frontend/src/Components/map/mapPopup.scss @@ -317,6 +317,12 @@ .data { font-size: 1.25rem; font-weight: 700; + text-transform: lowercase; + + &:first-letter { + text-transform: capitalize; + } + } } .temperatures { @@ -354,6 +360,32 @@ } } + .popup__advisory { + display: flex; + align-items: center; + background-color: #FDD47B; + color: #584215; + padding: 0.75rem 1rem; + + svg { + margin-right: 4px; + } + + p { + margin: 0; + } + + .advisory-title { + font-size: 0.875rem; + font-weight: 700; + color: #584215; + } + + .link { + margin-left: auto; + } + } + .popup__content { p { margin-bottom: 0; @@ -399,11 +431,6 @@ p { text-align: center; color: $Type-Secondary; - a { - svg { - color: $Type-Secondary; - } - } } } } diff --git a/src/frontend/src/Footer.js b/src/frontend/src/Footer.js index 8a2cc745e..340c95f75 100644 --- a/src/frontend/src/Footer.js +++ b/src/frontend/src/Footer.js @@ -3,9 +3,6 @@ import './Footer.scss'; import Container from 'react-bootstrap/Container'; import logo from './images/dbc-logo.svg'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import { - faArrowUpRightFromSquare, -} from '@fortawesome/free-solid-svg-icons'; import { faXTwitter, faInstagram, @@ -36,16 +33,13 @@ export default function Footer(props) { Website Feedback
  • - Disclaimer - + Disclaimer
  • - Privacy - + Privacy
  • - Accessibility - + Accessibility