@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-alpha.0

package/src/components/CollapsiblePanel.vue

@@ -0,0 +1,284 @@
+<template>
+  <div :class="['collapsible-panel', theme, 'mobile-only']">
+    <div class="panel-header">
+      <div class="panel-title">
+        <span class="panel-text">
+          {{ title }}
+        </span>
+      </div>
+      <button
+        :class="['panel-toggle', visible ? '' : 'collapsed']"
+        :aria-expanded="visible"
+        :aria-label="title"
+        @click="onToggle"
+      ></button>
+    </div>
+    <Transition name="collapse">
+      <div
+        v-if="visible"
+        class="panel-body"
+      >
+        <div class="panel-content">
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CollapsiblePanel',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    theme: {
+      type: String,
+      default: 'light-theme',
+    },
+  },
+  methods: {
+    onToggle() {
+      this.$emit('toggle')
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import '../scss/constants.scss';
+
+.collapsible-panel {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0.25rem;
+  border-radius: 0;
+}
+
+.light-theme.collapsible-panel {
+  border: 0.5px solid $light-legend-background-color;
+}
+
+.dark-theme.collapsible-panel {
+  border: 0.5px solid $dark-legend-background-color;
+}
+
+.light-gray-theme.collapsible-panel {
+  border: 0.5px solid $light-gray-legend-background-color;
+}
+
+.dark-gray-theme.collapsible-panel {
+  border: 0.5px solid $dark-gray-legend-background-color;
+}
+
+.panel-header {
+  height: $current-warning-height;
+  padding: 0 0 0 15px;
+  line-height: $current-warning-height;
+  border: none;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0;
+  position: relative;
+}
+
+.light-theme .panel-header {
+  background-color: $light-legend-heading-background-color;
+}
+
+.dark-theme .panel-header {
+  background-color: $dark-legend-heading-background-color;
+}
+
+.light-gray-theme .panel-header {
+  background-color: $light-gray-legend-heading-background-color;
+}
+
+.dark-gray-theme .panel-header {
+  background-color: $dark-gray-legend-heading-background-color;
+}
+
+.panel-title {
+  position: absolute;
+  left: 0;
+  right: 38px;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  height: $current-warning-height;
+}
+
+.light-theme .panel-title {
+  background: $light-legend-heading-background-color;
+}
+
+.dark-theme .panel-title {
+  background: $dark-legend-heading-background-color;
+}
+
+.light-gray-theme .panel-title {
+  background: $light-gray-legend-heading-background-color;
+}
+
+.dark-gray-theme .panel-title {
+  background: $dark-gray-legend-heading-background-color;
+}
+
+.panel-text {
+  display: block;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 15px;
+}
+
+.light-theme .panel-text {
+  background-color: $light-legend-heading-background-color;
+}
+
+.dark-theme .panel-text {
+  background-color: $dark-legend-heading-background-color;
+}
+
+.light-gray-theme .panel-text {
+  background-color: $light-gray-legend-heading-background-color;
+}
+
+.dark-gray-theme .panel-text {
+  background-color: $dark-gray-legend-heading-background-color;
+}
+
+button.panel-toggle {
+  position: relative;
+  height: $current-warning-height;
+  width: $current-warning-height;
+  min-width: $current-warning-height;
+  background-image: url($ui-image-path + 'arrow-up.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0;
+  border-style: none;
+  float: right;
+  padding: $image-padding;
+  margin-left: 5px;
+  cursor: pointer;
+
+  &.collapsed {
+    background-image: url($ui-image-path + 'arrow-down.svg');
+    border-radius: 0 3px 3px 0;
+  }
+}
+
+.light-theme .panel-toggle {
+  background-color: $light-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $light-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $light-current-warning-toggle-active-color;
+  }
+}
+
+.dark-theme .panel-toggle {
+  background-color: $dark-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $dark-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $dark-current-warning-toggle-active-color;
+  }
+}
+
+.light-gray-theme .panel-toggle {
+  background-color: $light-gray-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $light-gray-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $light-gray-current-warning-toggle-active-color;
+  }
+}
+
+.dark-gray-theme .panel-toggle {
+  background-color: $dark-gray-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $dark-gray-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $dark-gray-current-warning-toggle-active-color;
+  }
+}
+
+.panel-body {
+  overflow: hidden;
+}
+
+.panel-content {
+  padding: 15px;
+  border-radius: 0;
+}
+
+.light-theme .panel-content {
+  background-color: $light-legend-container-background-color;
+  border-top: 0.5px solid $light-legend-background-color;
+}
+
+.dark-theme .panel-content {
+  background-color: $dark-legend-container-background-color;
+  border-top: 0.5px solid $dark-legend-background-color;
+}
+
+.light-gray-theme .panel-content {
+  background-color: $light-gray-legend-container-background-color;
+  border-top: 0.5px solid $light-gray-legend-background-color;
+}
+
+.dark-gray-theme .panel-content {
+  background-color: $dark-gray-legend-container-background-color;
+  border-top: 0.5px solid $dark-gray-legend-background-color;
+}
+
+// Collapse transition
+.collapse-enter-active,
+.collapse-leave-active {
+  transition:
+    max-height 0.35s ease,
+    opacity 0.35s ease;
+  overflow: hidden;
+}
+
+.collapse-enter-from {
+  max-height: 0;
+  opacity: 0;
+}
+
+.collapse-enter-to {
+  max-height: 2000px;
+  opacity: 1;
+}
+
+.collapse-leave-from {
+  max-height: 2000px;
+  opacity: 1;
+}
+
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+</style>

package/src/components/DayLarge.vue

@@ -1,15 +1,16 @@
 <template>
   <div>
     <div class="map-container">
-      <div class="warning-map-status" aria-hidden="true">
+      <div
+        class="warning-map-status"
+        aria-hidden="true"
+      >
         <p>
-          <span class="bold-text">{{ warningsTitle }}</span
-          ><br />
+          <span class="bold-text">{{ warningsTitle }}</span><br />
           <span v-html="warningsDate"></span>
         </p>
         <p>
-          <span class="bold-text">{{ updatedTitle }}</span
-          ><br />
+          <span class="bold-text">{{ updatedTitle }}</span><br />
           {{ updatedDate }}<br />
           {{ atTime }} {{ updatedTime }}
         </p>
@@ -24,9 +25,13 @@
         :theme="theme"
         :language="language"
         :spinner-enabled="spinnerEnabled"
-        @loaded="onLoaded" />
+        @loaded="onLoaded"
+      />
     </div>
-    <div class="data-providers noselect" aria-hidden="true">
+    <div
+      class="data-providers noselect"
+      aria-hidden="true"
+    >
       <span>{{ dataProviderFirst }}</span>
       <br />
       <span>{{ dataProviderSecond }}</span>

package/src/components/DaySmall.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     :class="['date-selector-cell', theme, { active: active }]"
-    :aria-label="ariaLabel">
+    :aria-label="ariaLabel"
+  >
     <div class="date-selector-cell-header"></div>
     <div class="date-selector-cell-body map-container">
       <MapSmall
@@ -11,14 +12,21 @@
         :warnings="warnings"
         :geometry-id="geometryId"
         :loading="loading"
-        :theme="theme" />
+        :theme="theme"
+      />
     </div>
     <div class="date-selector-cell-date">
       <div :class="`date-selector-text mobile-level-${severity}`">
