From 75cc565cc65f50f3afb744907c5ad35e12ffd261 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Mon, 22 Apr 2024 18:21:02 -0700
Subject: [PATCH] DBC22-2003: Styling for camera details photo attribution
---
.../src/Components/advisories/Advisories.js | 2 +-
.../src/Components/cameras/CameraCard.js | 1 +
src/frontend/src/pages/CameraDetailsPage.js | 2 +-
src/frontend/src/pages/CameraDetailsPage.scss | 243 +++++++++---------
4 files changed, 126 insertions(+), 122 deletions(-)
diff --git a/src/frontend/src/Components/advisories/Advisories.js b/src/frontend/src/Components/advisories/Advisories.js
index 9fb9979a6..5468295cc 100644
--- a/src/frontend/src/Components/advisories/Advisories.js
+++ b/src/frontend/src/Components/advisories/Advisories.js
@@ -27,7 +27,7 @@ export default function Advisories(props) {
<div className="content">
<h3>
- {advisories.length > 1 ? 'Advisories ' : 'Advisory'}
+ {advisories.length > 1 ? 'Advisories ' : 'Advisory '}
in effect
</h3>
diff --git a/src/frontend/src/Components/cameras/CameraCard.js b/src/frontend/src/Components/cameras/CameraCard.js
index c7bc5b10a..76e3dcae5 100644
--- a/src/frontend/src/Components/cameras/CameraCard.js
+++ b/src/frontend/src/Components/cameras/CameraCard.js
@@ -83,6 +83,7 @@ export default function CameraCard(props) {
return (
<Card className={`webcam-card ${stale} ${delayed} ${unavailable}`}>
<Card.Body onClick={handleClick} onKeyDown={handleKeyDown} tabIndex={0}>
+ <p className="camera-name bold">{camera.credit}</p>
<p className="camera-name bold">{camera.name}</p>
<div className="camera-orientations">
diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
index 9e310ea56..8a10462ca 100644
--- a/src/frontend/src/pages/CameraDetailsPage.js
+++ b/src/frontend/src/pages/CameraDetailsPage.js
@@ -436,6 +436,7 @@ export default function CameraDetailsPage() {
</div>
)}
</div>
+ <p className="credit" dangerouslySetInnerHTML={{__html: camera.credit}}></p>
</Tab>
<Tab eventKey="nearby" title={
@@ -451,7 +452,6 @@ export default function CameraDetailsPage() {
</div>
</Tab>
</Tabs>
- <p className="credit" dangerouslySetInnerHTML={{__html: camera.credit}}></p>
</div>
</div>
)}
diff --git a/src/frontend/src/pages/CameraDetailsPage.scss b/src/frontend/src/pages/CameraDetailsPage.scss
index 8aa2e7c61..fd727364a 100644
--- a/src/frontend/src/pages/CameraDetailsPage.scss
+++ b/src/frontend/src/pages/CameraDetailsPage.scss
@@ -248,124 +248,96 @@
.tab-content {
& > .tab-pane {
- .card-img-box {
- height: 365px;
- margin-bottom: -18px;
-
- &.unavailable {
- background-color: $Surface-status-red;
- color: $Error;
- font-size: 6.875rem;
- display: flex;
- align-items: center;
- justify-content: center;
- }
+ .image-wrap {
+ padding-bottom: 1rem;
- img {
- width: 100%;
- height: 365px;
- object-fit: cover;
+ .card-img-box {
+ margin-bottom: -16px;
- &.image-gallery-image {
- height: 388px;
- cursor: auto;
+ &.unavailable {
+ background-color: $Surface-status-red;
+ color: $Error;
+ font-size: 6.875rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- }
- .image-gallery {
- box-shadow: 0px 1.600000023841858px 3.5999999046325684px 0px rgba(0, 0, 0, 0.13), 0px 0.30000001192092896px 0.8999999761581421px 0px rgba(0, 0, 0, 0.10);
+ img {
+ width: 100%;
+ height: 381px;
+ object-fit: cover;
- &-slide-wrapper {
- display: flex;
- flex-wrap: wrap;
+ &.image-gallery-image {
+ height: 388px;
+ cursor: auto;
+ }
+ }
- .replay-control {
+ .image-gallery {
+ box-shadow: 0px 1.600000023841858px 3.5999999046325684px 0px rgba(0, 0, 0, 0.13), 0px 0.30000001192092896px 0.8999999761581421px 0px rgba(0, 0, 0, 0.10);
+ margin-bottom: 1rem;
+
+ &-slide-wrapper {
display: flex;
- justify-content: center;
- margin: 0 0 12px 0;
+ flex-wrap: wrap;
- @media (min-width: 992px) {
- margin: auto 0;
- }
+ .replay-control {
+ display: flex;
+ justify-content: center;
+ margin: 0 0 12px 0;
- .replay-btn {
- color: $Type-Primary;
- background-color: $White;
- border: none;
- width: 60px;
- height: 60px;
- border-radius: 30px;
- padding: initial;
- margin-bottom: 0;
-
- @media(min-width: 992px) {
- width: 36px;
- height: 36px;
- border-radius: 18px;
+ @media (min-width: 992px) {
+ margin: auto 0;
}
- &:hover {
- background-color: $Grey30;
- }
-
- &:focus {
- border: rgb(46, 93, 215) solid 2px;
+ .replay-btn {
+ color: $Type-Primary;
+ background-color: $White;
+ border: none;
+ width: 60px;
+ height: 60px;
+ border-radius: 30px;
+ padding: initial;
+ margin-bottom: 0;
+
+ @media(min-width: 992px) {
+ width: 36px;
+ height: 36px;
+ border-radius: 18px;
+ }
+
+ &:hover {
+ background-color: $Grey30;
+ }
+
+ &:focus {
+ border: rgb(46, 93, 215) solid 2px;
+ }
}
}
- }
- //Replay the day on mobile
- .range-slider-container {
- order: 2;
- margin: 0 15px;
- width: calc(100% - 30px);
- }
-
- .replay-control--backward {
- order: 3;
- width: 33.33%;
- svg {
- font-size: 1.25rem;
- }
- }
-
- .replay-control--forward {
- order: 5;
- width: 33.33%;
- svg {
- font-size: 1.25rem;
- }
- }
-
- .image-gallery-swipe {
- order: 1;
- width: 100%;
- }
-
- .replay-control--play {
- order: 4;
- width: 33.33%;
- svg {
- font-size: 1.5rem;
- }
- }
-
- //Replay the day on desktop
- @media (min-width: 992px) {
+ //Replay the day on mobile
.range-slider-container {
- order: 5;
- margin: 5px 15px;
- width: calc(70% - 30px);
+ order: 2;
+ margin: 0 15px;
+ width: calc(100% - 30px);
}
.replay-control--backward {
- order: 2;
- width: 10%;
+ order: 3;
+ width: 33.33%;
+ svg {
+ font-size: 1.25rem;
+ }
}
.replay-control--forward {
- order: 4;
- width: 10%;
+ order: 5;
+ width: 33.33%;
+ svg {
+ font-size: 1.25rem;
+ }
}
.image-gallery-swipe {
@@ -374,33 +346,65 @@
}
.replay-control--play {
- order: 3;
- width: 10%;
+ order: 4;
+ width: 33.33%;
+ svg {
+ font-size: 1.5rem;
+ }
+ }
+
+ //Replay the day on desktop
+ @media (min-width: 992px) {
+ .range-slider-container {
+ order: 5;
+ margin: 5px 15px;
+ width: calc(70% - 30px);
+ }
+
+ .replay-control--backward {
+ order: 2;
+ width: 10%;
+ }
+
+ .replay-control--forward {
+ order: 4;
+ width: 10%;
+ }
+
+ .image-gallery-swipe {
+ order: 1;
+ width: 100%;
+ }
+
+ .replay-control--play {
+ order: 3;
+ width: 10%;
+ }
}
}
}
}
- }
- .timestamp {
- background-color: $Black;
- padding: 0 10px;
- display: flex;
- justify-content: space-between;
- position: relative;
+ .timestamp {
+ background-color: $Black;
+ padding: 0 10px;
+ display: flex;
+ justify-content: space-between;
+ position: relative;
- p {
- color: $White;
- font-size: 0.875rem;
- margin-bottom: 0;
- }
+ p {
+ color: $White;
+ font-size: 0.875rem;
+ margin-bottom: 0;
+ }
- .driveBC {
- font-family: serif;
- span {
- color: $BC-Yellow;
+ .driveBC {
+ font-family: serif;
+ span {
+ color: $BC-Yellow;
+ }
+ margin-right: 10px;
}
- margin-right: 10px;
}
}
}
@@ -491,9 +495,8 @@
}
.credit {
- margin-top: 0.25rem;
- font-size: 0.75rem;
- font-style: italic;
+ font-size: 0.875rem;
+ line-height: 1.5;
}
}
@@ -526,7 +529,7 @@
top: 0rem;
bottom: 0;
width: 100%;
- height: 370px;
+ height: 388px;
.map {
width: 100%;