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-1486: Added styling and html structure for regional weather sidepanel #315

Merged
merged 2 commits into from
Mar 5, 2024
Merged

DBC22-1486: Added styling and html structure for regional weather sidepanel #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
454bcd3
DBC22-1732: Added styling and html structure for road weather sidepanel
minORC Mar 1, 2024
781c633
DBC22-1486: Added styling and html structure for regional weather sid…
minORC Mar 2, 2024
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
129 changes: 127 additions & 2 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 @@ -6,7 +6,19 @@ import EventTypeIcon from '../EventTypeIcon';
import FriendlyTime from '../FriendlyTime';
import parse from 'html-react-parser';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFerry } from '@fortawesome/free-solid-svg-icons';
import {
faFerry,
faTemperatureHalf,
faMountain,
faDroplet,
faSnowflake,
faWind,
faEye,
faArrowUpRightFromSquare
} from '@fortawesome/free-solid-svg-icons';
import {
faSunCloud
} from '@fortawesome/pro-solid-svg-icons';

import './mapPopup.scss';

Expand Down Expand Up @@ -56,7 +68,6 @@ export function getEventPopup(eventFeature) {
<div className="popup__title__icon">
<EventTypeIcon event={eventData} state='active' />
</div>
{console.log(eventData)}
<p className="name">{convertCategory(eventData)}</p>
</div>
<div className="popup__content">
Expand Down Expand Up @@ -100,5 +111,119 @@ 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>
);
}
201 changes: 201 additions & 0 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 @@ -227,5 +227,206 @@
}
}
}

//Road Weather layer
&--road-weather {
.popup__title {
background-color: #ECEAE8;
border-top: 4px solid $Type-Primary;

.name {
color: $Type-Primary;
}

.sub-name {
font-size: 0.875rem;
color: $Grey70;
}

&__icon {
background-color: $Type-Primary;
color: white;
}
}

.popup__content {
text-align: center;
p {
margin-bottom: 0;
}
&__title {
margin: 1rem 1rem 0;
padding-bottom: 1rem;
border-bottom: 1px solid $Divider;

.name {
color: $Type-Primary;
font-size: 2.25rem;
}

.friendly-time {
margin: 0 auto 1rem;
&-text {
color: $Type-Secondary;
font-size: 0.875rem;
}
}

.description {
margin-top: 1rem;
font-size: 0.875rem;
}
}
&__description {
& > div {
padding-bottom: 1rem;
}
.road-condition {
.data {
font-size: 1.25rem;
font-weight: 700;
}
}
.temperatures {
display: flex;
justify-content: space-around;

.temperature {
.data {
font-size: 2.25rem;
font-weight: 700;
}
}
}
}
}
}

//Regional Weather layer
&--regional-weather {
display: flex;
flex-direction: column;
height: 100%;

.popup__title {
background-color: #ECEAE8;
border-top: 4px solid $Type-Primary;

.name {
color: $Type-Primary;
}

&__icon {
background-color: $Type-Primary;
color: white;
}
}

.popup__content {
p {
margin-bottom: 0;
}
&__title {
.name {
color: $Type-Primary;
font-size: 2.25rem;
text-align: center;
margin-bottom: 0;
}

.friendly-time {
margin: 0 auto 1rem;
&-text {
color: $Type-Secondary;
font-size: 0.875rem;
}
}
}
&__description {
text-align: center;
.weather-icon {
font-size: 4rem;
}
.weather {
font-size: 0.875rem;
}
.temperature {
font-size: 4rem;
font-weight: 700;
}
}
}

.popup__additional {
padding: 0.5rem 1rem;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;

p {
text-align: center;
color: $Type-Secondary;
a {
svg {
color: $Type-Secondary;
}
}
}
}
}

//common styles for Road weather and Regional weather
.data-card {
margin: 0.75rem 0;
padding: 0.75rem;
border-radius: 8px;
box-shadow: 0px 6.4px 14.4px 0px rgba(0, 0, 0, 0.13), 0px 1.2px 3.6px 0px rgba(0, 0, 0, 0.10);

&__row {
display: flex;

& + .data-card__row {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid $Divider;
}

&:not(.group) {
.data-icon {
align-self: center;
}
}

.data-icon {
margin-right: 0.75rem;
}

.data-group {
flex: 1 0;

&__row {
display: flex;
}
}
}

.label, .data {
font-size: 0.875rem;
margin-bottom: 0;
}

.label {
text-align: left;
font-weight: 700;
}

.data {
text-align: right;
margin-left: auto;
min-width: 80px;
color: $Type-Secondary;
}
}
}

2 changes: 1 addition & 1 deletion src/frontend/src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
//Type
$Type-Primary: #292929;
$Type-Secondary: #464341;
$Type-Secondary: #474543;
$Type-Disabled: #A19F9D;
$Type-Link: #1A5A96;

Expand Down
Loading