Skip to content

Commit

Permalink
DBC22-1885: updated the styling of rest stop side panel
Browse files Browse the repository at this point in the history 
DBC22-1885: updated the styling of rest stop side panel
  • Loading branch information
@bcgov-brwang
bcgov-brwang committed Mar 28, 2024
1 parent 3ad5f21 commit 2908047
Show file tree
Hide file tree
Showing 3 changed files with 247 additions and 14 deletions.
6 changes: 2 additions & 4 deletions src/frontend/src/Components/Filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ import {
faSnowflake,
faFerry,
faTemperatureHalf,
// faRestroom,
// faCloudSun
faToilet,
faRestroom,
} from '@fortawesome/free-solid-svg-icons';
import Button from 'react-bootstrap/Button';
import Tooltip from 'react-bootstrap/Tooltip';
Expand Down Expand Up @@ -349,7 +347,7 @@ export default function Filters(props) {
/>
<label htmlFor="filter--rest-stops">
<span className="filter-item__icon">
<FontAwesomeIcon icon={faToilet} alt="rest stops" />
<FontAwesomeIcon icon={faRestroom} alt="rest stops" />
</span>
Rest stops
</label>
Expand Down
190 changes: 180 additions & 10 deletions src/frontend/src/Components/map/mapPopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,21 @@ import {
faWind,
faEye,
faTriangleExclamation,
faToilet
faToilet,
faBath,
faRestroom,
faClock,
faDoorOpen,
faTruck,
faTable,
faWifi,
faRoad,
faChargingStation,
} from '@fortawesome/free-solid-svg-icons';
import {
faTablePicnic,
faTruckContainer,
} from '@fortawesome/pro-solid-svg-icons';
import {
faSunCloud
} from '@fortawesome/pro-solid-svg-icons';
Expand Down Expand Up @@ -302,23 +315,180 @@ export function getRestStopPopup(restStopFeature) {
const restStopData = restStopFeature.getProperties();

return (
<div className="popup popup--ferry">
<div className="popup popup--reststop">
<div className="popup__title">
<div className="popup__title__icon">
<FontAwesomeIcon icon={faToilet} />
<FontAwesomeIcon icon={faRestroom} />
</div>
<p className="name">
<a href={restStopData.url} target="_blank" rel="noreferrer">{`${restStopData.properties.REST_AREA_NAME}`}</a>
Rest area
</p>
</div>
<div className="popup__content">
<div className="popup__content__description">
<p>Open Date: {`${restStopData.properties.OPEN_DATE}`}</p>
<p>Close Date: {`${restStopData.properties.CLOSE_DATE}`}</p>
<p>Power Type: {`${restStopData.properties.POWER_TYPE}`}</p>
<p>Toilet Type: {`${restStopData.properties.TOILET_TYPE}`}</p>
<p>Admin Unit Name: {`${restStopData.properties.ADMIN_UNIT_NAME}`}</p>
<p>Distance from Municipality: {`${restStopData.properties.DISTANCE_FROM_MUNICIPALITY}`}</p>
<p>{`${restStopData.properties.REST_AREA_NAME}`}</p>
<p>{`${restStopData.properties.DISTANCE_FROM_MUNICIPALITY}`}</p>
<hr/>
<div className='popup__content_block'>
<div className='popup__content__description'>
<div className='popup__content__description__categary'>Access</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faClock} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.OPEN_YEAR_ROUND !== "No" ? (
"Open year around"
) : (
`Open: ${restStopData.properties.OPEN_DATE} - ${restStopData.properties.CLOSE_DATE}`
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faDoorOpen} /></div>
<div className='popup__content__description__container__text'>
<div>
{`${restStopData.properties.DIRECTION_OF_TRAFFIC} entrance, ${restStopData.properties.ACCESS_RESTRICTION}`}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faTruckContainer} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.ACCOM_COMMERCIAL_TRUCKS === "Yes" ? (
"Large vehicles accommodated"
) : (
`Large vehicles not accommodated`
)}
</div>
</div>
</div>
</div>
</div>