-        <span v-if="staticDays" class="bold-text weekday-text">{{
+        <span
+          v-if="staticDays"
+          class="bold-text weekday-text"
+        >{{
           weekday
         }}</span>
-        <br v-if="staticDays" class="d-inline d-sm-none" />
+        <br
+          v-if="staticDays"
+          class="d-inline d-sm-none"
+        />
         {{ date }}
       </div>
     </div>
@@ -100,11 +108,13 @@ export default {
         : ''
     },
     ariaLabel() {
+      const landCount = this.regions?.land?.length || 0
+      const seaCount = this.regions?.sea?.length || 0
       return `${this.t(this.input.weekdayName)} ${this.input.day}.${
         this.input.month
-      }. ${this.t('warningsInEffect')} ${this.regions.land.length} ${this.t(
+      }. ${this.t('warningsInEffect')} ${landCount} ${this.t(
         'landAreas'
-      )} ${this.regions.sea.length} ${this.t('seaAreas')}.`
+      )} ${seaCount} ${this.t('seaAreas')}.`
     },
   },
 }

package/src/components/Days.vue

@@ -1,63 +1,88 @@
 <template>
-  <div class="row date-selector" :class="theme">
-    <b-tabs
+  <div
+    class="row date-selector"
+    :class="theme"
+  >
+    <div
       id="fmi-warnings-date-selector"
-      v-model="day"
-      :lazy="true"
-      :no-fade="true"
-      nav-class="fmi-warnings-date-nav"
-      nav-wrapper-class="fmi-warnings-date-wrapper"
-      :justified="true">
-      <b-tab
-        v-for="(n, i) in numberOfDays"
-        :key="i"
-        :active="i === day"
-        :title-link-class="['day', `day${i}`]">
-        <template #title>
-          <DaySmall
+      class="tabs"
+    >
+      <div class="fmi-warnings-date-wrapper">
+        <ul
+          class="nav nav-tabs fmi-warnings-date-nav"
+          role="tablist"
+        >
+          <li
+            v-for="(n, i) in numberOfDays"
+            :key="i"
+            class="nav-item"
+            role="presentation"
+          >
+            <button
+              :class="['nav-link', 'day', `day${i}`, { active: i === day }]"
+              type="button"
+              role="tab"
+              :aria-selected="i === day"
+              @click="day = i"
+            >
+              <DaySmall
+                :index="i"
+                :input="input[i]"
+                :visible-warnings="visibleWarnings"
+                :warnings="warnings"
+                :regions="regions[i]"
+                :geometry-id="geometryId"
+                :active="i === day"
+                :static-days="staticDays"
+                :loading="loading"
+                :theme="theme"
+                :language="language"
+              />
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="tab-content">
+        <div
+          v-for="(n, i) in numberOfDays"
+          :key="i"
+          :class="['tab-pane', { active: i === day, show: i === day }]"
+          role="tabpanel"
+        >
+          <DayLarge
+            v-if="i === day"
             :index="i"
             :input="input[i]"
             :visible-warnings="visibleWarnings"
             :warnings="warnings"
             :regions="regions[i]"
             :geometry-id="geometryId"
-            :active="i === day"
             :static-days="staticDays"
+            :time-offset="timeOffset"
             :loading="loading"
             :theme="theme"
-            :language="language" />
-        </template>
-        <DayLarge
-          :index="i"
-          :input="input[i]"
-          :visible-warnings="visibleWarnings"
-          :warnings="warnings"
-          :regions="regions[i]"
-          :geometry-id="geometryId"
-          :static-days="staticDays"
-          :time-offset="timeOffset"
-          :loading="loading"
-          :theme="theme"
-          :language="language"
-          :spinner-enabled="spinnerEnabled"
-          @loaded="onLoaded" />
-      </b-tab>
-    </b-tabs>
+            :language="language"
+            :spinner-enabled="spinnerEnabled"
+            @loaded="onLoaded"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import keycodes from '../mixins/keycodes'
 import DayLarge from './DayLarge.vue'
 import DaySmall from './DaySmall.vue'
-import keycodes from '../mixins/keycodes'
 
 export default {
   name: 'Days',
-  mixins: [keycodes],
   components: {
     DaySmall,
     DayLarge,
   },
+  mixins: [keycodes],
   props: {
     input: {
       type: Array,
@@ -120,18 +145,14 @@ export default {
     },
   },
   mounted() {
-    const button = Array.from(this.$el.querySelectorAll('button.day')).forEach(
-      (button) => {
-        button.addEventListener('keydown', this.switchDay, true)
-      }
-    )
+    Array.from(this.$el.querySelectorAll('button.day')).forEach((button) => {
+      button.addEventListener('keydown', this.switchDay, true)
+    })
   },
   beforeUnmount() {
-    const button = Array.from(this.$el.querySelectorAll('button.day')).forEach(
-      (button) => {
-        button.removeEventListener('keydown', this.switchDay, true)
-      }
-    )
+    Array.from(this.$el.querySelectorAll('button.day')).forEach((button) => {
+      button.removeEventListener('keydown', this.switchDay, true)
+    })
   },
   updated() {
     Array.from(this.$el.querySelectorAll('button.day')).forEach((button) => {
@@ -210,8 +231,13 @@ div#fmi-warnings-date-selector.tabs {
   flex-wrap: nowrap;
 }
 
+:deep(div.fmi-warnings-date-wrapper>ul.nav.nav-tabs.fmi-warnings-date-nav>li.nav-item) {
+  flex: 1;
+  margin: 0;
+}
+
 :deep(div.fmi-warnings-date-wrapper li.nav-item button.day) {
-  width: $day-small-width;
+  width: 100%;
   height: $day-small-height;
   border-radius: 0;
   border: 0;
@@ -222,8 +248,8 @@ div#fmi-warnings-date-selector.tabs {
 }
 
 :deep(button.day div.date-selector-cell) {
-  height: $day-small-height;
-  overflow: hidden;
+  min-height: $day-small-height;
+  overflow: visible;
 }
 
 :deep(button.day) {
@@ -298,7 +324,7 @@ div#fmi-warnings-date-selector.tabs {
 }
 
 :deep(div.tab-content) {
-  margin-top: 4px;
+  margin-top: 20px;
 }
 
 @media (max-width: 767px) {
@@ -318,6 +344,5 @@ div#fmi-warnings-date-selector.tabs {
   :deep(button.day div.date-selector-cell) {
     height: $day-small-mobile-height;
   }
-
 }
 </style>

package/src/components/DescriptionWarning.vue

@@ -1,21 +1,27 @@
 <template>
-  <div class="current-description-row" :class="theme">
-    <div class="current-description-image-cell" aria-hidden="true">
+  <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}`"
         :aria-label="`${warningLevel} ${warningTitle.toLowerCase()}${warningDetails}`"
       >
         <span
           :class="`symbol-text transform-rotate-${invertedRotation} region-warning-symbol-text`"
-          >{{ input.text }}</span
-        >
+        >{{ input.text }}</span>
       </div>
     </div>
     <div class="current-description-text-cell">
       <div class="description-info">
         <span
           class="warning-valid bold-text"
-          v-html="`${warningTitle} — ${validText} ${input.validInterval}`" />
+          v-html="`${warningTitle} — ${validText} ${input.validInterval}`"
+        />
         <span>
           {{ info }}
         </span>
@@ -30,8 +36,7 @@
             :class="['ext-link', { 'd-none': linkHidden }]"
             :href="`${input.link}`"
             target="_blank"
-            >{{ input.linkText }}</a
-          >
+          >{{ input.linkText }}</a>
         </div>
       </div>
     </div>
@@ -58,7 +63,9 @@ export default {
       if (this.input.text == null || this.input.direction == null) {
         return ''
       }
-      return ` (${this.input.text} m/s ${this.t("fromDirection")} ${this.input.direction + 180}°)`
+      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

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="grayScaleSelector" id="gray-scale-select-row" :class="theme">
+  <div
+    v-if="grayScaleSelector"
+    id="gray-scale-select-row"
+    :class="theme"
+  >
     <div id="gray-scale-select-text">{{ grayScaleText }}</div>
     <div id="gray-scale-select-container">
       <div
@@ -15,11 +19,12 @@
         @mousedown="preventEvents"
         @click="toggleGrayScale"
         @keydown.enter="toggleGrayScale"
-        @keydown.space="toggleGrayScale">
-          <span>
-            {{ toggleText }}
-          </span>
-        </div>
+        @keydown.space="toggleGrayScale"
+      >
+        <span>
+          {{ toggleText }}
+        </span>
+      </div>
     </div>
   </div>
 </template>