Merge pull request #129 from zirreal/master

adjust interface better for smartphones

src/assets/styles/base.css

@@ -352,7 +352,8 @@ input {
   text-align: left !important;
 }
 
-.header__close-popup {
+.header__close-popup, 
+.footer__close-popup {
   align-self: flex-end;
   width: 20px;
   height: 20px;
@@ -364,13 +365,33 @@ input {
   cursor: pointer;
 }
 
-.dark .header__close-popup {
+.dark .header__close-popup,
+.dark .footer__close-popup {
   background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6894 0.321199C13.2753 -0.0929084 12.6064 -0.0929084 12.1923 0.321199L7 5.50284L1.80774 0.31058C1.39363 -0.103527 0.724687 -0.103527 0.31058 0.31058C-0.103527 0.724687 -0.103527 1.39363 0.31058 1.80774L5.50284 7L0.31058 12.1923C-0.103527 12.6064 -0.103527 13.2753 0.31058 13.6894C0.724687 14.1035 1.39363 14.1035 1.80774 13.6894L7 8.49716L12.1923 13.6894C12.6064 14.1035 13.2753 14.1035 13.6894 13.6894C14.1035 13.2753 14.1035 12.6064 13.6894 12.1923L8.49716 7L13.6894 1.80774C14.0929 1.40425 14.0929 0.724687 13.6894 0.321199Z" fill="white"/></svg>');
 }
 
 
 /* POPUP end */
 
+/* overlay */
+.overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 15;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.overlay.open {
+  opacity: 1;
+  visibility: visible;
+  transition: all 0.3s;
+}
+
 /* DATE SELECT */
 .sensors-dateselect input[type="date"] {
   padding: 0.2rem 0.5rem;

src/components/colorfulScale/ColorfulScale.vue

@@ -5,6 +5,7 @@
       :key="measure.id"
       :measure="measure"
       :type="type"
+      :noColors="noColors"
     />
   </div>
 </template>
@@ -16,7 +17,7 @@ import ColorfulScaleItem from "./ColorfulScaleItem.vue";
 export default {
   components: { ColorfulScaleItem },
 
-  props: ["type"],
+  props: ["type", "noColors"],
 
   data() {
     return {

src/components/colorfulScale/ColorfulScaleItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <!-- <div
     class="colorful-scale__wrapper"
     v-if="
       type !== 'temperature'
@@ -16,13 +16,7 @@
         >Learn more</router-link
       >
     </div>
-    <span
-      v-for="color in measure.colors"
-      :key="color.color"
-      :class="`colorful-scale__text colorful-scale__text--${color.color}`"
-      >{{ color.text }}</span
-    >
-  </div>
+  </div> -->
   <div
     class="colorful-scale__wrapper colorful-scale__wrapper--popup"
     v-if="!type"

src/components/footer/Footer.vue

@@ -1,20 +1,20 @@
 <template>
   <footer class="footer">
+    <div class="overlay" :class="{ open: isMeasuresPopupOpen }"></div>
     <div class="container">
-      <a
-        href="javascript:;"
-        class="footer__mobile-menu"
-        @click="toggleMobileMenu"
-        :class="{ active: isActiveMenu }"
-      >
-        <font-awesome-icon icon="fa-solid fa-sliders" />
-      </a>
-
       <div id="dateSelect" class="sensors-dateselect">
+        <a
+          href="javascript:;"
+          class="footer__mobile-menu"
+          @click="toggleMobileMenu"
+          :class="{ active: isActiveMenu }"
+        >
+          <font-awesome-icon icon="fa-solid fa-sliders" />
+        </a>
         <Measures :current="type.toLowerCase()" />
         <div tabindex="0" class="footer-measures-popup">
-          <details :open="!isMeasuresPopupOpen">
-            <summary @click="toggleMeasurePopup">
+          <details ref="details" @toggle="toggleMeasurePopup">
+            <summary>
               <svg
                 width="24"
                 height="24"
@@ -36,7 +36,7 @@
               </svg>
             </summary>
 
-            <div class="popup-wrapper">
+            <div class="popup-wrapper measures-popup-wrapper">
               <MeasuresPopup @toggleClose="toggleMeasurePopup" />
             </div>
           </details>
@@ -227,8 +227,15 @@ export default {
       this.toggleOpen("isActiveMenu");
     },
 
-    toggleMeasurePopup() {
-      this.toggleOpen("isMeasuresPopupOpen");
+    toggleMeasurePopup(e) {
+      if (
+        e.target.classList.contains("footer__close-popup") &&
+        this.$refs.details.open
+      ) {
+        this.$refs.details.open = false;
+      } else {
+        this.toggleOpen("isMeasuresPopupOpen");
+      }
     },
 
     getHistory() {
@@ -285,6 +292,7 @@ export default {
   max-width: 505px;
   width: 100%;
   background-color: var(--color-light);
+  z-index: 16;
 }
 
 .footer-measures-popup summary {
@@ -317,6 +325,11 @@ export default {
   fill: #fff;
 }
 
+.footer-measures-popup svg {
+  width: 35px;
+  height: 34px;
+}
+
 .sensors-dateselect__history {
   display: flex;
   align-items: center;
@@ -350,9 +363,9 @@ export default {
   position: relative;
   display: inline-block;
   width: 32px;
-  height: 34px;
+  height: 28px;
   margin-right: 35px;
-  padding: 0.2rem 1.2rem;
+  /* padding: 0.2rem 1.2rem; */
   /* z-index: 11; */
 }
 
@@ -401,16 +414,14 @@ export default {
   }
 
   .footer-measures-popup {
-    order: -1;
-    margin-right: 20px;
+    margin-right: 10px;
   }
 
   .footer .sensors-dateselect {
-    margin-right: 20px;
+    margin-right: 10px;
   }
 
   .footer .sensors-dateselect__calendar {
-    order: 1;
     margin-right: auto;
   }
 
@@ -419,6 +430,7 @@ export default {
   }
 
   .sensors__history {
+    height: 25px;
     border: 1px solid transparent;
     z-index: 2;
     order: 2;
@@ -493,7 +505,7 @@ export default {
 @media screen and (max-width: 640px) {
   .footer-measures-popup .popup-wrapper {
     right: var(--gap);
-    top: calc(var(--gap) * 7);
+    top: calc(var(--gap) * 4);
     max-width: unset;
     width: unset;
   }
@@ -503,36 +515,72 @@ export default {
   .footer {
     z-index: 8;
   }
+}
 
-  .footer .sensors__history {
-    padding: 4px 10px;
+@media screen and (max-width: 460px) {
+  .footer .container {
+    display: flex;
+    align-items: center;
   }
-}
 
-@media screen and (max-width: 450px) {
+  .footer__mobile-menu {
+    position: static;
+    order: 2;
+    margin-right: 20px;
+  }
   .footer .sensors-dateselect {
-    flex-direction: column;
+    /* flex-direction: column; */
+    justify-content: center;
     align-items: flex-start;
-    gap: var(--gap);
   }
 
   .footer .sensors__history {
+    position: static;
     padding: 0;
+    margin: 0;
+    margin-right: 10px;
+  }
+
+  .footer .sensors-dateselect__calendar {
+    margin-right: 0;
+    order: 5;
+    align-self: center;
   }
 
   .footer .sensors-dateselect input[type="date"] {
-    padding: 0.2rem 0.6rem;
-    min-width: 150px;
+    padding: 0 0.3rem;
+    margin: 0;
+    min-width: 60px;
+    font-size: 0.8rem;
+  }
+
+  .footer-measures-popup svg {
+    width: 30px;
+    height: 33px;
+    margin-right: 15px;
   }
 
-  .sensors-dateselect__calendar-button {
-    top: 7px;
+  .sensors-dateselect .sensors-dateselect__calendar-button {
+    display: none;
+    top: 3px;
     right: 20px;
   }
 
+  .sensors-dateselect__calendar-button svg {
+    width: 20px;
+    height: 15px;
+  }
+
   .footer__mobile-menu {
     left: calc(var(--gap) * 2 + 32px);
     bottom: 26px;
   }
 }
+
+@media screen and (max-width: 355px) {
+  .footer .container {
+    transform: scale(0.9);
+    padding-bottom: 0;
+  }
+}
 </style>

src/components/footer/MeasuresPopup.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="measuresPopup" class="sensors-panel container">
-    <button class="header__close-popup" @click="$emit('toggleClose')"></button>
+    <button
+      class="footer__close-popup"
+      @click.stop="$emit('toggleClose', $event)"
+    ></button>
     <div class="popup__content">
       <h2>{{ $t("measures.popupTitle") }}</h2>
       <ColorfulScaleItem
@@ -24,6 +27,7 @@ import ColorfulScaleItem from "../colorfulScale/ColorfulScaleItem.vue";
 
 export default {
   components: { ColorfulScaleItem },
+  emits: ["toggleClose"],
 
   data() {
     return {
@@ -235,7 +239,7 @@ export default {
   }
 
   #measuresPopup .popup__content {
-    max-height: calc(100vh - 300px);
+    max-height: calc(100vh - 230px);
   }
 }
 </style>