Skip to content

Commit

Permalink
DBC22-1876: Updated sidepanel styling for local and regional weather
Browse files Browse the repository at this point in the history
  • Loading branch information
@minORC
minORC committed Mar 19, 2024
1 parent e3c5cbb commit fa10ad0
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 134 deletions.
2 changes: 2 additions & 0 deletions src/frontend/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
-->
<script src="https://kit.fontawesome.com/f015f2c1fc.js" crossorigin="anonymous"></script>
<title>DriveBC</title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
Expand Down
18 changes: 18 additions & 0 deletions src/frontend/src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
2 changes: 1 addition & 1 deletion src/frontend/src/Components/Map.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
173 changes: 54 additions & 119 deletions src/frontend/src/Components/map/mapPopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
faSnowflake,
faWind,
faEye,
faArrowUpRightFromSquare
faTriangleExclamation
} from '@fortawesome/free-solid-svg-icons';
import {
faSunCloud
Expand Down Expand Up @@ -150,120 +150,6 @@ export function getFerryPopup(ferryFeature) {
</div>
</div>
</div>

// Road weather conditions html structure
// <div className="popup popup--road-weather">
// <div className="popup__title">
// <div className="popup__title__icon">
// <FontAwesomeIcon icon={faTemperatureHalf} />
// </div>
// <p className="name">Local Weather</p>
// <span className="sub-name">Weather Stations</span>
// </div>
// <div className="popup__content">
// <div className="popup__content__title">
// <p className="name">Trout Creek</p>
// <FriendlyTime date='2024-03-01T00:00:00-08:00' />
// <p className="description">Southside of Highway 15, 22km northwest of Smithers.</p>
// </div>
// <div className="popup__content__description">
// <div className="road-condition">
// <p className="data">Packed snow of 5cm</p>
// <p className="label">Road Condition</p>
// </div>
// <div className="temperatures">
// <div className="temperature temperature--air">
// <p className="data">17&#x2103;</p>
// <p className="label">Air</p>
// </div>
// <div className="temperature temperature--road">
// <p className="data">22&#x2103;</p>
// <p className="label">Road</p>
// </div>
// </div>
// <div className="data-card">
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faMountain} />
// </div>
// <p className="label">Elevation</p>
// <p className="data">410m</p>
// </div>
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faDroplet} />
// </div>
// <p className="label">Precipitation (last 12 hours)</p>
// <p className="data">240mm</p>
// </div>
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faSnowflake} />
// </div>
// <p className="label">Snow (last 12 hours)</p>
// <p className="data">240cm</p>
// </div>
// <div className="data-card__row data-card__row group">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faWind} />
// </div>
// <div className="data-group">
// <div className="data-group__row">
// <p className="label">Average wind</p>
// <p className="data">SE 15 km/h</p>
// </div>
// <div className="data-group__row">
// <p className="label">Maximum wind</p>
// <p className="data">20 km/h</p>
// </div>
// </div>
// </div>

// </div>
// </div>
// </div>
// </div>

