Added Weather Hiding Functionality for Mobile Devices

Thunder-Blaze · Jan 10, 2025 · f6b2935 · f6b2935
1 parent 7134727
commit f6b2935
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -1165,6 +1165,19 @@ <h1>Material You NewTab</h1>
                             </label>
                         </div>
 
+                        <div class="ttcont">
+                            <div class="texts">
+                                <div class="bigText" id="hideWeatherBox">Hide Weather Box</div>
+                                <div class="infoText" id="hideWeatherBoxInfo">
+                                    Hide the Box and only show Temp on Mobiles
+                                </div>
+                            </div>
+                            <label class="switch">
+                                <input id="hideWeatherCheckbox" type="checkbox">
+                                <span class="toggle"></span>
+                            </label>
+                        </div>
+
                         <!-- ---🟡--- -->
                         <div class="ttcont">
                             <div class="texts">

diff --git a/locales/en.js b/locales/en.js
@@ -70,6 +70,8 @@ const en = {
     "userAPI": "Your weatherAPI key",
     "LearnMoreButton": "Learn more",
     "saveAPI": "Save",
+    "hideWeatherBox": "Hide Weather Box",
+    "hideWeatherBoxInfo": "Hide the box, show temp (Mobiles)",
 
     // Body Items
     // Calendar

diff --git a/scripts/languages.js b/scripts/languages.js
@@ -123,6 +123,8 @@ function applyLanguage(lang) {
         'saveLoc',
         'WeatherApiText',
         'WeatherApiSubtext',
+        'hideWeatherBox',
+        'hideWeatherBoxInfo',
         'LearnMoreButton',
         'saveAPI',
         'conditionText',

diff --git a/scripts/script.js b/scripts/script.js
@@ -2919,6 +2919,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const bookmarksCheckbox = document.getElementById("bookmarksCheckbox");
     const aiToolsCheckbox = document.getElementById("aiToolsCheckbox");
     const googleAppsCheckbox = document.getElementById("googleAppsCheckbox");
+    const hideWeatherCheckbox = document.getElementById("hideWeatherCheckbox");
     const todoListCheckbox = document.getElementById("todoListCheckbox");
     const bookmarkGridCheckbox = document.getElementById("bookmarkGridCheckbox");
     const timeformatField = document.getElementById("timeformatField");
@@ -3660,6 +3661,10 @@ document.addEventListener("DOMContentLoaded", function () {
             saveDisplayStatus("todoListDisplayStatus", "none");
         }
     });
+
+    hideWeatherCheckbox.addEventListener("change", function () {
+        saveCheckboxState("hideWeatherCheckboxState", hideWeatherCheckbox);
+    });
 
     fahrenheitCheckbox.addEventListener("change", function () {
         saveCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
@@ -3736,6 +3741,7 @@ document.addEventListener("DOMContentLoaded", function () {
     loadCheckboxState("aiToolsCheckboxState", aiToolsCheckbox);
     loadCheckboxState("googleAppsCheckboxState", googleAppsCheckbox);
     loadCheckboxState("todoListCheckboxState", todoListCheckbox);
+    loadCheckboxState("hideWeatherCheckboxState", hideWeatherCheckbox);
     loadDisplayStatus("shortcutsDisplayStatus", shortcuts);
     loadDisplayStatus("bookmarksDisplayStatus", bookmarkButton);
     loadDisplayStatus("aiToolsDisplayStatus", aiToolsCont);

diff --git a/style.css b/style.css
@@ -2967,6 +2967,10 @@ input:checked + .toggle:before {
 	z-index: 99999;
 }
 
+.toggleTextsCont .ttcont:has(#hideWeatherBox) {
+	display: none;
+}
+
 /* -------media query ------------------- */
 
 @media screen and (max-width: 1400px) {
@@ -3082,6 +3086,8 @@ input:checked + .toggle:before {
 		display: flex;
 		min-height: fit-content;
 		flex-direction: column;
+		justify-content: start;
+		padding-top: 60px;
 	}
 	.menuBar {
 		top: 0;
@@ -3105,8 +3111,8 @@ input:checked + .toggle:before {
 		height: auto;
 		position: relative;
 		scale: 0.85;
-		width: 112%;
-		margin-left: -6%;
+		width: calc(100vw / 0.85);
+		margin-left: calc(50vw - 50vw / 0.85);
 		margin-top: 0;
 		bottom: 0;
 	}
@@ -3180,7 +3186,7 @@ input:checked + .toggle:before {
 		aspect-ratio: 0.5;
 		height: auto;
 	}
-	#analogClock {
+	#analogClock, #digitalClock {
 		width: 45%;
 		margin-left: 5%;
 		aspect-ratio: 1;
@@ -3209,7 +3215,7 @@ input:checked + .toggle:before {
                 height: auto;
                 bottom: 20rem;
                 /* scale: 1.2; */
-                transform-origin: right;
+                transform-origin: center;
 			}
 		}
 		#temp {
@@ -3222,6 +3228,20 @@ input:checked + .toggle:before {
 			margin-left: -16vw;
 		}
 	}
+	.toggleTextsCont .ttcont:has(#hideWeatherBox) {
+		display: flex;
+	}
+	.centerDiv:has(~ .menuBar #digitalCheckbox:checked) {
+		& .leftDiv {
+			margin-top: -6vw;
+		}
+		& .rAndakar {
+			scale: 0.8;
+		}
+	}
+	.centerDiv:has(~ .menuBar #hideWeatherCheckbox:checked) .topDiv .lrectangle  {
+		display: none;
+	}
 	.centerDiv {
 		position: relative;
 		margin-bottom: 1.5rem;
@@ -3264,10 +3284,13 @@ input:checked + .toggle:before {
 		padding: 20px 0;
 	}
 	#shortcuts-section {
-		margin: 0;
-		padding-left: 20px;
+		padding-left: 30px;
 		overflow-x: scroll;
 		scrollbar-width: none;
+		position: fixed;
+		bottom: 62px;
+		max-width: unset;
+		left: 0;
 	}
 	#shortcuts-section .wrapper {
 		width: 100%;