DBC22-2003: Styling for camera details photo attribution

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>
 

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">
 

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>
         )}

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%;