Merge pull request #5 from SalaniLeo/Mobile

🔧 Added mobile version
SalaniLeo · Jun 16, 2024 · 0b8e110 · 0b8e110
2 parents c867023 + 3c66533
commit 0b8e110
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 9 deletions.
diff --git a/src/app.css b/src/app.css
@@ -211,7 +211,6 @@ button {
     max-height: 200px;
   }
   #weather {
-    display: flex;
     width: 90vw;
   }
 }

diff --git a/src/lib/maps/maps.svelte b/src/lib/maps/maps.svelte
@@ -19,6 +19,7 @@
     overflow-y: hidden;
     overflow-x: scroll;
   }
+
   .content {
     display: flex;
     flex-direction: column;
@@ -30,7 +31,7 @@
   :global(.map) {
     background-color: var(--secondary-color);
     overflow: hidden;
-    height: 657px;
+    max-height: 800px !important;
     width: 885px;
     border-radius: var(--border-radius-heavy);
     border-collapse: collapse;
@@ -44,7 +45,7 @@
   :global(#source) {
     width: 100%;
     position: relative;
-    height: 129.5%;
+    height: auto;
     transform: translateY(-15%);
     width: 108.75%;
     left: -6%;
@@ -63,6 +64,7 @@
     position: absolute;
     overflow: scroll;
   }
+
   :global(.semibackground) {
     background-color: var(--semi-opaque-color);
     z-index: 2;
@@ -71,6 +73,7 @@
     font-size: 20px;
     border-radius: var(--border-radius-medium);
   }
+
   :global(.topMapContainer) {
     top: 0px;
     z-index: 2;
@@ -81,34 +84,39 @@
     grid-column-gap: 0px;
     grid-row-gap: 0px;
   }
+
   :global(.bottomMapContainer) {
     position: relative;
     margin: 10px;
     padding: 7.5px;
     font-size: 20px;
     text-align: left;
-    top: 82%;
+    top: 680px;
     display: flex;
     align-items: center;
     gap: 20px;
     max-height: 25px;
   }
+
   :global(.timebar) {
     width: 100%;
   }
+
   :global(input[type="range"]) {
     width: 100%;
   }
+
   :global(.maptime) {
-    width: 60px;
     text-align: center;
     display: flex;
     justify-content: center;
   }
+
   :global(.showhide) {
     display: flex;
     justify-content: right;
   }
+
   :global(.showhidebtn) {
     border: none;
     outline: none;
@@ -117,15 +125,18 @@
     height: 40px;
     width: 40px;
   }
+
   :global(.showhidebtn i) {
     transform: translateY(3px);
   }
+
   :global(.maptitle) {
     position: relative;
     text-align: left;
     width: 100px;
     text-align: center;
   }
+
   :global(.playpausebtn) {
     background-color: rgba(0, 0, 0, 0);
     border: none;
@@ -135,4 +146,90 @@
     transform: translateY(2px);
     margin: 0.25rem;
   }
+
+  @media only screen and (max-width: 520px) {
+    .maps {
+      margin: 0px;
+      max-width: 100%;
+      height: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+      white-space: nowrap;
+      padding: 6px;
+      padding-right: 10px;
+      -webkit-overflow-scrolling: touch;
+    }
+    .content {
+      margin: 0px;
+      margin: 0.5rem 0.25rem;
+      margin-bottom: 3rem;
+    }
+    :global(.map) {
+      width: auto;
+      margin: 0px;
+      padding: 10px;
+      border-radius: var(--border-radius-medium);
+    }
+    :global(.showhide) {
+      margin: 0px;
+      display: unset;
+    }
+    :global(.showhidebtn) {
+      margin: 0px;
+      float: right;
+      width: 90%;
+      padding: 0px;
+      height: 60px !important;
+    }
+    :global(#source) {
+      margin: 0px;
+      border-radius: var(--border-radius-medium);
+      position: relative;
+      transform: unset;
+      height: 400px;
+      width: 100%;
+      left: 0px;
+    }
+    :global(#sourceEurope) {
+      width: 100%;
+      margin: 0px;
+      height: auto;
+      left: 0;
+    }
+    :global(#overlay) {
+      margin: 0px;
+      border-radius: var(--border-radius-medium);
+    }
+    :global(.bottomMapContainer) {
+      margin: 0px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      top: auto;
+      text-align: center;
+      flex-direction: row;
+      max-height: none;
+    }
+    :global(.topMapContainer) {
+      margin: 0px;
+    }
+    :global(.showhide) {
+      margin: 0px;
+      justify-content: center;
+    }
+    :global(.maptitle) {
+      margin: 0px;
+      width: auto;
+      text-align: center;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    :global(.maptime) {
+      width: 100px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
 </style>
diff --git a/src/lib/maps/radar.svelte b/src/lib/maps/radar.svelte
@@ -10,7 +10,7 @@
 
   let ora = new Date().getUTCHours() - 4;
   let showmap = false;
-  const mapheight = ["657px", "60px"];
+  const mapheight = ["fit-content", "60px"];
   let playpause = true;
   let value = "0";
   let sourceIndex = 0;

diff --git a/src/lib/maps/satellite.svelte b/src/lib/maps/satellite.svelte
@@ -10,7 +10,7 @@
 
   let ora = new Date().getUTCHours() - 4;
   let showmap = true;
-  const mapheight = ["657px", "60px"];
+  const mapheight = ["fit-content", "60px"];
   let playpause = true;
   let value = "0";
   let sourceIndex = 0;
@@ -52,8 +52,12 @@
       stopLoop();
       const { url, time } = sources[sourceIndex];
       source = url;
-      const hours = time.substring(0, 2);
+      let hours = time.substring(0, 2);
       const minutes = time.substring(2, 4);
+      console.log(hours);
+      if (parseInt(hours) + offset >= 24) {
+        hours = String(parseInt(hours) - 24);
+      }
       sourceTime = `${parseInt(hours, 10) + offset}:${minutes}`;
     }
   }

diff --git a/src/lib/maps/satelliteEurope.svelte b/src/lib/maps/satelliteEurope.svelte
@@ -10,7 +10,7 @@
 
   let ora = new Date().getUTCHours() - 4;
   let showmap = false;
-  const mapheight = ["657px", "60px"];
+  const mapheight = ["fit-content", "60px"];
   let playpause = true;
   let value = "0";
   let sourceIndex = 0;

diff --git a/src/routes/weather.svelte b/src/routes/weather.svelte
@@ -116,6 +116,7 @@
   #weather {
     display: flex;
     min-width: 300px;
+    padding: 7.5px;
   }
   #location {
     text-wrap: pretty;