issue: #1231 (final) test;

Betarena · Apr 26, 2023 · 7c6484a · 7c6484a
1 parent 83da8fd
commit 7c6484a
Show file tree

Hide file tree

Showing 4 changed files with 1,001 additions and 27 deletions.
diff --git a/src/app.html b/src/app.html
@@ -7,6 +7,36 @@
 			content="width=device-width, initial-scale=1.0, user-scalable=yes"
 		/>
 		<meta name="theme-color" content="#292929" />
+    <link 
+      rel="stylesheet" 
+      type="text/css"
+      href="/app.css"
+    />
+    <!-- 
+    IMPORTANT 
+    mobile usability override
+    -->
+    <style>
+      body.googlebot-override main {
+        overflow: hidden;
+      }
+      body.googlebot-override p,
+      body.googlebot-override span,
+      body.googlebot-override h1,
+      body.googlebot-override h2 {
+        font-size: 14px;
+      }
+      body.googlebot-override div,
+      body.googlebot-override button,
+      body.googlebot-override a,
+      body.googlebot-override img,
+      body.googlebot-override td {
+        margin: 10px;
+      }
+      body.googlebot-override div#splash-screen {
+        margin: 0;
+      }
+    </style>
 		<!-- 
     [ℹ] Website Icons & Favicons 
     -->
@@ -108,7 +138,10 @@
 	</head>
 	<body
     data-sveltekit-preload-data="hover" 
-    class="no-scrollbar">
+    class="
+      no-scrollbar
+      googlebot-override
+    ">
 		<div id="svelte">
       %sveltekit.body%
     </div>

diff --git a/src/lib/components/_Splash_screen.svelte b/src/lib/components/_Splash_screen.svelte
@@ -3,36 +3,46 @@
     [TypeScript Written]
 =================== -->
 <script lang="ts">
-	import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import { onMount } from 'svelte';
 
-	/**
-	 * Description:
-	 * ~~~~~~~~~~~~
-	 * Set a Timer To Show/Hide the
-	 * Elements of the HTML Page
-	 */
-	let show: boolean = true;
-	onMount(async () => {
-		// ... itialiazing timer,
-		// ... reset all of the values to its initial state;
-		setTimeout(async () => {
-			show = false;
-			document.documentElement.classList.remove(
-				'no-scrollbar'
-			);
-			document.body.classList.remove(
-				'no-scrollbar'
-			);
-		}, 500);
-	});
+  let show: boolean = true;
+
+  $: if (browser) 
+  {
+    document.documentElement.classList.remove(
+        'googlebot-override'
+    );
+    document.body.classList.remove(
+      'googlebot-override'
+    );
+  }
+
+  /**
+   * @summary [LIFECYCLE]
+   * @description triggers events onLoad of the
+   * page/component;
+  */
+  onMount(async () => {
+    setTimeout(async () => {
+      show = false;
+      document.documentElement.classList.remove(
+        'no-scrollbar'
+      );
+      document.body.classList.remove(
+        'no-scrollbar'
+      );
+    }, 500);
+  });
 </script>
 
 <!-- ===================
 	COMPONENT HTML
 =================== -->
 
 {#if show}
-	<div>
+	<div
+    id="splash-screen">
     <!-- FIXME: need width & height -->
 		<img
 			id="brand-svg"

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -15,15 +15,15 @@
 	import type { Cache_Single_Lang_Footer_Translation_Response } from '$lib/models/_main_/footer/types';
 	import type { Cache_Single_Lang_Header_Translation_Response } from '$lib/models/_main_/navbar/types';
 
-	import Navbar from '$lib/components/page/profile/Navbar.svelte';
 	import EmailSubscribe from '$lib/components/_Email_subscribe.svelte';
-	import Footer from '$lib/components/_main_/footer/_Footer.svelte';
-	import Header from '$lib/components/_main_/header/Header.svelte';
 	import OfflineAlert from '$lib/components/_Offline_alert.svelte';
 	import PlatformAlert from '$lib/components/_Platform_alert.svelte';
 	import SplashScreen from '$lib/components/_Splash_screen.svelte';
+	import Footer from '$lib/components/_main_/footer/_Footer.svelte';
+	import Header from '$lib/components/_main_/header/Header.svelte';
+	import Navbar from '$lib/components/page/profile/Navbar.svelte';
 
-	import '../app.css';
+	// import '../app.css';
 	
 	const VALID_PROFILE_PAGE_URL: string[] = [
 		'/u/dashboard',