Add a new component: Info and improve styles

- Create Info boxes (messages with icons) - Multiples types: (default), Warning, Help
c2corg · Dec 9, 2021 · 550300a · 550300a
1 parent bd4d4f5
commit 550300a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 68 deletions.
diff --git a/src/components/yeti/Info.vue b/src/components/yeti/Info.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="info-text mt-3 mb-3 px-3" :class="'is-' + type">
+    <fa-icon :icon="icon" class="info-icon mt-1 ml-1" />
+    <div class="info-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+    },
+  },
+  data() {
+    return {
+      icons: {
+        info: 'info-circle',
+        warning: 'exclamation-circle',
+        help: 'question-circle',
+      },
+    };
+  },
+  computed: {
+    icon() {
+      return this.icons[this.type];
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/sass/variables.scss';
+
+.info-text {
+  font-size: 0.85em;
+}
+.is-info {
+  color: $primary;
+}
+.is-warning {
+  color: $red;
+}
+.is-help {
+  background: $grey-lightest;
+  color: $grey-dark;
+  border-radius: 4px;
+  padding: 0.75rem;
+  margin-bottom: 1.5rem !important;
+}
+.info-icon {
+  float: left;
+}
+.info-content {
+  margin-left: 2rem;
+}
+</style>
diff --git a/src/components/yeti/Panel.vue b/src/components/yeti/Panel.vue
@@ -50,7 +50,7 @@ export default {
   strong,
   dt {
     font-weight: bold;
-    color: $grey-dark;
+    color: inherit;
   }
 
   .yeti-subpanel + .yeti-subpanel {
@@ -61,36 +61,5 @@ export default {
     list-style: disc outside;
     margin-left: 2em;
   }
-
-  .yetiform-info {
-    font-size: 0.8em;
-    opacity: 0.75;
-  }
-
-  .yetiform-note {
-    position: relative;
-    font-size: 0.9em;
-    padding: 1em;
-    padding-left: 4em;
-    margin-bottom: 2em;
-    background-color: $white-ter;
-    border-radius: 2px;
-  }
-
-  .yetiform-note::before {
-    content: '?';
-    position: absolute;
-    top: 1em;
-    left: 1em;
-    color: white;
-    font-size: 1.14em;
-    font-weight: bold;
-    text-align: center;
-    height: 1.375em;
-    width: 1.375em;
-    line-height: 1.4em;
-    background-color: rgba(0, 60, 136, 0.5);
-    border-radius: 2px;
-  }
 }
 </style>
diff --git a/src/components/yeti/SubPanelBra.vue b/src/components/yeti/SubPanelBra.vue
@@ -107,7 +107,7 @@
           </dl>
         </div>
         <div v-else>
-          <p class="column yetiform-info" v-translate>Massifs could not be loaded</p>
+          <info class="column" v-translate>Massifs could not be loaded</info>
         </div>
       </template>
     </dropdown-content>
@@ -117,11 +117,12 @@
 <script>
 import Counter from '@/components/yeti/Counter.vue';
 import DropdownContent from '@/components/yeti/DropdownContent.vue';
+import Info from '@/components/yeti/Info.vue';
 import SubPanelTitle from '@/components/yeti/SubPanelTitle.vue';
 import Yetix from '@/components/yeti/Yetix';
 
 export default {
-  components: { Counter, DropdownContent, SubPanelTitle },
+  components: { Counter, DropdownContent, Info, SubPanelTitle },
   data() {
     return {
       showMountainsList: false,

diff --git a/src/components/yeti/SubPanelCourse.vue b/src/components/yeti/SubPanelCourse.vue
@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="ml-5 mb-5">
-        <p class="yetiform-info is-italic is-marginless" v-translate>Lines chunks</p>
+        <p class="is-size-7 is-italic mb-1 has-text-grey" v-translate>Lines chunks</p>
         <features-list :features="features" />
       </div>
       <sub-panel-title><span v-translate>Export</span></sub-panel-title>
@@ -60,7 +60,7 @@
           <button class="button is-primary" @click="downloadCourse" v-translate>Export route</button>
         </div>
       </div>
-      <div class="yetiform-note mt-5">
+      <info type="help">
         <p v-translate>Drawing tips</p>
         <ul class="content-ul">
           <li><strong v-translate translate-context="yeti">Draw</strong> <span v-translate>new lines chunks</span></li>
@@ -85,6 +85,7 @@
           <li><strong v-translate>Delete a line chunk</strong></li>
           <li><strong v-translate>Delete route</strong> <span v-translate>to start or load a new one</span></li>
         </ul>
+      </info>
       </div>
     </div>
     <div v-else>
@@ -102,9 +103,9 @@
         <div class="control upload-button">
           <input ref="gpxFileInput" type="file" @change="uploadGpx" accept=".gpx" />
         </div>
-        <div class="yetiform-note mt-5">
+        <info type="help" class="mt-5">
           <p><strong v-translate>Draw right on the map</strong> <span v-translate>to start a new route</span></p>
-        </div>
+        </info>
       </div>
     </div>
   </div>
@@ -114,13 +115,14 @@
 import { format } from 'date-fns';
 
 import FeaturesList from '@/components/yeti/FeaturesList.vue';
+import Info from '@/components/yeti/Info.vue';
 import SubPanelTitle from '@/components/yeti/SubPanelTitle.vue';
 import Yetix from '@/components/yeti/Yetix';
 import ol from '@/js/libs/ol';
 import utils from '@/js/utils';
 
 export default {
-  components: { FeaturesList, SubPanelTitle },
+  components: { FeaturesList, Info, SubPanelTitle },
   data() {
     return {
       newFeaturesTitle: false,

diff --git a/src/components/yeti/SubPanelMethods.vue b/src/components/yeti/SubPanelMethods.vue
@@ -16,7 +16,7 @@
           />
           <label :for="'c2c-method-' + item" class="yetitab-label" @click="warnAboutMethodBra(item)">
             {{ methods[item][0] }}
-            <span class="yetiform-info">{{ methods[item][1] }}</span>
+            <span class="is-size-7" :class="{ 'has-text-grey': item !== method.type }">{{ methods[item][1] }}</span>
           </label>
         </div>
       </div>
@@ -30,12 +30,12 @@
           (MRD), you do not have to enter any parameters other than the danger level(s) given by the avalanche bulletin.
         </span>
       </p>
-      <div class="yetiform-note">
+      <info type="help">
         <p v-translate>
           As the name suggests, this method is intended for beginners. Therefore, the safety margin must be particularly
           important. No parameter other than the danger level is specified. Orientation is ignored.
         </p>
-      </div>
+      </info>
 
       <table class="yetiform-danger">
         <tr>
@@ -77,22 +77,22 @@
       <input-orientation
         :value="method.orientation"
         @input="onChange($event, 'orientation')"
-        class="has-text-centered"
+        class="has-text-centered mb-2"
       />
 
-      <p v-if="method.orientation.length != 0" class="yetiform-info">
+      <info v-if="method.orientation.length != 0">
         <span v-translate key="tr1">Orientations</span>: {{ method.orientation.join(', ') }}
-      </p>
-      <p v-else class="yetiform-info">
+      </info>
+      <info type="warning" v-else>
         <span v-translate key="tr2">No orientation selected</span>
-      </p>
+      </info>
 
-      <div class="yetiform-note">
+      <info type="help">
         <p v-translate>
           Danger level from the avalanche bulletin applies to all orientations. The compass rose distinguishes the most
           critical sectors presenting an increased risk.
         </p>
-      </div>
+      </info>
 
       <table class="yetiform-danger">
         <tr class="multiline">
@@ -160,32 +160,32 @@
         </li>
       </ul>
 
-      <p v-if="method.potentialDanger" class="yetiform-info">
+      <info v-if="method.potentialDanger">
         <span v-translate key="tr1">Hazard potential:</span>
         {{ method.potentialDanger }}
         (<span v-translate>Danger level:</span> {{ bra.high }})
-      </p>
-      <p v-else class="yetiform-info">
+      </info>
+      <info type="warning" v-else>
         <span v-translate key="tr2">No selected hazard potential. Set danger level first.</span>
-      </p>
+      </info>
 
-      <div class="yetiform-note">
+      <info type="help">
         <p v-translate>
           The hazard potential is calculated from the danger level of the avalanche bulletin. It can be fine-tuned by
           selecting a potential within the danger level’s corresponding range. For example: the avalanche bulletin
           evokes a danger 3 just after a period in danger 4. We can then indicate a hazard potential of 12 instead of 8.
         </p>
-      </div>
+      </info>
 
       <p>
         <input-checkbox :value="method.wetSnow" @input="onChange($event, 'wetSnow')">
           <span v-translate>Wet snow: orientation not taken into account</span>
         </input-checkbox>
       </p>
 
-      <div class="yetiform-note">
+      <info type="help">
         <p v-translate>Be careful, in wet snow, no factor to reduce orientation or attendance can be applied.</p>
-      </div>
+      </info>
 
       <h3 class="title is-3" v-translate>Group</h3>
 
@@ -204,7 +204,7 @@
         </li>
       </ul>
 
-      <div class="yetiform-note">
+      <info type="help">
         <p v-translate>Group size</p>
         <ul class="content-ul">
           <li v-translate>Large group = 5 people and more</li>
@@ -215,7 +215,7 @@
           <li v-translate>10 meters minimum while ascending</li>
           <li v-translate>50 meters while descending</li>
         </ul>
-      </div>
+      </info>
 
       <p v-translate>
         The “slope traveled frequently” factor is not taken into account by the application, as it is often difficult to
@@ -226,6 +226,7 @@
 </template>
 
 <script>
+import Info from '@/components/yeti/Info.vue';
 import SubPanelTitle from '@/components/yeti/SubPanelTitle.vue';
 import Yetix from '@/components/yeti/Yetix';
 
@@ -241,7 +242,7 @@ const DANGER = {
 };
 
 export default {
-  components: { SubPanelTitle },
+  components: { Info, SubPanelTitle },
   data() {
     return {
       methods: {
@@ -332,12 +333,9 @@ table:not(:last-child) {
   width: 100%;
   table-layout: fixed;
   color: $dark;
-  background-color: $white-ter;
 
-  tr {
-    border: 1px solid $white;
-    border-left: 0;
-    border-right: 0;
+  tr + tr {
+    border-top: 1px solid $grey-lighter;
   }
 
   td {

diff --git a/src/components/yeti/Tabs.vue b/src/components/yeti/Tabs.vue
@@ -13,19 +13,17 @@
           @click.prevent="setActiveTab(i)"
           @keydown="setActiveTabKeyboard($event, i)"
         >
-          {{ tab }} <counter is-primary v-if="i === 1 && hasFeatures">1</counter>
+          {{ tab }} <fa-icon icon="check-circle" v-if="i === 1 && hasFeatures" class="ml-1" />
         </a>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-import Counter from '@/components/yeti/Counter.vue';
 import Yetix from '@/components/yeti/Yetix';
 
 export default {
-  components: { Counter },
   props: {
     tabs: {
       type: Array,