Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DBC22-1876: Updated sidepanel styling for local and regional weather #332

Merged
merged 1 commit into from
Mar 20, 2024
Merged

DBC22-1876: Updated sidepanel styling for local and regional weather #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/frontend/public/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading