Added configurable 'Clickable' tiles GH-211

.prettierignore

@@ -1,2 +1,3 @@
 # Ignore artifacts:
-dist
+dist
+skins/weewx-wdc/includes/stat-tile.inc

changelog.md

@@ -734,3 +734,4 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.2.0...11eed6b3#diff-ba225fb
 - Make icon/logo user configurable GH-205
 - Enhancement to the All Time Statistics: Show climatological days per month and per year. GH-196
 - Added NL translation, thanks to user @dystechnic
+- Added configurable 'Clickable' tiles GH-211

skins/weewx-wdc/includes/stat-tile.inc

@@ -24,6 +24,10 @@
 
 <div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-3 bx--col-max-2">
   <!--prettier-ignore-->
+  #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+    #set $open_new_tab = "_blank" if $to_bool($DisplayOptions["stat_tile_links"][$partial_obs]["open_new_tab"]) else "_self"
+    <a class="stat-tile-link" href='$DisplayOptions["stat_tile_links"][$partial_obs]["link"]' target='$open_new_tab'>
+  #end if
   <div
   class="bx--tile stat-tile"
   data-test="$partial_obs"
@@ -36,6 +40,26 @@
   >
     <!-- Main row -->
     <div class="bx--row">
+
+      #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+        <svg
+          class="icon-link"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 32 32"
+        >
+          <polygon
+            points="10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6"
+          />
+          <rect
+            id="_Transparent_Rectangle_"
+            data-name="&lt;Transparent Rectangle&gt;"
+            class="cls-1"
+            width="32"
+            height="32"
+          />
+        </svg>
+      #end if
+
       <div class="bx--col">
         <p class="label">$obs.label[$partial_obs]</p>
         <!--prettier-ignore-->
@@ -347,4 +371,7 @@
     </div>
     #end if
   </div>
+  #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+    </a>
+  #end if
 </div>

skins/weewx-wdc/src/scss/index.scss

@@ -97,6 +97,11 @@ html.dark {
     fill: $text-02;
   }
 
+  .stat-tile svg.icon-link {
+    @include carbon--theme($carbon--theme--g90, true);
+    fill: $text-02;
+  }
+
   .bx-ce-demo-devenv--tab-panels {
     background: $ui-01;
   }
@@ -492,13 +497,26 @@ header.section-header {
   }
 }
 
+a.stat-tile-link,
+a.stat-tile-link * {
+  text-decoration: none;
+  color: inherit;
+}
+
 .stat-tile {
   margin-bottom: $spacing-05;
   height: calc(100% - #{$spacing-05});
   bx-tooltip-definition {
     padding-bottom: $spacing-01;
   }
   > .bx--row {
+    position: relative;
+    svg.icon-link {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 24px;
+    }
     align-items: center;
     .label {
       @include carbon--type-style("expressive-heading-02");