Skip to content

Commit

Permalink
BRS-466: Link to advisory details added.
Browse files Browse the repository at this point in the history 
BRS-466: Park page template updated to include id for advisories, id removed from advisory details component

BRS-466: Cleanup and adding link to QuickView
  • Loading branch information
@meredithom
meredithom authored Mar 21, 2022
1 parent 76ca884 commit f84baf2
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 71 deletions.
2 changes: 1 addition & 1 deletion src/staging/src/components/park/advisoryDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default function AdvisoryDetails({ advisories }) {

return (
<div className="mb-5">
<Row className="anchor-link" id="park-advisory-details-container">
<Row>
<Col >
<div className="d-flex justify-content-between align-items-flex-start">
<Heading>{`Advisories (${advisories.length})`}</Heading>
Expand Down
95 changes: 49 additions & 46 deletions src/staging/src/components/park/quickView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export default function QuickView({ park, activityItemsLabels, facilityItemsLabe
return (
<div className="row search-result-card no-gutters">
{/* Photos */}

{park.parkPhotos && park.parkPhotos.length < 1 && (
<div className="col-12 close-margin park-image-div-mobile park-image-logo-div">
<img
Expand All @@ -32,30 +31,30 @@ export default function QuickView({ park, activityItemsLabels, facilityItemsLabe
</div>
)}
{park.parkPhotos && park.parkPhotos.length > 1 && (
<div className="col-12 close-margin park-image-div-mobile">
<Carousel
className="park-carousel-mobile"
autoPlay={false}
indicators={false}
navButtonsAlwaysVisible={true}
animation="fade"
timeout={200}
>
{park.parkPhotos.map(
(item, index) => {
return (
<img
alt="park carousel"
key={index}
className="search-result-image"
src={`${item}`}
/>
)
}
)}
</Carousel>
</div>
)}
<div className="col-12 close-margin park-image-div-mobile">
<Carousel
className="park-carousel-mobile"
autoPlay={false}
indicators={false}
navButtonsAlwaysVisible={true}
animation="fade"
timeout={200}
>
{park.parkPhotos.map(
(item, index) => {
return (
<img
alt="park carousel"
key={index}
className="search-result-image"
src={`${item}`}
/>
)
}
)}
</Carousel>
</div>
)}
<div className="col-12 park-content-mobile p2030 container">
{/* Park Access */}
<div className="row">
Expand All @@ -79,27 +78,31 @@ export default function QuickView({ park, activityItemsLabels, facilityItemsLabe
{/* Advisories */}
<div className="row p10t">
<div className="col-12">
{park.advisories && park.advisories.length > 0 && park.advisories.map(
(advisory, index) => (
<div
key={index}
className="flex-display"
>
{index === 0 && (
<>
<img
alt=""
className="search-result-icon"
src={redAlertIcon}
/>
<div className="pl15 text-blue">
{advisory.title} (1)
</div>
</>
)}
</div>
)
)}
<Link
href={`/${park.slug}#park-advisory-details-container`}
>
{park.advisories && park.advisories.length > 0 && park.advisories.map(
(advisory, index) => (
<div
key={index}
className="flex-display"
>
{index === 0 && (
<>
<img
alt=""
className="search-result-icon"
src={redAlertIcon}
/>
<div className="pl15 text-blue">
{advisory.title} (1)
</div>
</>
)}
</div>
)
)}
</Link>
</div>
</div>
{/* DayUse */}
Expand Down
52 changes: 29 additions & 23 deletions src/staging/src/pages/explore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -903,32 +903,38 @@ export default function Explore({ location, data }) {
{r.protectedAreaName}
</h3>
</Link>

<div className="row p10t mr5">
<div className="col-6">
{r.advisories && r.advisories.length > 0 && r.advisories.map(
(a, index1) => (
// TODO Display all advisories when Event types are
// available in elastic search results based on severity
<div
key={index1}
className="flex-display"
>
{index1 === 0 && (
<>
<img
alt=""
className="search-result-icon"
src={redAlertIcon}
/>
<div className="pl15 text-blue pb20">
{a.title} (1)
</div>
</>
)}
</div>
)
)}
<Link
href={`/${r.slug}#park-advisory-details-container`}
>
{r.advisories && r.advisories.length > 0 && r.advisories.map(
(advisory, index) => (
// TODO Display all advisories when Event types are
// available in elastic search results based on severity
<div
key={index}
className="flex-display"
>
{index === 0 && (
<>
<img
alt=""
className="search-result-icon"
src={redAlertIcon}
/>
<div className="pl15 text-blue pb20">
{advisory.title} (1)
</div>
</>
)}
</div>
)
)}
</Link>
</div>

<div className="col-6">
{r.hasDayUsePass &&
r.hasReservations && (
Expand Down
4 changes: 3 additions & 1 deletion src/staging/src/templates/park.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { makeStyles } from "@material-ui/core/styles"
import Header from "../components/header"
import Footer from "../components/footer"
import useScrollSpy from "react-use-scrollspy"
import Heading from "../components/park/heading.js"

import "../styles/parks.scss"

Expand Down Expand Up @@ -306,9 +307,10 @@ export default function ParkTemplate({ data }) {
</div>
)}
{menuItems[3].visible && (
<div ref={advisoryRef} className="full-width">
<div ref={advisoryRef} className="full-width anchor-link" id="park-advisory-details-container">
{isLoadingAdvisories && (
<div className="mb-5">
<Heading>{`Advisories`}</Heading>
<div className="spinner-border" role="status">
<span className="sr-only">Loading...</span>
</div>
Expand Down

0 comments on commit f84baf2

Please sign in to comment.