@fmidev/smartmet-alert-client 4.2.7 → 4.4.19

package/dist/index.relative.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/dist/index.start.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/dist/index.sv.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fmidev/smartmet-alert-client",
-  "version": "4.2.7",
+  "version": "4.4.19",
   "description": "Web application for viewing weather and flood alerts",
   "author": "Finnish Meteorological Institute",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "bootstrap": "5.3.3",
     "bootstrap-vue-next": "0.14.10",
     "cross-fetch": "3.1.8",
-    "dompurify": "3.2.3",
+    "dompurify": "3.2.7",
     "flatbush": "3.2.1",
     "focus-visible": "5.2.1",
     "he": "1.2.0",

package/public/index.dark.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
     <style>
       body {

package/public/index.en.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/public/index.fi.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/public/index.relative.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/public/index.start.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/public/index.sv.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes" />
     <title>SmartMet Alert Client</title>
   </head>
 

package/src/App.vue

@@ -94,6 +94,10 @@ export default {
       type: String,
       default: 'light',
     },
+    fontScale: {
+      type: String,
+      default: '1',
+    },
     sleep: {
       type: String,
       default: 'true',
@@ -210,6 +214,31 @@ export default {
       this.warningsData = JSON.parse(this.warnings)
     }
   },
+  mounted() {
+    if (this.fontScale != null && this.fontScale.trim() !== ''
+    && Number(this.fontScale) !== 1) {
+      const newFontScale = Number(this.fontScale)
+      if (!Number.isNaN(newFontScale)) {
+        let originalFontSize
+        if (
+          typeof window !== 'undefined' &&
+          typeof document !== 'undefined' &&
+          document.documentElement &&
+          window.getComputedStyle
+        ) {
+          const htmlElement = document.documentElement
+          const computedStyle = window.getComputedStyle(htmlElement)
+          originalFontSize = parseFloat(computedStyle.fontSize)
+        }
+        if (originalFontSize == null || Number.isNaN(originalFontSize)) {
+          originalFontSize = 16 // Fallback
+        }
+        const scaledFontSize = newFontScale * originalFontSize
+        const newFontSize = Math.round(scaledFontSize * 100) / 100
+        document.documentElement.style.fontSize = `${newFontSize}px`
+      }
+    }
+  },
   serverPrefetch() {
     if (!this.warnings) {
       return this.fetchWarnings()
@@ -227,6 +256,9 @@ export default {
       }-theme`
     },
     fetchWarnings() {
+      if (this.warnings) {
+        return
+      }
       this.loading = 1
       if (this.debugMode.toLowerCase() !== 'false') {
         console.log(`Updating warnings at ${new Date()}`)

package/src/assets/img/ui/arrow-down.svg

@@ -1,11 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="15px" height="8px" viewBox="0 0 15 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
     <title>arrow-down-symbol</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Symbols" transform="translate(-732.000000, -738.000000)" stroke="#979797" stroke-width="1.5">
+        <g id="Symbols" transform="translate(-732.000000, -738.000000)" stroke="#ffffff" stroke-width="1.5">
             <g id="arrow-down-symbol" transform="translate(733.000000, 739.000000)">
                 <polyline id="fill-1" transform="translate(6.500000, 3.000000) rotate(-270.000000) translate(-6.500000, -3.000000) " points="3.5 -3.5 9.5 3 3.5 9.5"></polyline>
             </g>

package/src/assets/img/ui/arrow-up.svg

@@ -1,11 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="15px" height="8px" viewBox="0 0 15 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
     <title>arrow-up-symbol</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Symbols" transform="translate(-670.000000, -738.000000)" stroke="#979797" stroke-width="1.5">
+        <g id="Symbols" transform="translate(-670.000000, -738.000000)" stroke="#ffffff" stroke-width="1.5">
             <g id="arrow-up-symbol" transform="translate(671.000000, 739.000000)">
                 <polyline id="fill-1" transform="translate(6.500000, 3.000000) scale(1, -1) rotate(-270.000000) translate(-6.500000, -3.000000) " points="3.5 -3.5 9.5 3 3.5 9.5"></polyline>
             </g>

package/src/assets/img/ui/toggle-selected.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55" height="30" viewBox="0 0 55 30" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="outer-clip">
+      <rect x="0" y="5" width="55" height="20" rx="4" ry="4"/>
+    </clipPath>
+    <clipPath id="inner-clip">
+      <path d="M 35 5 L 51 5 A 4 4 0 0 1 55 9 L 55 21 A 4 4 0 0 1 51 25 L 35 25 Z"/>
+    </clipPath>
+  </defs>
+  <rect x="0" y="5" width="55" height="20" rx="4" ry="4" fill="#767676" stroke="#767676" stroke-width="1" clip-path="url(#outer-clip)"/>
+  <path d="M 35 5 L 51 5 A 4 4 0 0 1 55 9 L 55 21 A 4 4 0 0 1 51 25 L 35 25 Z" fill="#ffffff" stroke="#767676" stroke-width="1" clip-path="url(#inner-clip)"/>
+</svg>

package/src/assets/img/ui/toggle-unselected.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55" height="30" viewBox="0 0 55 30" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="outer-clip">
+      <rect x="0" y="5" width="55" height="20" rx="4" ry="4"/>
+    </clipPath>
+    <clipPath id="inner-clip">
+      <path d="M 4 5 L 20 5 L 20 25 L 4 25 A 4 4 0 0 1 0 21 L 0 9 A 4 4 0 0 1 4 5 Z"/>
+    </clipPath>
+  </defs>
+  <rect x="0" y="5" width="55" height="20" rx="4" ry="4" fill="#ebebeb" stroke="#767676" stroke-width="1" clip-path="url(#outer-clip)"/>
+  <path d="M 4 5 L 20 5 L 20 25 L 4 25 A 4 4 0 0 1 0 21 L 0 9 A 4 4 0 0 1 4 5 Z" fill="#ffffff" stroke="#767676" stroke-width="1" clip-path="url(#inner-clip)"/>
+</svg>

package/src/assets/img/warning/several.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
 <g id="surface1">
-<path style="stroke:rgba(255, 255, 255, 1.0);stroke-width: 2.5px;paint-order: stroke;fill-rule:evenodd;fill:rgb(13.333333%,12.156863%,12.54902%);fill-opacity:1;" d="M 13.605469 18.632812 L 14.984375 18.632812 L 14.984375 14.984375 L 18.632812 14.984375 L 18.632812 13.605469 L 14.984375 13.605469 L 14.984375 9.957031 L 13.605469 9.957031 L 13.605469 13.605469 L 9.957031 13.605469 L 9.957031 14.984375 L 13.605469 14.984375 Z M 13.605469 18.632812 "/>
+<path style="fill:rgb(255, 255, 255, 1.0);fill-opacity:1;" d="M 13.605469 18.632812 L 14.984375 18.632812 L 14.984375 14.984375 L 18.632812 14.984375 L 18.632812 13.605469 L 14.984375 13.605469 L 14.984375 9.957031 L 13.605469 9.957031 L 13.605469 13.605469 L 9.957031 13.605469 L 9.957031 14.984375 L 13.605469 14.984375 Z M 13.605469 18.632812 "/>
 </g>
 </svg>

package/src/components/AlertClient.vue

@@ -394,7 +394,7 @@ export default {
 }
 
 div#fmi-warnings {
-  width: 690px;
+  width: 700px;
   padding: 0;
   margin-bottom: 20px;
 

package/src/components/DayLarge.vue

@@ -1,34 +1,36 @@
 <template>
-  <div class="map-container">
-    <div class="warning-map-status" aria-hidden="true">
-      <p>
-        <span class="bold-text">{{ warningsTitle }}</span
-        ><br />
-        <span v-html="warningsDate"></span>
-      </p>
-      <p>
-        <span class="bold-text">{{ updatedTitle }}</span
-        ><br />
-        {{ updatedDate }}<br />
-        {{ atTime }} {{ updatedTime }}
-      </p>
+  <div>
+    <div class="map-container">
+      <div class="warning-map-status" aria-hidden="true">
+        <p>
+          <span class="bold-text">{{ warningsTitle }}</span
+          ><br />
+          <span v-html="warningsDate"></span>
+        </p>
+        <p>
+          <span class="bold-text">{{ updatedTitle }}</span
+          ><br />
+          {{ updatedDate }}<br />
+          {{ atTime }} {{ updatedTime }}
+        </p>
+      </div>
+      <MapLarge
+        :index="index"
+        :input="regions"
+        :visible-warnings="visibleWarnings"
+        :warnings="warnings"
+        :geometry-id="geometryId"
+        :loading="loading"
+        :theme="theme"
+        :language="language"
+        :spinner-enabled="spinnerEnabled"
+        @loaded="onLoaded" />
     </div>
     <div class="data-providers noselect" aria-hidden="true">
-      <span>{{ dataProviderFirst }}</span
-      ><br />
+      <span>{{ dataProviderFirst }}</span>
+      <br />
       <span>{{ dataProviderSecond }}</span>
     </div>
-    <MapLarge
-      :index="index"
-      :input="regions"
-      :visible-warnings="visibleWarnings"
-      :warnings="warnings"
-      :geometry-id="geometryId"
-      :loading="loading"
-      :theme="theme"
-      :language="language"
-      :spinner-enabled="spinnerEnabled"
-      @loaded="onLoaded" />
   </div>
 </template>
 
@@ -187,12 +189,13 @@ div.warning-map-status {
 }
 
 div.data-providers {
-  position: absolute;
-  bottom: 4px;
-  right: 16px;
-  text-align: left;
-  z-index: 5;
+  position: relative;
+  text-align: right;
+  z-index: 15;
   pointer-events: none;
+  padding-left: 50%;
+  margin-top: -50px;
+  margin-right: 15px;
 }
 
 @media screen and (orientation: landscape) {

package/src/components/DaySmall.vue

@@ -217,7 +217,7 @@ div.date-selector-cell {
   }
 }
 
-@media (max-width: 575px) {
+@media (width < 576px) {
   .map-small,
   .map-container {
     display: none;

package/src/components/Days.vue

@@ -307,7 +307,7 @@ div#fmi-warnings-date-selector.tabs {
   }
 }
 
-@media (max-width: 575px) {
+@media (width < 576px) {
   :deep(div.fmi-warnings-date-wrapper li.nav-item button.day) {
     border-bottom: 0;
     border-radius: 0;

package/src/components/DescriptionWarning.vue

@@ -2,7 +2,9 @@
   <div class="current-description-row" :class="theme">
     <div class="current-description-image-cell" aria-hidden="true">
       <div
-        :class="`current-description-image warning-image symbol-image transform-rotate-${rotation} level-${input.severity} ${typeClass}`">
+        :class="`current-description-image warning-image symbol-image transform-rotate-${rotation} level-${input.severity} ${typeClass}`"
+        :aria-label="`${warningLevel} ${warningTitle.toLowerCase()}${warningDetails}`"
+      >
         <span
           :class="`symbol-text transform-rotate-${invertedRotation} region-warning-symbol-text`"
           >{{ input.text }}</span
@@ -49,6 +51,15 @@ export default {
     warningTitle() {
       return this.t(this.input.type)
     },
+    warningLevel() {
+      return this.t(`warningLevel${this.input.severity}`)
+    },
+    warningDetails() {
+      if (this.input.text == null || this.input.direction == null) {
+        return ''
+      }
+      return ` (${this.input.text} m/s ${this.t("fromDirection")} ${this.input.direction + 180}°)`
+    },
     info() {
       return this.input.info[this.language]
     },

package/src/components/GrayScaleToggle.vue

@@ -8,11 +8,18 @@
           'focus-ring',
           grayScale ? 'gray-scale-selected' : 'gray-scale-unselected',
         ]"
+        role="button"
         tabindex="0"
+        :aria-pressed="grayScale ? 'true' : 'false'"
+        :aria-label="grayScaleText"
         @mousedown="preventEvents"
         @click="toggleGrayScale"
         @keydown.enter="toggleGrayScale"
-        @keydown.space="toggleGrayScale" />
+        @keydown.space="toggleGrayScale">
+          <span>
+            {{ toggleText }}
+          </span>
+        </div>
     </div>
   </div>
 </template>
@@ -48,6 +55,9 @@ export default {
     grayScaleText() {
       return this.t('grayScale')
     },
+    toggleText() {
+      return this.grayScale ? this.t('toggleOn') : this.t('toggleOff')
+    },
   },
   methods: {
     toggleGrayScale(event) {
@@ -89,54 +99,46 @@ div#gray-scale-select-text {
   padding-right: 5px;
   vertical-align: middle;
   line-height: normal;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 div#gray-scale-select-container {
   display: table-cell;
-  width: 30px;
+  width: 55px;
   height: $symbol-list-line-height;
   vertical-align: middle;
 }
 
 div#gray-scale-select {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: $symbol-list-select-height;
   margin: 0;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-}
-
-.light-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-blue' + $image-extension);
-}
-
-.dark-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.light-gray-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-dark' + $image-extension);
-}
-
-.dark-gray-theme .gray-scale-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.light-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
-}
-
-.light-gray-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-gray-theme .gray-scale-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
+  &.gray-scale-selected {
+    padding-right: 18px;
+    background-image: url($ui-image-path + 'toggle-selected' + $image-extension);
+    span {
+      color: $toggle-on-text;
+    }
+  }
+  &.gray-scale-unselected {
+    padding-left: 18px;
+    background-image: url($ui-image-path + 'toggle-unselected' + $image-extension);
+    span {
+      color: $toggle-off-text;
+    }
+  }
+  span {
+    font-family: $symbol-font-family;
+    font-size: $font-size;
+    forced-color-adjust: none;
+  }
 }
 
 @media (max-width: 767px) {

package/src/components/Legend.vue

@@ -22,6 +22,7 @@
         <b-button
           block
           :class="['legends-toggle', visible ? '' : 'collapsed']"
+          :aria-label="toggleLegendsText"
           @click="onLegendToggle" />
       </b-card-header>
       <b-collapse
@@ -167,25 +168,25 @@ div.symbol-list-header-row {
 }
 
 .legends-panel {
-  border-radius: 0;
   margin-left: 0;
   margin-right: 0;
+  border-radius: 0;
 }
 
 .light-theme .legends-panel {
-  border: 2px solid $light-legend-background-color;
+  border: 0.5px solid $light-legend-background-color;
 }
 
 .dark-theme .legends-panel {
-  border: 2px solid $dark-legend-background-color;
+  border: 0.5px solid $dark-legend-background-color;
 }
 
 .light-gray-theme .legends-panel {
-  border: 2px solid $light-gray-legend-background-color;
+  border: 0.5px solid $light-gray-legend-background-color;
 }
 
 .dark-gray-theme .legends-panel {
-  border: 2px solid $dark-gray-legend-background-color;
+  border: 0.5px solid $dark-gray-legend-background-color;
 }
 
 .legends-heading {
@@ -193,7 +194,8 @@ div.symbol-list-header-row {
   padding: 0 0 0 15px !important;
   line-height: $current-warning-height;
   border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0 !important;
 }
 
 .light-theme .legends-heading {
@@ -216,6 +218,11 @@ div.symbol-list-header-row {
   position: absolute;
   left: 0;
   right: 38px;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  height: $current-warning-height;
 }
 
 .light-theme .legends-header {
@@ -237,7 +244,6 @@ div.symbol-list-header-row {
 .legends-text {
   display: block;
   text-align: left;
-  line-height: $current-warning-height;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -260,7 +266,7 @@ div.symbol-list-header-row {
   background-color: $dark-gray-legend-heading-background-color;
 }
 
-.legends-toggle {
+button.legends-toggle {
   position: relative;
   height: $current-warning-height;
   width: $current-warning-height;
@@ -268,7 +274,7 @@ div.symbol-list-header-row {
   background-image: url($ui-image-path + 'arrow-up.svg');
   background-repeat: no-repeat;
   background-position: center;
-  border-radius: 0;
+  border-radius: 0 !important;
   border-style: none;
   float: right;
   padding: $image-padding;
@@ -276,6 +282,7 @@ div.symbol-list-header-row {
 
   &.collapsed {
     background-image: url($ui-image-path + 'arrow-down.svg');
+    border-radius: 0 3px 3px 0;
   }
 }
 
@@ -345,26 +352,27 @@ div.symbol-list-header-row {
 
 .legends-container {
   padding: 15px;
+  border-radius: 0;
 }
 
 .light-theme .legends-container {
   background-color: $light-legend-container-background-color;
-  border-top: 2px solid $light-legend-background-color;
+  border-top: 0.5px solid $light-legend-background-color;
 }
 
 .dark-theme .legends-container {
   background-color: $dark-legend-container-background-color;
-  border-top: 2px solid $dark-legend-background-color;
+  border-top: 0.5px solid $dark-legend-background-color;
 }
 
 .light-gray-theme .legends-container {
   background-color: $light-gray-legend-container-background-color;
-  border-top: 2px solid $light-gray-legend-background-color;
+  border-top: 0.5px solid $light-gray-legend-background-color;
 }
 
 .dark-gray-theme .legends-container {
   background-color: $dark-gray-legend-container-background-color;
-  border-top: 2px solid $dark-gray-legend-background-color;
+  border-top: 0.5px solid $dark-gray-legend-background-color;
 }
 
 div#legends-collapse div.card-body {