Merge pull request #127 from zirreal/master

layout changes
airalab · Apr 23, 2024 · 87a9471 · 87a9471
2 parents ece2b23 + e75481f
commit 87a9471
Show file tree

Hide file tree

Showing 40 changed files with 1,713 additions and 761 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "moment": "^2.29.4",
     "pinia": "^2.0.23",
     "socket.io-client": "^2.3.0",
+    "vite-plugin-mkcert": "^1.17.5",
     "vite-plugin-pwa": "^0.19.7",
     "vue": "^3.2.38",
     "vue-highcharts": "^0.2.0",

diff --git a/src/assets/fonts/notosansdisplay-black-webfont.woff b/src/assets/fonts/notosansdisplay-black-webfont.woff
diff --git a/src/assets/fonts/notosansdisplay-black-webfont.woff2 b/src/assets/fonts/notosansdisplay-black-webfont.woff2
diff --git a/src/assets/fonts/notosansdisplay-medium-webfont.woff b/src/assets/fonts/notosansdisplay-medium-webfont.woff
diff --git a/src/assets/fonts/notosansdisplay-medium-webfont.woff2 b/src/assets/fonts/notosansdisplay-medium-webfont.woff2
diff --git a/src/assets/images/bookmark.svg b/src/assets/images/bookmark.svg
diff --git a/src/assets/images/sensors-cy-app.png b/src/assets/images/sensors-cy-app.png
diff --git a/src/assets/images/sensors-world-app.png b/src/assets/images/sensors-world-app.png
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
@@ -2,6 +2,7 @@
 body {
   font-size: var(--font-size);
   font-family: var(--font-family--normal);
+  background-color: var(--main-bg)
 }
 
 body *::selection {
@@ -152,7 +153,7 @@ input {
 
 .title {
   margin: 0;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 700;
   transition: color 0.33s ease-in-out, background-color 0.33s ease-in-out;
 }
@@ -320,6 +321,7 @@ input {
   overflow-y: auto;
 }
 
+
 /* header popup styles */
 
 .header .popup__content h3  {
@@ -350,6 +352,22 @@ input {
   text-align: left !important;
 }
 
+.header__close-popup {
+  align-self: flex-end;
+  width: 20px;
+  height: 20px;
+  margin-bottom: var(--gap);
+  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="%232D2C2C"/></svg>');
+  background-position: center;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+}
+
+.dark .header__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 */
 

diff --git a/src/assets/styles/fonts.css b/src/assets/styles/fonts.css
@@ -1,3 +1,13 @@
+@font-face {
+  font-family: 'Noto Sans';
+  src: url('../fonts/notosansdisplay-black-webfont.woff2') format('woff2');
+  src: url('../fonts/notosansdisplay-black-webfont.woff') format('woff');
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}
+
+
 @font-face {
   font-family: 'Noto Sans';
   src: url('../fonts/notosans-bold-webfont.woff2') format('woff2');
@@ -7,11 +17,21 @@
   font-style: normal;
 }
 
+
+@font-face {
+  font-family: 'Noto Sans';
+  src: url('../fonts/notosansdisplay-medium-webfont.woff2') format('woff2');
+  src: url('../fonts/notosansdisplay-medium-webfont.woff') format('woff');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
 @font-face {
   font-family: 'Noto Sans';
   src: url('../fonts/notosans-regular-webfont.woff2') format('woff2');
   src: url('../fonts/notosans-regular-webfont.woff') format('woff');
-  font-weight: 300;
+  font-weight: 400;
   font-display: swap;
   font-style: normal;
 }
diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
@@ -4,11 +4,15 @@ body {
   --color-middle-gray: #B6BDC4;
   --color-light-gray: #d5d3d3;
   --color-dark: #000;
-  --color-blue: #03a5ed;
+  --color-blue: #03a5ed; 
+  --color-teal: #12bfcc;
   --color-green: #60bc2a;
   --color-red: #fc0202; 
+  --color-bright-red: #ff4d00;
   --color-yellow: #f5ff00;
   --color-orange: #ff9d00;
+  --color-purple: #7a00da;
+  --color-navy: #2a5cbc;
 
   --color-link: var(--color-blue);
   --color-link-hover: var(--color-green);
@@ -19,11 +23,14 @@ body {
   --gap: 1rem;
 
   --sensor-popup-bg: #ffffff;
+
+  --main-bg: #ffffff;
 }
 
 body.dark {
   --color-light: #000;
   --color-dark: #fff;
 
   --sensor-popup-bg: #5a5a5a;
-}
+  --main-bg:  #2f2f2f;
+}
diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -120,6 +120,10 @@ export default {
   filter: grayscale(100%);
 }
 
+.leaflet-control-attribution.leaflet-control {
+  font-size: calc(var(--font-size) * 0.5);
+}
+
 @media screen and (max-width: 680px) {
   .leaflet-bottom {
     bottom: 0px;

diff --git a/src/components/colorfulScale/ColorfulScale.vue b/src/components/colorfulScale/ColorfulScale.vue
@@ -1,53 +1,191 @@
 <template>
   <div class="colorful-scale">
     <ColorfulScaleItem
-      v-for="color in colors"
-      :key="color.color"
-      :color="color"
-      @click="open"
-      :isActive="isActive"
+      v-for="measure in measurementsColors"
+      :key="measure.id"
+      :measure="measure"
+      :type="type"
     />
-
-    <div class="measures-popup popup-wrapper">
-      <MeasuresPopup
-        :type="type"
-        :isActive="isActive"
-        @toggleIsActive="close"
-      />
-    </div>
   </div>
 </template>
 
 <script>
 import { useStore } from "@/store";
-import MeasuresPopup from "../measures/MeasuresPopup.vue";
 import ColorfulScaleItem from "./ColorfulScaleItem.vue";
 
 export default {
-  components: { ColorfulScaleItem, MeasuresPopup },
+  components: { ColorfulScaleItem },
 
   props: ["type"],
 
   data() {
     return {
-      colors: [
+      measurementsColors: [
+        {
+          id: 0,
+          name: "PM10",
+          sub: "10",
+          colors: [
+            {
+              color: "green",
+              text: "0-50 µg/m³",
+            },
+            {
+              color: "blue",
+              text: "51-100 µg/m³",
+            },
+            {
+              color: "orange",
+              text: "101-250 µg/m³",
+            },
+            {
+              color: "red",
+              text: "251-350 µg/m³",
+            },
+            {
+              color: "purple",
+              text: "> 351 µg/m³",
+            },
+          ],
+        },
+        {
+          id: 1,
+          name: "PM2.5",
+          sub: "2.5",
+          colors: [
+            {
+              color: "green",
+              text: "0-35 µg/m³",
+            },
+            {
+              color: "blue",
+              text: "36-70 µg/m³",
+            },
+            {
+              color: "orange",
+              text: "70-150 µg/m³",
+            },
+            {
+              color: "red",
+              text: "151-250 µg/m³",
+            },
+            {
+              color: "purple",
+              text: "> 251 µg/m³",
+            },
+          ],
+        },
+        {
+          id: 2,
+          name: "CO",
+          colors: [
+            {
+              color: "green",
+              text: "0-2 mg/m³",
+            },
+            {
+              color: "blue",
+              text: "2-4 mg/m³",
+            },
+            {
+              color: "red",
+              text: "4-14 mg/m³",
+            },
+            {
+              color: "purple",
+              text: "> 14 mg/m³",
+            },
+          ],
+        },
+        {
+          id: 3,
+          name: "GO",
+          colors: [
+            {
+              color: "green",
+              text: "0.01 µSv/h and below",
+            },
+            {
+              color: "blue",
+              text: "0.01-0.1 µSv/h",
+            },
+            {
+              color: "orange",
+              text: "0.1-1 µSv/h",
+            },
+            {
+              color: "red",
+              text: "1-10 µSv/h",
+            },
+            {
+              color: "purple",
+              text: "> 10 µSv/h",
+            },
+          ],
+        },
         {
-          color: "green",
-          icon: "smile_icon",
-          text: "Fine",
+          id: 4,
+          name: "Tmp",
+          colors: [
+            {
+              color: "purple",
+              text: "-10°C / 14°F and below ",
+            },
+            {
+              color: "navy",
+              text: "-10 to 0°C / 14 to 32°F",
+            },
+            {
+              color: "blue",
+              text: "0 to 10°C / 32-50°F ",
+            },
+            {
+              color: "green",
+              text: "10 to 25°C / 50-77°F",
+            },
+            {
+              color: "orange",
+              text: "25°C / 77°F and above",
+            },
+          ],
         },
         {
-          color: "orange",
-          icon: "neutral_icon",
-          text: "May need attention",
+          id: 5,
+          name: "HM",
+          colors: [
+            {
+              color: "red",
+              text: "< 30%",
+            },
+            {
+              color: "orange",
+              text: "30 - 40% ",
+            },
+            {
+              color: "blue",
+              text: "40 - 60%",
+            },
+            {
+              color: "navy",
+              text: "60 - 70%",
+            },
+            {
+              color: "purple",
+              text: "> 70%",
+            },
+          ],
         },
         {
-          color: "red",
-          icon: "upset_icon",
-          text: "Be careful",
+          id: 6,
+          name: "NH3",
+          sub: "3",
+        },
+        {
+          id: 7,
+          name: "NO2",
+          sub: "2",
         },
       ],
-      isActive: false,
       store: useStore(),
     };
   },
@@ -69,24 +207,6 @@ export default {
 .colorful-scale {
   position: relative;
   width: max-content;
-  z-index: 18;
-}
-
-.measures-popup {
-  top: -20px;
-  left: -10px;
-  z-index: 0;
-}
-
-@media screen and (max-width: 680px) {
-}
-
-@media screen and (max-width: 400px) {
-  .measures-popup {
-    top: calc(var(--gap) * 6);
-    left: var(--gap);
-    right: 3rem;
-    position: fixed;
-  }
+  z-index: 7;
 }
 </style>