From d7b4db3201781f52dba314db2114be1d6aab2bd9 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 19:24:56 -0600 Subject: [PATCH 01/37] prepare branch for staging --- scripts/updateHourly.js | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/updateHourly.js b/scripts/updateHourly.js index 605ec89..9701a60 100644 --- a/scripts/updateHourly.js +++ b/scripts/updateHourly.js @@ -58,7 +58,6 @@ export function updateHourly(weatherData, weatherCodeToImageMap) { Weather icon

${kelvinToFahrenheit(forecast.temp)}°F

`; - const currentSetRiseUnix = riseSet[riseSet.length - 1]; const currentSetRiseHour = new Date(currentSetRiseUnix * 1000) From 25a07342e316acefcacf29f522f64938603dc4b1 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 19:29:38 -0600 Subject: [PATCH 02/37] Change api base url to back end staging url --- scripts/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/script.js b/scripts/script.js index 4e282ec..8c30e9d 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -4,7 +4,7 @@ import { updateTime } from './timeDate.js'; import { updateCurrent } from './updateCurrent.js'; // This is unsecure fix at some point!!! -const API_BASE_URL = 'https://weather-app-server-d5459d7e5648.herokuapp.com' +const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp.com'; async function startWeather(latitude, longitude) { const response = await fetch(`${API_BASE_URL}/?coords=${latitude},${longitude}`); From 97c6dc59db0545a6067a868fd6bd5ab38880886a Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 19:42:09 -0600 Subject: [PATCH 03/37] Fix mobile.js error --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index ca2f9db..9998088 100644 --- a/index.html +++ b/index.html @@ -55,6 +55,6 @@

Wilson's Weather

- + From a8b835e942c1714ecfbe1b952f35eec08da01d11 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 19:47:22 -0600 Subject: [PATCH 04/37] Add console logs for debugging ip and location bug --- scripts/script.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/script.js b/scripts/script.js index 8c30e9d..7957cad 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -31,6 +31,7 @@ if (navigator.geolocation) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; const weatherData = await startWeather(latitude, longitude); + console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); }, @@ -40,6 +41,7 @@ if (navigator.geolocation) { try { const ip = await getIp(); const weatherData = await ipWeather(ip); + console.log(ip, weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { @@ -53,6 +55,7 @@ if (navigator.geolocation) { try { const ip = await getIp(); const weatherData = await ipWeather(ip); + console.log(ip, weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { From ee7420441aae62e951e075d6f6db20dd288718a1 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 19:57:05 -0600 Subject: [PATCH 05/37] script js fetch reponses include credintials --- .gitignore | 1 + scripts/script.js | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..600d2d3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index 7957cad..1e4f1d6 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -15,11 +15,15 @@ async function startWeather(latitude, longitude) { // Create get ip function async function getIP() { - return await fetch(`${API_BASE_URL}/get-ip`); + return await fetch(`${API_BASE_URL}/get-ip`, { + credentials: 'include' + }); } async function ipWeather(ip) { - const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`); + const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`, { + credentials: 'include' + }); const weatherData = await response.json(); return weatherData; } @@ -88,7 +92,9 @@ searchBar.addEventListener('input', async function(event) { if (userInput.length > 2) { // Trigger autocomplete after 2 char try { - const response = await fetch(`${API_BASE_URL}/search-locations?input=${encodeURIComponent(userInput)}`); + const response = await fetch(`${API_BASE_URL}/search-locations?input=${encodeURIComponent(userInput)}`, { + credentials: 'include' + }); const data = await response.json(); dropdown.innerHTML = ''; // Clear previous suggestions @@ -121,7 +127,9 @@ searchForm.addEventListener('submit', async function(event) { searchBar.value = ''; // Send a request to the server with the user input - const response = await fetch(`${API_BASE_URL}/weather-data?input=${encodeURIComponent(userSubmission)}`); + const response = await fetch(`${API_BASE_URL}/weather-data?input=${encodeURIComponent(userSubmission)}`, { + credentials: 'include' + }); const weatherData = await response.json(); // Handle the response data here From 1f4432432a8404c86444ad74dcaeddc9fd2f1e01 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 21:03:34 -0600 Subject: [PATCH 06/37] Insert new try catch blocks to handle/catch previously unknown errors --- scripts/script.js | 51 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 38 insertions(+), 13 deletions(-) diff --git a/scripts/script.js b/scripts/script.js index 1e4f1d6..60f3280 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -2,30 +2,55 @@ import { updateWeather } from './weather.js'; import { getIp } from './getIp.js'; import { updateTime } from './timeDate.js'; import { updateCurrent } from './updateCurrent.js'; - +// https://weather-app-server-staging-e194f8aa2d04.herokuapp.com/ // This is unsecure fix at some point!!! const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp.com'; async function startWeather(latitude, longitude) { - const response = await fetch(`${API_BASE_URL}/?coords=${latitude},${longitude}`); - const weatherData = await response.json() - console.log(weatherData); - return weatherData; + try { + const response = await fetch(`${API_BASE_URL}/?coords=${latitude},${longitude}`); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const weatherData = await response.json(); + console.log(weatherData); + return weatherData; + } catch (error) { + console.error('An error occurred:', error); + throw error; // re-throw the error if you want it to propagate + } } // Create get ip function async function getIP() { - return await fetch(`${API_BASE_URL}/get-ip`, { - credentials: 'include' - }); + try { + const response = await fetch(`${API_BASE_URL}/get-ip`, { + credentials: 'include' + }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return await response.json(); + } catch (error) { + console.error('An error occurred:', error); + throw error; // re-throw the error if you want it to propagate + } } async function ipWeather(ip) { - const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`, { - credentials: 'include' - }); - const weatherData = await response.json(); - return weatherData; + try { + const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`, { + credentials: 'include' + }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const weatherData = await response.json(); + return weatherData; + } catch (error) { + console.error('An error occurred:', error); + throw error; // re-throw the error if you want it to propagate + } } // Ask for location, if not get ip From e892a17c5e05971d7d1112dca614ba4a3911c7ac Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 21:21:32 -0600 Subject: [PATCH 07/37] Debug startWeather function --- scripts/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/script.js b/scripts/script.js index 60f3280..2235124 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -8,7 +8,7 @@ const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp. async function startWeather(latitude, longitude) { try { - const response = await fetch(`${API_BASE_URL}/?coords=${latitude},${longitude}`); + const response = await fetch(`${API_BASE_URL}/start-weather-data?coords=${latitude},${longitude}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } @@ -16,7 +16,7 @@ async function startWeather(latitude, longitude) { console.log(weatherData); return weatherData; } catch (error) { - console.error('An error occurred:', error); + console.error('An error occurred:', error); // This is getting called!!! throw error; // re-throw the error if you want it to propagate } } @@ -59,7 +59,7 @@ if (navigator.geolocation) { async function(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; - const weatherData = await startWeather(latitude, longitude); + const weatherData = await startWeather(latitude, longitude); // This is causing an error console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); From dbeaf4e634c4ea5e9a67c3eeb3e4440596ac1f5a Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 21:41:34 -0600 Subject: [PATCH 08/37] Refactor getIp() function --- scripts/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/script.js b/scripts/script.js index 2235124..7fd1967 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -22,7 +22,7 @@ async function startWeather(latitude, longitude) { } // Create get ip function -async function getIP() { +async function getIp() { try { const response = await fetch(`${API_BASE_URL}/get-ip`, { credentials: 'include' @@ -48,7 +48,7 @@ async function ipWeather(ip) { const weatherData = await response.json(); return weatherData; } catch (error) { - console.error('An error occurred:', error); + console.error('An error occurred:', error); // This error is getting thrown!!! throw error; // re-throw the error if you want it to propagate } } @@ -59,7 +59,7 @@ if (navigator.geolocation) { async function(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; - const weatherData = await startWeather(latitude, longitude); // This is causing an error + const weatherData = await startWeather(latitude, longitude); // Fixed this error console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); @@ -74,7 +74,7 @@ if (navigator.geolocation) { updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { - console.error('Error:', error); + console.error('Error:', error); // This error is getting thrown } } ); From fbd565a156052d2dbfc140fd26eeac70302c02b6 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 21:49:10 -0600 Subject: [PATCH 09/37] Debug user ip handling --- scripts/getIp.js | 6 ------ scripts/script.js | 6 ++---- 2 files changed, 2 insertions(+), 10 deletions(-) delete mode 100644 scripts/getIp.js diff --git a/scripts/getIp.js b/scripts/getIp.js deleted file mode 100644 index 388c4ad..0000000 --- a/scripts/getIp.js +++ /dev/null @@ -1,6 +0,0 @@ -export async function getIp() { - return await fetch('https://api.ipify.org?format=json') - .then(response => response.json()) - .then(data => console.log(data.ip)) - .catch(error => console.log('Unable to get IP address', error)); -} \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index 7fd1967..b1ba094 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,5 +1,4 @@ import { updateWeather } from './weather.js'; -import { getIp } from './getIp.js'; import { updateTime } from './timeDate.js'; import { updateCurrent } from './updateCurrent.js'; // https://weather-app-server-staging-e194f8aa2d04.herokuapp.com/ @@ -52,7 +51,8 @@ async function ipWeather(ip) { throw error; // re-throw the error if you want it to propagate } } - +// Get user ip address +const ip = await getIp(); // Ask for location, if not get ip if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( @@ -68,7 +68,6 @@ if (navigator.geolocation) { // This function is called when an error occurs, such as when the user denies the location permission console.log("Geolocation permission denied."); try { - const ip = await getIp(); const weatherData = await ipWeather(ip); console.log(ip, weatherData); updateWeather(weatherData, 'Your Location'); @@ -82,7 +81,6 @@ if (navigator.geolocation) { console.log("Geolocation is not supported by this browser."); (async () => { try { - const ip = await getIp(); const weatherData = await ipWeather(ip); console.log(ip, weatherData); updateWeather(weatherData, 'Your Location'); From c4b029f72b7c7853ce812a928bc4afa189bcec1f Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 22:18:02 -0600 Subject: [PATCH 10/37] Debug user ip handling part 2 --- scripts/script.js | 30 ++++++------------------------ 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/scripts/script.js b/scripts/script.js index b1ba094..b3e07c5 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,6 +1,5 @@ import { updateWeather } from './weather.js'; import { updateTime } from './timeDate.js'; -import { updateCurrent } from './updateCurrent.js'; // https://weather-app-server-staging-e194f8aa2d04.herokuapp.com/ // This is unsecure fix at some point!!! const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp.com'; @@ -20,25 +19,9 @@ async function startWeather(latitude, longitude) { } } -// Create get ip function -async function getIp() { +async function ipWeather() { try { - const response = await fetch(`${API_BASE_URL}/get-ip`, { - credentials: 'include' - }); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return await response.json(); - } catch (error) { - console.error('An error occurred:', error); - throw error; // re-throw the error if you want it to propagate - } -} - -async function ipWeather(ip) { - try { - const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`, { + const response = await fetch(`${API_BASE_URL}/ip-weather-data`, { credentials: 'include' }); if (!response.ok) { @@ -51,8 +34,7 @@ async function ipWeather(ip) { throw error; // re-throw the error if you want it to propagate } } -// Get user ip address -const ip = await getIp(); + // Ask for location, if not get ip if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( @@ -68,7 +50,7 @@ if (navigator.geolocation) { // This function is called when an error occurs, such as when the user denies the location permission console.log("Geolocation permission denied."); try { - const weatherData = await ipWeather(ip); + const weatherData = await ipWeather(); console.log(ip, weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); @@ -81,8 +63,8 @@ if (navigator.geolocation) { console.log("Geolocation is not supported by this browser."); (async () => { try { - const weatherData = await ipWeather(ip); - console.log(ip, weatherData); + const weatherData = await ipWeather(); + console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { From e2fc34b0613b321ade4c97b6901f3b5de96ba48d Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 22:43:29 -0600 Subject: [PATCH 11/37] Delete obsolete code --- scripts/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/script.js b/scripts/script.js index b3e07c5..4682f94 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -51,7 +51,7 @@ if (navigator.geolocation) { console.log("Geolocation permission denied."); try { const weatherData = await ipWeather(); - console.log(ip, weatherData); + console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { From 07648214121b9528cec9229a25467243fee5ea63 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 22:47:03 -0600 Subject: [PATCH 12/37] Ehanced mobile responsive design --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 113b388..4bc0665 100644 --- a/styles.css +++ b/styles.css @@ -315,7 +315,7 @@ body { @media (max-width: 600px) { .grid-main { grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] 1fr [two] minmax(200px, auto) [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] minmax(250px, 8fr) [three] 1fr [four]; } .day-description { From bbd840f83033ac165e78b33a9f39ac310f1aafff Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 22:58:12 -0600 Subject: [PATCH 13/37] Ehanced mobile responsive design by changing set width to max width for daily forecast --- styles.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/styles.css b/styles.css index 4bc0665..f8988b1 100644 --- a/styles.css +++ b/styles.css @@ -243,7 +243,8 @@ body { justify-content: center; height: auto; flex-shrink: 0; - width: 75px; + width: 100%; /* Full width on small screens */ + max-width: 75px; /* But no more than 75px on large screens */ } .day-date { @@ -252,14 +253,16 @@ body { justify-content: center; align-items: center; flex-shrink: 0; - width: 75px; + width: 100%; + max-width: 75px; } .day-high-low { display: flex; flex-direction: column; flex-shrink: 0; - width: 50px; + width: 100%; + max-width: 50px; } .day-description { @@ -268,7 +271,8 @@ body { justify-content: center; align-items: center; flex-shrink: 0; - width: 175px; + width: 100%; + max-width: 175px; margin-left: -20px; } @@ -282,7 +286,8 @@ body { display: flex; flex-direction: column; flex-shrink: 0; - width: 100px; + width: 100%; + max-width: 100px; } .shadow { @@ -315,7 +320,7 @@ body { @media (max-width: 600px) { .grid-main { grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] 1fr [two] minmax(250px, 8fr) [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] minmax(50px, 1fr) [three] 1fr [four]; } .day-description { From 876b4a83040f9b0f4c3b227014b87dd4c7d6a83b Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 20 Jun 2024 23:05:43 -0600 Subject: [PATCH 14/37] Changed grid main so content width is always in view --- styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles.css b/styles.css index f8988b1..87b7594 100644 --- a/styles.css +++ b/styles.css @@ -18,6 +18,9 @@ body { '. weekly .' 'footer footer footer'; grid-row-gap: 20px; + width: 100%; + max-width: 1000px; + margin: 0 auto; } .title-text { @@ -383,5 +386,6 @@ body { @media (min-width: 1201px) { .grid-main { grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; + } } \ No newline at end of file From f8019a59bbb084852626ab5d65232598762f2fa5 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:07:43 -0600 Subject: [PATCH 15/37] Change row size --- styles.css | 57 +++++++++++++++++++++++++----------------------------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/styles.css b/styles.css index 87b7594..9ae10ef 100644 --- a/styles.css +++ b/styles.css @@ -11,16 +11,13 @@ body { .grid-main { display: grid; grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; - grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; + grid-template-rows: [one] 100px [two] 300px [three] 300px [four] 700px [five] 100px [six]; grid-template-areas: '. nav .' '. current .' '. hourly .' '. weekly .' 'footer footer footer'; grid-row-gap: 20px; - width: 100%; - max-width: 1000px; - margin: 0 auto; } .title-text { @@ -44,7 +41,7 @@ body { } .header { - z-index: 1; + /* z-index: 1; */ display: flex; justify-content: space-between; font-size: 18px; @@ -60,7 +57,6 @@ body { /* Navbar Section */ .navbar { grid-area: 1/1/2/4; - width: 100%; background-color: rgba(255, 255, 255, 0.5); } @@ -246,8 +242,8 @@ body { justify-content: center; height: auto; flex-shrink: 0; - width: 100%; /* Full width on small screens */ - max-width: 75px; /* But no more than 75px on large screens */ + width: 100%; + max-width: 75px; } .day-date { @@ -314,7 +310,6 @@ body { /* Effects */ .glass-effect { border-radius: 10px; /* Rounded corners */ - border: 1px solid rgba(255, 255, 255, 0.702); /* Subtle white border */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ } @@ -322,8 +317,12 @@ body { /* Phones */ @media (max-width: 600px) { .grid-main { - grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] 1fr [two] minmax(50px, 1fr) [three] 1fr [four]; + grid-template-columns: [one] .25fr [two] 8fr [three] .25fr [four]; + grid-template-rows: [one] 200px [two] 300px [three] 300px [four] 700px [five] 100px [six]; + } + + .hourly-body { + overflow-x: scroll; } .day-description { @@ -336,44 +335,40 @@ body { } .navbar-content { + display: flex; flex-direction: column; justify-content: center; - padding: 20px; + align-items: center; + row-gap: 10px; + } + + .navbar-content h1 { + margin: 0; + padding: 0; } .day-night { display: none; } - #search-form, #dropdown { - width: 100%; + + .logo { + flex-direction: column-reverse; + justify-content: space-between; } + } /* Tablets */ @media (max-width: 768px) { .grid-main { - grid-template-columns: [one] 1fr [two] minmax(6fr, 80vw) [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; } #search-form, #dropdown { - width: 300px; + grid-area: nav; + width: 80vw; } } -/* desktops */ -@media (max-width: 992px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(500px, 80vw) [three] 1fr [four]; - } - - #search-form, #dropdown { - width: 250px; - } - - .day-night { - display: none; - } - -} /* desktops */ @media (min-width: 992px) { From 693ad052a845ffd98bbe30cc5ed55bb9ee82872b Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:26:53 -0600 Subject: [PATCH 16/37] Fix content overflow bug --- styles.css | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/styles.css b/styles.css index 9ae10ef..9def022 100644 --- a/styles.css +++ b/styles.css @@ -5,12 +5,17 @@ body { height: auto; */ background-color: #D0E4F5; font-family: 'Roboto', sans-serif; + overflow-x: hidden; +} + +html { + overflow-x: hidden; } /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] 6fr [three] 1fr [four]; grid-template-rows: [one] 100px [two] 300px [three] 300px [four] 700px [five] 100px [six]; grid-template-areas: '. nav .' '. current .' @@ -91,8 +96,8 @@ body { } #search-form { - width: 400px; - padding-left: 25px; + grid-area: nav; + } #location-search { @@ -317,8 +322,8 @@ body { /* Phones */ @media (max-width: 600px) { .grid-main { - grid-template-columns: [one] .25fr [two] 8fr [three] .25fr [four]; - grid-template-rows: [one] 200px [two] 300px [three] 300px [four] 700px [five] 100px [six]; + grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; + grid-template-rows: [one] 200px [two] 150px [three] 300px [four] 1000px [five] 100px [six]; } .hourly-body { @@ -353,13 +358,15 @@ body { .logo { flex-direction: column-reverse; - justify-content: space-between; + justify-content: center; + align-content: center; + flex-wrap: wrap; } } -/* Tablets */ -@media (max-width: 768px) { + +/* @media (max-width: 768px) { .grid-main { grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; } @@ -370,14 +377,14 @@ body { } -/* desktops */ + @media (min-width: 992px) { .grid-main { grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; } -} +} */ + -/* Extra large devices */ @media (min-width: 1201px) { .grid-main { grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; From 9fc56d52f48fb1c98907ab787a93f1f626dd02de Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:32:12 -0600 Subject: [PATCH 17/37] Re-enable x overflow --- styles.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/styles.css b/styles.css index 9def022..7926b96 100644 --- a/styles.css +++ b/styles.css @@ -1,15 +1,8 @@ body { margin: 0; padding: 0; - /* width: auto; - height: auto; */ background-color: #D0E4F5; font-family: 'Roboto', sans-serif; - overflow-x: hidden; -} - -html { - overflow-x: hidden; } /* Main section */ From 1532b2c9c311fe5f85edf7eaceed56dd6ba740a0 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:34:02 -0600 Subject: [PATCH 18/37] Re-enable other responsive designs --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 7926b96..5ae2dc9 100644 --- a/styles.css +++ b/styles.css @@ -359,7 +359,7 @@ body { } -/* @media (max-width: 768px) { +@media (max-width: 768px) { .grid-main { grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; } @@ -375,7 +375,7 @@ body { .grid-main { grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; } -} */ +} @media (min-width: 1201px) { From 718aea45368dafd779ac5bf272c9429a4c80d593 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:35:55 -0600 Subject: [PATCH 19/37] Revert to previous versions css --- styles.css | 80 ++++++++++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 42 deletions(-) diff --git a/styles.css b/styles.css index 5ae2dc9..113b388 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,8 @@ body { margin: 0; padding: 0; + /* width: auto; + height: auto; */ background-color: #D0E4F5; font-family: 'Roboto', sans-serif; } @@ -8,8 +10,8 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] 6fr [three] 1fr [four]; - grid-template-rows: [one] 100px [two] 300px [three] 300px [four] 700px [five] 100px [six]; + grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; + grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; grid-template-areas: '. nav .' '. current .' '. hourly .' @@ -39,7 +41,7 @@ body { } .header { - /* z-index: 1; */ + z-index: 1; display: flex; justify-content: space-between; font-size: 18px; @@ -55,6 +57,7 @@ body { /* Navbar Section */ .navbar { grid-area: 1/1/2/4; + width: 100%; background-color: rgba(255, 255, 255, 0.5); } @@ -89,8 +92,8 @@ body { } #search-form { - grid-area: nav; - + width: 400px; + padding-left: 25px; } #location-search { @@ -240,8 +243,7 @@ body { justify-content: center; height: auto; flex-shrink: 0; - width: 100%; - max-width: 75px; + width: 75px; } .day-date { @@ -250,16 +252,14 @@ body { justify-content: center; align-items: center; flex-shrink: 0; - width: 100%; - max-width: 75px; + width: 75px; } .day-high-low { display: flex; flex-direction: column; flex-shrink: 0; - width: 100%; - max-width: 50px; + width: 50px; } .day-description { @@ -268,8 +268,7 @@ body { justify-content: center; align-items: center; flex-shrink: 0; - width: 100%; - max-width: 175px; + width: 175px; margin-left: -20px; } @@ -283,8 +282,7 @@ body { display: flex; flex-direction: column; flex-shrink: 0; - width: 100%; - max-width: 100px; + width: 100px; } .shadow { @@ -308,6 +306,7 @@ body { /* Effects */ .glass-effect { border-radius: 10px; /* Rounded corners */ + border: 1px solid rgba(255, 255, 255, 0.702); /* Subtle white border */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ } @@ -315,12 +314,8 @@ body { /* Phones */ @media (max-width: 600px) { .grid-main { - grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; - grid-template-rows: [one] 200px [two] 150px [three] 300px [four] 1000px [five] 100px [six]; - } - - .hourly-body { - overflow-x: scroll; + grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; + grid-template-columns: [one] 1fr [two] minmax(200px, auto) [three] 1fr [four]; } .day-description { @@ -333,54 +328,55 @@ body { } .navbar-content { - display: flex; flex-direction: column; justify-content: center; - align-items: center; - row-gap: 10px; - } - - .navbar-content h1 { - margin: 0; - padding: 0; + padding: 20px; } .day-night { display: none; } - - .logo { - flex-direction: column-reverse; - justify-content: center; - align-content: center; - flex-wrap: wrap; + #search-form, #dropdown { + width: 100%; } - } - +/* Tablets */ @media (max-width: 768px) { .grid-main { - grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] minmax(6fr, 80vw) [three] 1fr [four]; } #search-form, #dropdown { - grid-area: nav; - width: 80vw; + width: 300px; } } +/* desktops */ +@media (max-width: 992px) { + .grid-main { + grid-template-columns: [one] 1fr [two] minmax(500px, 80vw) [three] 1fr [four]; + } + #search-form, #dropdown { + width: 250px; + } + .day-night { + display: none; + } + +} + +/* desktops */ @media (min-width: 992px) { .grid-main { grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; } } - +/* Extra large devices */ @media (min-width: 1201px) { .grid-main { grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; - } } \ No newline at end of file From 9872f90f766213adcf58643a1591d59e7dc17f1b Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:38:29 -0600 Subject: [PATCH 20/37] Tinker with grid-area --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 113b388..3f16280 100644 --- a/styles.css +++ b/styles.css @@ -10,8 +10,8 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; - grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; + grid-template-columns: [one] 1fr [two] 12fr [three] 1fr [four]; + grid-template-rows: [one] 100px [two] 150px [three] 200ps [four] 1100px [five] 100px [six]; grid-template-areas: '. nav .' '. current .' '. hourly .' From 1d94c1e63c04ae954d5801b4f0b7bff1e8c18934 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:41:32 -0600 Subject: [PATCH 21/37] Tinker with grid-area p2 --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 3f16280..bee2af9 100644 --- a/styles.css +++ b/styles.css @@ -314,7 +314,7 @@ body { /* Phones */ @media (max-width: 600px) { .grid-main { - grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; + /* grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; */ grid-template-columns: [one] 1fr [two] minmax(200px, auto) [three] 1fr [four]; } From c8f536c39f587e6f9b19bf049f7d9846c0c54794 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:44:17 -0600 Subject: [PATCH 22/37] Tinker with grid-area p3 --- styles.css | 41 ++++------------------------------------- 1 file changed, 4 insertions(+), 37 deletions(-) diff --git a/styles.css b/styles.css index bee2af9..cf33f5d 100644 --- a/styles.css +++ b/styles.css @@ -10,8 +10,8 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] 12fr [three] 1fr [four]; - grid-template-rows: [one] 100px [two] 150px [three] 200ps [four] 1100px [five] 100px [six]; + grid-template-columns: [one] 1fr [two] 8fr [three] 1fr [four]; + grid-template-rows: [one] 100px [two] 150px [three] 200px [four] 1100px [five] 100px [six]; grid-template-areas: '. nav .' '. current .' '. hourly .' @@ -314,8 +314,7 @@ body { /* Phones */ @media (max-width: 600px) { .grid-main { - /* grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; */ - grid-template-columns: [one] 1fr [two] minmax(200px, auto) [three] 1fr [four]; + grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; } .day-description { @@ -341,41 +340,9 @@ body { } } -/* Tablets */ -@media (max-width: 768px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(6fr, 80vw) [three] 1fr [four]; - } - #search-form, #dropdown { - width: 300px; - } -} - -/* desktops */ -@media (max-width: 992px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(500px, 80vw) [three] 1fr [four]; - } - - #search-form, #dropdown { - width: 250px; - } - - .day-night { - display: none; - } - -} - -/* desktops */ -@media (min-width: 992px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; - } -} /* Extra large devices */ -@media (min-width: 1201px) { +@media (max-width: 1200px) { .grid-main { grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; } From 60e7c9d446c40624315df12a73c35fb9f0389ffc Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:56:39 -0600 Subject: [PATCH 23/37] Tinker with grid-area p4 --- styles.css | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index cf33f5d..44bf151 100644 --- a/styles.css +++ b/styles.css @@ -10,8 +10,8 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] 8fr [three] 1fr [four]; - grid-template-rows: [one] 100px [two] 150px [three] 200px [four] 1100px [five] 100px [six]; + grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; + grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; grid-template-areas: '. nav .' '. current .' '. hourly .' @@ -35,8 +35,8 @@ body { color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.488), 0px 2px 4px rgba(0, 0, 0, 0.427); white-space: nowrap; /* Prevents the text from wrapping */ - overflow: hidden; /* Hides the text that overflows the container */ - text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */ + overflow: hidden; + min-width: 100px; } @@ -186,7 +186,7 @@ body { .hourly-body { display: flex; - overflow-x: auto; + /* overflow-x: auto; */ } @@ -314,7 +314,8 @@ body { /* Phones */ @media (max-width: 600px) { .grid-main { - grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; + grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; + grid-template-columns: [one] 1fr [two] 12fr [three] 1fr [four]; } .day-description { @@ -340,9 +341,27 @@ body { } } +/* Tablets */ +@media (max-width: 768px) { + .grid-main { + grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; + } + #search-form, #dropdown { + width: 300px; + } +} + + + +/* desktops */ +@media (min-width: 992px) { + .grid-main { + grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; + } +} /* Extra large devices */ -@media (max-width: 1200px) { +@media (min-width: 1201px) { .grid-main { grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; } From 185b477397a2f62827edd353b418f5f1e0625af8 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 00:59:04 -0600 Subject: [PATCH 24/37] Tinker with grid-area p5 --- styles.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 44bf151..d9a2ba8 100644 --- a/styles.css +++ b/styles.css @@ -186,8 +186,7 @@ body { .hourly-body { display: flex; - /* overflow-x: auto; */ - + overflow-x: auto; } .scroll-hour { From 2997bd863e988cb5c1d2c5ecdcbd1cec9c0c0a02 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 01:01:56 -0600 Subject: [PATCH 25/37] Tinker with grid-area p6 --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index d9a2ba8..1077210 100644 --- a/styles.css +++ b/styles.css @@ -36,7 +36,7 @@ body { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.488), 0px 2px 4px rgba(0, 0, 0, 0.427); white-space: nowrap; /* Prevents the text from wrapping */ overflow: hidden; - + text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */ min-width: 100px; } From a9468ffb241a15f19fd57245ea3ab244cbffd1c7 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 01:05:09 -0600 Subject: [PATCH 26/37] Tinker with grid-area p7 --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 1077210..13cec9e 100644 --- a/styles.css +++ b/styles.css @@ -314,7 +314,7 @@ body { @media (max-width: 600px) { .grid-main { grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] 1fr [two] 12fr [three] 1fr [four]; + grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; } .day-description { @@ -343,7 +343,7 @@ body { /* Tablets */ @media (max-width: 768px) { .grid-main { - grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] 85vw [three] 1fr [four]; } #search-form, #dropdown { width: 300px; From 9fe638df8e125d58fcd40832f4c6b8653eee0c48 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 01:07:03 -0600 Subject: [PATCH 27/37] Tinker with grid-area p8 --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 13cec9e..c79d30d 100644 --- a/styles.css +++ b/styles.css @@ -274,7 +274,7 @@ body { .day-sun-set-rise { display: flex; flex-direction: column; - flex-shrink: 0; + flex-shrink: 2; } .day-night { From 45764969b1ff7e248aa56c40507e2ae4050b9af5 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 03:36:19 -0600 Subject: [PATCH 28/37] Tinker with grid-area p9 --- styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/styles.css b/styles.css index c79d30d..755e8b4 100644 --- a/styles.css +++ b/styles.css @@ -10,7 +10,7 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; grid-template-areas: '. nav .' '. current .' @@ -321,10 +321,10 @@ body { flex-shrink: 1; } - .current, .hourly, .weekly { + /* .current, .hourly, .weekly { margin-left: 10px; margin-right: 10px; - } + } */ .navbar-content { flex-direction: column; @@ -335,9 +335,9 @@ body { .day-night { display: none; } - #search-form, #dropdown { + /* #search-form, #dropdown { width: 100%; - } + } */ } /* Tablets */ @@ -355,7 +355,7 @@ body { /* desktops */ @media (min-width: 992px) { .grid-main { - grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] 6fr [three] 1fr [four]; } } From 1343e0c6533a8eba64cd430699577312b7560e79 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 03:39:45 -0600 Subject: [PATCH 29/37] Tinker with grid-area p10 --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 755e8b4..b12cbfd 100644 --- a/styles.css +++ b/styles.css @@ -317,7 +317,7 @@ body { grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; } - .day-description { + .day-description, .day-sun-set-rise, .day-high-low, .day-date, .day img{ flex-shrink: 1; } From 0f5139f8cc2bd08995c0b009c8125f133aca6e6a Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 03:46:04 -0600 Subject: [PATCH 30/37] Tinker with grid-area p11 --- styles.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index b12cbfd..cd38228 100644 --- a/styles.css +++ b/styles.css @@ -309,6 +309,11 @@ body { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ } +@media (max-width: 420px) { + .day-sun-set-rise { + display: none; + } +} /* Phones */ @media (max-width: 600px) { @@ -317,8 +322,15 @@ body { grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; } - .day-description, .day-sun-set-rise, .day-high-low, .day-date, .day img{ + .day-description, .day-sun-set-rise, .day-high-low, .day-date { + flex-shrink: 1; + font-size: 14px; + } + + .day img { flex-shrink: 1; + width: 50px; /* Adjust this value to your needs */ + height: auto; } /* .current, .hourly, .weekly { From edc87969f0a1a31d2d5db87da58637bbd2eec207 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 03:49:54 -0600 Subject: [PATCH 31/37] Tinker with grid-area p12 --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index cd38228..c4f2297 100644 --- a/styles.css +++ b/styles.css @@ -344,9 +344,9 @@ body { padding: 20px; } - .day-night { + /* .day-night { display: none; - } + } */ /* #search-form, #dropdown { width: 100%; } */ From aba5383413756b0b87d8f003c5c2a9b3bcd14d39 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 03:54:15 -0600 Subject: [PATCH 32/37] Tinker with grid-area p13 --- styles.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index c4f2297..9b85c06 100644 --- a/styles.css +++ b/styles.css @@ -309,11 +309,6 @@ body { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ } -@media (max-width: 420px) { - .day-sun-set-rise { - display: none; - } -} /* Phones */ @media (max-width: 600px) { @@ -344,9 +339,9 @@ body { padding: 20px; } - /* .day-night { + .day-night { display: none; - } */ + } /* #search-form, #dropdown { width: 100%; } */ From 9d64d997a13b120838416ba0d2b2b95818a9195b Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 04:06:50 -0600 Subject: [PATCH 33/37] Tinker with grid-area p14 --- styles.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index 9b85c06..a49ed50 100644 --- a/styles.css +++ b/styles.css @@ -314,7 +314,7 @@ body { @media (max-width: 600px) { .grid-main { grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] .25fr [two] 12fr [three] .25fr [four]; + grid-template-columns: [one] .25fr [two] [three] .25fr [four]; } .day-description, .day-sun-set-rise, .day-high-low, .day-date { @@ -360,14 +360,21 @@ body { /* desktops */ -@media (min-width: 992px) { +@media (max-width: 992px) { .grid-main { grid-template-columns: [one] 1fr [two] 6fr [three] 1fr [four]; } } /* Extra large devices */ -@media (min-width: 1201px) { +/* @media (max-width: 1200px) { + .grid-main { + grid-template-columns: [one] 1fr [two] 70vw [three] 1fr [four]; + } +} */ + +/* Extra large devices */ +@media (min-width: 1200px) { .grid-main { grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; } From 1f7dea3fd62a382092a06f15cac9f092ef99d582 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Fri, 21 Jun 2024 04:08:30 -0600 Subject: [PATCH 34/37] Tinker with grid-area p15 --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index a49ed50..ecd997e 100644 --- a/styles.css +++ b/styles.css @@ -367,11 +367,11 @@ body { } /* Extra large devices */ -/* @media (max-width: 1200px) { +@media (max-width: 1200px) { .grid-main { grid-template-columns: [one] 1fr [two] 70vw [three] 1fr [four]; } -} */ +} /* Extra large devices */ @media (min-width: 1200px) { From 1421990a208feba22e0a48de6dd5c38260b357b5 Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Wed, 26 Jun 2024 21:01:22 -0600 Subject: [PATCH 35/37] Redesign weekly forecast and make it mobile friendly --- scripts/updateWeekly.js | 21 ++++---- styles.css | 104 +++++++++++++++++++--------------------- 2 files changed, 60 insertions(+), 65 deletions(-) diff --git a/scripts/updateWeekly.js b/scripts/updateWeekly.js index 6784663..6d5a5d5 100644 --- a/scripts/updateWeekly.js +++ b/scripts/updateWeekly.js @@ -40,13 +40,15 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) { weeklyHTML += `
-
-

${(i===0) ? 'Today' : day}

-

${dayMonth}

-
-
-

H: ${high}

-

L: ${low}

+
+
+

${(i===0) ? 'Today' : day}

+

${dayMonth}

+
+
+

H: ${high}

+

L: ${low}

+
Weather icon @@ -57,13 +59,13 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {

Night Avg: ${nightTemp}

-
+
${sunrise}
-
+
@@ -73,7 +75,6 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {
`; - } const weeklyForecastDiv = document.querySelector('.weekly-body'); weeklyForecastDiv.innerHTML = weeklyHTML; diff --git a/styles.css b/styles.css index ecd997e..be92022 100644 --- a/styles.css +++ b/styles.css @@ -10,7 +10,7 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] 80vw [three] 1fr [four]; + grid-template-columns: [one] 3vw [two] 94vw [three] 3vw [four]; grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; grid-template-areas: '. nav .' '. current .' @@ -255,12 +255,21 @@ body { } .day-high-low { + white-space: nowrap; display: flex; - flex-direction: column; + flex-direction: row; + justify-content: center; + align-items: center; flex-shrink: 0; width: 50px; } +.day-high-low p { + padding-top: 5px; + padding-right: 5px; + font-size: 12px; +} + .day-description { display: flex; flex-direction: column; @@ -271,10 +280,16 @@ body { margin-left: -20px; } +.day-date-col { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + .day-sun-set-rise { display: flex; flex-direction: column; - flex-shrink: 2; } .day-night { @@ -284,6 +299,13 @@ body { width: 100px; } +.sunrise, .sunset { + display: flex; + float: row; + justify-content: space-around; + align-items: center; +} + .shadow { filter: drop-shadow(2px 2px 2px gray); } @@ -309,73 +331,45 @@ body { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ } - -/* Phones */ @media (max-width: 600px) { - .grid-main { - grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] .25fr [two] [three] .25fr [four]; - } - - .day-description, .day-sun-set-rise, .day-high-low, .day-date { + .weekly-body { flex-shrink: 1; - font-size: 14px; - } - - .day img { - flex-shrink: 1; - width: 50px; /* Adjust this value to your needs */ - height: auto; - } - - /* .current, .hourly, .weekly { - margin-left: 10px; - margin-right: 10px; - } */ - - .navbar-content { - flex-direction: column; - justify-content: center; - padding: 20px; + font-size: 16px; } .day-night { display: none; } - /* #search-form, #dropdown { - width: 100%; - } */ -} -/* Tablets */ -@media (max-width: 768px) { - .grid-main { - grid-template-columns: [one] 1fr [two] 85vw [three] 1fr [four]; - } - #search-form, #dropdown { - width: 300px; + .day-date { + width: 50px; + padding-left: 10px; } -} + .day-high-low { + padding-left: 20px; + font-size: 10px; + } + .day-description { + width: 135px; + align-content: center; + font-size: 14px; + padding-left: 10px; + } -/* desktops */ -@media (max-width: 992px) { - .grid-main { - grid-template-columns: [one] 1fr [two] 6fr [three] 1fr [four]; + .day-sun-set-rise { + font-size: 12px; + flex-direction: column; + row-gap: 10px; } -} -/* Extra large devices */ -@media (max-width: 1200px) { - .grid-main { - grid-template-columns: [one] 1fr [two] 70vw [three] 1fr [four]; + .sunrise { + flex-direction: column; } -} -/* Extra large devices */ -@media (min-width: 1200px) { - .grid-main { - grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; + .sunset { + flex-direction: column; } + } \ No newline at end of file From 97e2be6f7667365428844bdbdb0139e95b3f8bab Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 27 Jun 2024 10:56:20 -0600 Subject: [PATCH 36/37] Redesign media widths --- scripts/script.js | 1 - styles.css | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/scripts/script.js b/scripts/script.js index 4682f94..04c2336 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -3,7 +3,6 @@ import { updateTime } from './timeDate.js'; // https://weather-app-server-staging-e194f8aa2d04.herokuapp.com/ // This is unsecure fix at some point!!! const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp.com'; - async function startWeather(latitude, longitude) { try { const response = await fetch(`${API_BASE_URL}/start-weather-data?coords=${latitude},${longitude}`); diff --git a/styles.css b/styles.css index be92022..50da871 100644 --- a/styles.css +++ b/styles.css @@ -371,5 +371,10 @@ body { .sunset { flex-direction: column; } +} +@media (min-width: 992px) { + .grid-main { + grid-template-columns: [one] 1fr [two] 800px [three] 1fr [four]; + } } \ No newline at end of file From 4cf3b6f06c5dba27f696930525e463950edd12eb Mon Sep 17 00:00:00 2001 From: Van-Nice Date: Thu, 27 Jun 2024 11:09:48 -0600 Subject: [PATCH 37/37] Redesign navbar mobile --- styles.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/styles.css b/styles.css index 50da871..26766bf 100644 --- a/styles.css +++ b/styles.css @@ -92,6 +92,7 @@ body { } #search-form { + grid-area: nav; width: 400px; padding-left: 25px; } @@ -332,6 +333,24 @@ body { } @media (max-width: 600px) { + .grid-main { + grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; + + } + .navbar-content { + flex-direction: column; + } + + #search-form { + grid-area: nav; + width: 300px; + padding-bottom: 20px; + } + + #dropdown { + width: 300px; + } + .weekly-body { flex-shrink: 1; font-size: 16px;