// Regional weather html structure
// <div className="popup popup--regional-weather">
// <div className="popup__title">
// <div className="popup__title__icon">
// <FontAwesomeIcon icon={faSunCloud} />
// </div>
// <p className="name">Regional Weather</p>
// </div>
// <div className="popup__content">
// <div className="popup__content__title">
// <p className="name">Cummins Lakes Park</p>
// <FriendlyTime date='2024-03-01T00:00:00-08:00' />
// </div>
// <div className="popup__content__description">
// <FontAwesomeIcon className="weather-icon" icon={faSunCloud} />
// <p className="weather">Partly cloudy</p>
// <p className="temperature">24&#x2103;</p>
// <div className="data-card">
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faEye} />
// </div>
// <p className="label">Visibility</p>
// <p className="data">42km</p>
// </div>
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faWind} />
// </div>
// <p className="label">Wind</p>
// <p className="data">SW 27 gusts 44 km/h</p>
// </div>
// </div>
// </div>
// </div>
// <div className="popup__additional">
// <p className="label"><a alt="Past 24 Hours" target="_self" href="https://weather.gc.ca/past_conditions/index_e.html?station=yyj">Past 24 hours <FontAwesomeIcon icon={faArrowUpRightFromSquare} /></a></p>
// <p className="label">Courtesy of <a alt="Environment Canada" target="_self" href="https://weather.gc.ca/canada_e.html">Environment Canada <FontAwesomeIcon icon={faArrowUpRightFromSquare} /></a></p>
// </div>
// </div>
);
}
export function getWeatherPopup(weatherFeature) {
Expand All @@ -285,10 +171,13 @@ export function getWeatherPopup(weatherFeature) {
<p className="description">{weatherData.location_description}</p>
</div>
<div className="popup__content__description">
<div className="road-condition">
<p className="data">{weatherData.road_condition}</p>
<p className="label">Road Condition</p>
</div>
{ weatherData.road_condition && (
<div className="road-condition">
<p className="data">{weatherData.road_condition}</p>
<p className="label">Road Condition</p>
</div>
)}

{(weatherData.air_temperature || weatherData.road_temperature) && (
<div className="temperatures">
{weatherData.air_temperature && (
Expand Down Expand Up @@ -359,5 +248,51 @@ export function getWeatherPopup(weatherFeature) {
</div>
</div>
</div>

// Regional weather html structure
// <div className="popup popup--regional-weather">
// <div className="popup__title">
// <div className="popup__title__icon">
// <FontAwesomeIcon icon={faSunCloud} />
// </div>
// <p className="name">Regional Weather</p>
// </div>
// <div className="popup__advisory">
// <FontAwesomeIcon icon={faTriangleExclamation} />
// <p className="advisory-title">Arctic outflow warning</p>
// <p className="label link"><a alt="Past 24 Hours" target="_blank" rel="noreferrer" href="https://weather.gc.ca/past_conditions/index_e.html?station=yyj">Details</a></p>
// </div>
// <div className="popup__content">
// <div className="popup__content__title">
// <p className="name">Cummins Lakes Park</p>
// <FriendlyTime date='2024-03-01T00:00:00-08:00' />
// </div>
// <div className="popup__content__description">
// <FontAwesomeIcon className="weather-icon" icon={faSunCloud} />
// <p className="weather">Partly cloudy</p>
// <p className="temperature">24&#x2103;</p>
// <div className="data-card">
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faEye} />
// </div>
// <p className="label">Visibility</p>
// <p className="data">42km</p>
// </div>
// <div className="data-card__row">
// <div className="data-icon">
// <FontAwesomeIcon className="icon" icon={faWind} />
// </div>
// <p className="label">Wind</p>
// <p className="data">SW 27 gusts 44 km/h</p>
// </div>
// </div>
// </div>
// </div>
// <div className="popup__additional">
// <p className="label"><a alt="Past 24 Hours" target="_blank" rel="noreferrer" href="https://weather.gc.ca/past_conditions/index_e.html?station=yyj">Past 24 hours</a></p>
// <p className="label">Courtesy of <a alt="Environment Canada" target="_blank" rel="noreferrer" href="https://weather.gc.ca/canada_e.html">Environment Canada</a></p>
// </div>
// </div>
);
}
37 changes: 32 additions & 5 deletions src/frontend/src/Components/map/mapPopup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,12 @@
.data {
font-size: 1.25rem;
font-weight: 700;
text-transform: lowercase;

&:first-letter {
text-transform: capitalize;
}

}
}
.temperatures {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -399,11 +431,6 @@
p {
text-align: center;
color: $Type-Secondary;
a {
svg {
color: $Type-Secondary;
}
}
}
}
}
Expand Down
12 changes: 3 additions & 9 deletions src/frontend/src/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -36,16 +33,13 @@ export default function Footer(props) {
<a href="/feedback" className="footer-link" target="_self" alt="Website Feedback" >Website Feedback</a>
</li>
<li>
<a href="https://www2.gov.bc.ca/gov/content/home/disclaimer" className="footer-link" target="_self" alt="Disclaimer" >Disclaimer
<FontAwesomeIcon icon={faArrowUpRightFromSquare} /></a>
<a href="https://www2.gov.bc.ca/gov/content/home/disclaimer" className="footer-link" target="_blank" rel="noreferrer" alt="Disclaimer" >Disclaimer</a>
</li>
<li>
<a href="https://www2.gov.bc.ca/gov/content/home/privacy" className="footer-link" target="_self" alt="Privacy" >Privacy
<FontAwesomeIcon icon={faArrowUpRightFromSquare} /></a>
<a href="https://www2.gov.bc.ca/gov/content/home/privacy" className="footer-link" target="_blank" rel="noreferrer" alt="Privacy" >Privacy</a>
</li>
<li>
<a href="https://www2.gov.bc.ca/gov/content/governments/about-the-bc-government/accessibility" className="footer-link" target="_self" alt="Acccessibility" >Accessibility
<FontAwesomeIcon icon={faArrowUpRightFromSquare}/></a>
<a href="https://www2.gov.bc.ca/gov/content/governments/about-the-bc-government/accessibility" className="footer-link" target="_blank" rel="noreferrer" alt="Acccessibility" >Accessibility</a>
</li>
</ul>
</div>
Expand Down

0 comments on commit fa10ad0

Please sign in to comment.