<hr/>
<div className='popup__content_block'>
<div className='popup__content__description'>
<div className='popup__content__description__categary'>Features</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faToilet} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.WHEELCHAIR_ACCESS_TOILET === "Yes" ? (
`${restStopData.properties.NUMBER_OF_TOILETS} wheelchair accessible toilets`
) : (
`${restStopData.properties.NUMBER_OF_TOILETS} toilets (not wheelchair accessible)`
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faTablePicnic} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.NUMBER_OF_TABLES !== 0 && restStopData.properties.NUMBER_OF_TABLES !== null ? (
`${restStopData.properties.NUMBER_OF_TABLES} tables`
) : (
`No tables`
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faWifi} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.WI_FI === "No" ? (
`Wi-Fi unavailable`
) : (
`Wi-Fi available`
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faRoad} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.ACCELERATION_LANE === "No" ? (
`No acceleration lane, `
) : (
`Acceleration lane, `
)}
{restStopData.properties.DECELERATION_LANE === "No" ? (
`no deceleration lane`
) : (
`deceleration lane`
)}
</div>
</div>
</div>
</div>
</div>

<hr/>
<div className='popup__content_block'>
<div className='popup__content__description'>
<div className='popup__content__description__categary'>Electiric Vehicles</div>
<div className='popup__content__description__container'>
<div><FontAwesomeIcon icon={faChargingStation} /></div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.EV_STATION_25_KW_DCFC === 0
&& restStopData.properties.EV_STATION_50_KW_DCFC === 0
&& restStopData.properties.EV_STATION_LEVEL_2_J1772 === 0? (
`No charging stations `
) : (
``
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div>
{restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && (
<FontAwesomeIcon icon={faChargingStation} />
)}
</div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && (
`J1772 6.48KW: ${restStopData.properties.EV_STATION_25_KW_DCFC} `
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div>
{restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && (
<FontAwesomeIcon icon={faChargingStation} />
)}
</div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && (
`CHAdeMO 25KW: ${restStopData.properties.EV_STATION_25_KW_DCFC} `
)}
</div>
</div>
</div>
<div className='popup__content__description__container'>
<div>
{restStopData.properties.EV_STATION_50_KW_DCFC !== 0 && (
<FontAwesomeIcon icon={faChargingStation} />
)}
</div>
<div className='popup__content__description__container__text'>
<div>
{restStopData.properties.EV_STATION_50_KW_DCFC !== 0 && (
`CHAdeMO 50KW: ${restStopData.properties.EV_STATION_50_KW_DCFC} `
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
65 changes: 65 additions & 0 deletions src/frontend/src/Components/map/mapPopup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,71 @@
}
}

//Rest Stops layers
&--reststop {
.popup__title {
&__icon {
width: 50px;
height: 50px;
background: #273F94;
}
}

.popup__content {
&__title {
border-bottom: 1px solid $Divider;
.name {
margin-bottom: 0;
}
.direction {
font-size: 0.875rem;
color: $Grey70;
margin-bottom: 0;
}
}
&__description {
> p:first-child {
font-weight: bold;
font-size: 0.875rem;
height: 1.3125rem;
margin-bottom: 0;
}

> p:nth-child(2) {
font-size: 0.875rem;
margin-top: 0;
margin-bottom: 0;
}

&__block {
display: flex;
justify-content: space-between;

> div {
flex: 1;
}
}

&__container{
display: flex;
align-items: center;
justify-content: flex-start;

&__text {
margin-left: 10px; /* Adjust the margin as needed */
}
}

&__categary{
font-weight: bold;
font-size: 0.875rem;
height: 1.3125rem;
margin-bottom: 20px;
}
}
}
}

//common styles for Road weather and Regional weather
.data-card {
margin: 0.75rem 0;
Expand Down

0 comments on commit 2908047

Please sign in to comment.