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

Author: minORC

src/frontend/src/Components/map/mapPopup.js

@@ -12,8 +12,13 @@ import {
   faMountain,
   faDroplet,
   faSnowflake,
-  faWind
+  faWind,
+  faEye,
+  faArrowUpRightFromSquare
 } from '@fortawesome/free-solid-svg-icons';
+import {
+  faSunCloud
+} from '@fortawesome/pro-solid-svg-icons';
 
 import './mapPopup.scss';
 
@@ -107,6 +112,7 @@ export function getFerryPopup(ferryFeature) {
       </div>
     </div>
 
+    // Road weather conditions html structure
     // <div className="popup popup--road-weather">
     //   <div className="popup__title">
     //     <div className="popup__title__icon">
@@ -178,5 +184,46 @@ export function getFerryPopup(ferryFeature) {
     //     </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>
   );
 }

src/frontend/src/Components/map/mapPopup.scss

@@ -298,57 +298,135 @@
             }
           }
         }
-        .data-card {
-          margin-top: 0.75rem;
-          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;
-            }
+  //Regional Weather layer
+  &--regional-weather {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
-            .data-group {
-              flex: 1 0;
+    .popup__title {
+      background-color: #ECEAE8;
+      border-top: 4px solid $Type-Primary;
+      
+      .name {
+        color: $Type-Primary;
+      }
+  
+      &__icon {
+        background-color: $Type-Primary;
+        color: white;
+      }
+    }
 
-              &__row {
-                display: flex;
-              }
-            }
-          }
+    .popup__content {
+      p {
+        margin-bottom: 0;
+      }
+      &__title {
+        .name {
+          color: $Type-Primary;
+          font-size: 2.25rem;
+          text-align: center;
+          margin-bottom: 0;
+        }
 
-          .label, .data {
+        .friendly-time {
+          margin: 0 auto 1rem;
+          &-text {
+            color: $Type-Secondary;
             font-size: 0.875rem;
           }
-          
-          .label {
-            text-align: left;
-            font-weight: 700;
-          }
+        }
+      }
+      &__description {
+        text-align: center;
+        .weather-icon {
+          font-size: 4rem;
+        }
+        .weather {
+          font-size: 0.875rem;
+        }
+        .temperature {
+          font-size: 4rem;
+          font-weight: 700;
+        }
+      }
+    }
 
-          .data {
-            text-align: right;
-            margin-left: auto;
-            min-width: 80px;
+    .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;
+    }
+  }
 }