Improve responsiveness (small screen matches layout)

KilianBoute · Nov 16, 2023 · 4e099bd · 4e099bd
1 parent f92dde0
commit 4e099bd
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
     <title>weather app</title>
     <script src="https://kit.fontawesome.com/bd0e2c5b6f.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="styles.css">

diff --git a/scripts.js b/scripts.js
@@ -132,9 +132,19 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
             if(removeDisplay){
                 cardContainer.removeChild(removeDisplay);
             }
-            cardContainer.appendChild(displayHourlyWeather(locationData, i));
+            const newHourlyDisplay = displayHourlyWeather(locationData, i);
+            // To change layout depending on window width:
+            // var windowLarge = window.matchMedia("(min-width: 700px)");
+            // if(windowLarge.matches){
+            //     newHourlyDisplay.classList.add('hour-display');
+            // } else {
+            //     newHourlyDisplay.classList.add('hour-display-overlay')
+            // }
+            newHourlyDisplay.classList.add('hour-display');
+            cardContainer.appendChild(newHourlyDisplay);
 
         })
+        cardElement.tabindex=0;
         cardContainer.appendChild(cardElement);
 
     }
@@ -146,8 +156,8 @@ const displayHourlyWeather = (locationData, index) => {
     console.log(locationData);
 
     const hourlyDisplay = document.createElement('div');
-    hourlyDisplay.classList.add('hidden');
-    hourlyDisplay.classList.add('hour-display');
+
+
     let h = 0;
     for(let i = index*24; i < (index+1)*24; i++){
 
@@ -164,9 +174,11 @@ const displayHourlyWeather = (locationData, index) => {
         hourDiv.appendChild(hourDivTime);
         hourDiv.appendChild(hourDivIcon);
         hourDiv.appendChild(hourDivTemp);
+
         hourlyDisplay.appendChild(hourDiv);
+        hourDiv.tabindex=0;
         hourlyDisplay.id = 'hoursOfDay';
-
+        
         h++;
     }
     return hourlyDisplay;

diff --git a/styles.css b/styles.css
@@ -198,35 +198,26 @@ h3{
 }
 
 
-.hour-display{
-    margin-bottom: 3rem;
-}
-
-.hour-card{
-    display:flex;
-    flex-direction: column;
-
-}
-
-footer{
-    text-align: center;
-    padding-top: 2rem;
-    padding-bottom: 1rem;
-}
-
-@media (min-width: 750px){
-    #cards-container{
+#cards-container{
+    display: grid;
+    width: 100%;
+    gap: 1rem;
+    margin-top: 2rem;
     grid-template-columns: repeat(7, 200px);
     overflow-x: scroll;
-    }
-    .hour-display{
+}
+
+.hour-display{
         grid-column: 1 / 8;
         display: flex;
         gap: 1rem;
         padding: 1rem;
         background-color: rgba(6, 26, 64, .2);
         border-radius: 0 0 1rem 1rem;
         overflow-x: scroll;
+        animation: 1s ease-in-out linear;
+        margin-bottom: 3rem;
+        animation: 0.5s ease-in-out linear;
     }
 
     .selected{
@@ -236,6 +227,31 @@ footer{
         transform: scaleY(107.4%);
         overflow: hidden;
     }
+
+.hour-card{
+    display:flex;
+    flex-direction: column;
+
+}
+
+.hour-display-overlay{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    overflow-x: scroll;
+    background-color: red;
+}
+
+footer{
+    text-align: center;
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+}
+
+@media (min-width: 700px){
+
 }