Added tooltip to stat tile. Updated responsive behaviour of stat tiles.

changelog.md

@@ -37,3 +37,10 @@
 - Fixed JS build
 - Updated UI Shell
 - Updated some diagram aggragate types
+
+# 1.0.0-beta6
+
+- Responsive Updates for Ui-Shell, Stat Tiles and diagrams
+- GH-2
+- Added basic PWA manifest and service-worker
+- Data Table aggregation updated

install.py

@@ -11,7 +11,7 @@ def loader():
 class BasicInstaller(ExtensionInstaller):
     def __init__(self):
         super(BasicInstaller, self).__init__(
-            version="1.0.0-beta5",
+            version="1.0.0-beta6",
             name='weewx-wdc',
             description='Weather Data Center skin for weewx.',
             author="David Baetge",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weewx-wdc",
-  "version": "1.0.0-beta5",
+  "version": "1.0.0-beta6",
   "description": "Weather Data Center skin for weewx.",
   "author": "David Baetge <[email protected]>",
   "license": "MIT",
@@ -60,6 +60,7 @@
     "dev": "parcel watch --no-hmr",
     "build": "parcel build --no-scope-hoist",
     "deploy:local": "sudo cp -R ./skins/weewx-wdc /etc/weewx/skins && sudo cp -r ./bin/user/. /usr/share/weewx/user/ && sudo systemctl restart weewx && sudo /usr/share/weewx/wee_reports",
-    "serve:local": "docker run -it --rm -d -p 8080:80 --name web -v /var/www/html/weewx:/usr/share/nginx/html nginx"
+    "serve:local": "docker run -it --rm -d -p 8080:80 --name web -v /var/www/html/weewx:/usr/share/nginx/html nginx",
+    "deploy:pi": "sudo rsync -vua ./bin/ pi@weewx:/home/pi/bin && sudo rsync -vua ./skins/ pi@weewx:/home/pi/skins"
   }
 }

readme.md

@@ -36,7 +36,7 @@ Inspired by and build with the [Carbon Design System](https://carbondesignsystem
 
 ## Screenshot
 
-![Screenshot](https://public-images-social.s3.eu-west-1.amazonaws.com/weewx-wdc.png)
+![Screenshot](https://public-images-social.s3.eu-west-1.amazonaws.com/weewx-wdc-01.png)
 
 ## Usage
 

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

@@ -3,6 +3,12 @@
 #set $label_sum = $get_labels('Sum', $precision)
 #set $label_min = $get_labels('Min', $precision)
 #set $label_max = $get_labels('Max', $precision)
+
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon/web-components/version/v1.21.0/tooltip.min.js"
+></script>
+
 <div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-3 bx--col-max-2">
   <div class="bx--tile stat-tile">
     <div class="bx--row">
@@ -60,9 +66,17 @@
       <div class="bx--col">
         <p class="stat-label">
           <!--prettier-ignore-->
-          $gettext($label_min)
           #if $precision == 'year' or $precision == 'alltime'
-            $getattr($get_time_span_from_attr($precision, $day, $week, $month, $year, $alltime), $partial_obs).mintime.format("%d.%m.%Y %H:%M")
+          <bx-tooltip-definition
+            alignment="center"
+            body-text="$getattr($get_time_span_from_attr($precision, $day, $week, $month, $year, $alltime), $partial_obs).mintime.format('%d.%m.%Y %H:%M')"
+            direction="top"
+          >
+            $gettext($label_min)
+          </bx-tooltip-definition>
+          <!--prettier-ignore-->
+          #else
+            $gettext($label_min)
           #end if
         </p>
         <p class="stat-value">
@@ -74,9 +88,17 @@
       <div class="bx--col">
         <p class="stat-label">
           <!--prettier-ignore-->
-          $gettext($label_max)
           #if $precision == 'year' or $precision == 'alltime'
-            $getattr($get_time_span_from_attr($precision, $day, $week, $month, $year, $alltime), $partial_obs).maxtime.format("%d.%m.%Y %H:%M")
+          <bx-tooltip-definition
+            alignment="center"
+            body-text="$getattr($get_time_span_from_attr($precision, $day, $week, $month, $year, $alltime), $partial_obs).maxtime.format('%d.%m.%Y %H:%M')"
+            direction="top"
+          >
+            $gettext($label_max)
+          </bx-tooltip-definition>
+          <!--prettier-ignore-->
+          #else
+            $gettext($label_max)
           #end if
         </p>
         <p class="stat-value">

skins/weewx-wdc/index.html.tmpl

@@ -17,7 +17,7 @@
 
     <main>
       <section class="main bx--content">
-        <div class="bx--grid">
+        <div class="bx--grid bx--grid--full-width">
           <div class="bx--row">
             <header class="bx--col page-header">
               <h1>$gettext("Current Weather Conditions")</h1>

skins/weewx-wdc/skin.conf

@@ -1,6 +1,6 @@
 # configuration file for the weewx-wdc skin
 SKIN_NAME = Weather Data Center
-SKIN_VERSION = 1.0.0-beta5
+SKIN_VERSION = 1.0.0-beta6
 
 [Extras]
 

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

@@ -140,6 +140,10 @@ header.section-header {
 
 .stat-tile {
   margin-bottom: $spacing-05;
+  height: calc(100% - #{$spacing-05});
+  bx-tooltip-definition {
+    padding-bottom: $spacing-01;
+  }
   > .bx--row {
     align-items: center;
     .label {