From ea972bee3e1302e42539496de71710aaa52513a3 Mon Sep 17 00:00:00 2001
From: "Mr. Snowy" <61592704+MrSn0wy@users.noreply.github.com>
Date: Thu, 10 Aug 2023 16:40:46 +0200
Subject: [PATCH] fixed some "teleporation" when (re)loading the page + code
 cleanup

---
 public_html/compatibility/index.html | 34 +++++++++++++++++++++++++---
 public_html/parts/navbar.html        | 34 ++++------------------------
 2 files changed, 35 insertions(+), 33 deletions(-)
diff --git a/public_html/compatibility/index.html b/public_html/compatibility/index.html
index ef0d44a..145d66e 100644
--- a/public_html/compatibility/index.html
+++ b/public_html/compatibility/index.html
@@ -24,7 +24,14 @@
   .progressBarInfo {opacity: 0;}
 </style>
 <body>
-<header id="header"></header>
+<header id="header">
+  <style>
+    header {
+      position: fixed;
+      height: 3rem;
+    }
+  </style>
+</header>
 <main class="main">
   <h1 class="mainText">Game Compatibility List</h1>
   <h3 class="smolMainText">These are the games that have been tested with <span style="color: #f0e74a;">fp</span>PS4.<br>Click on an image to view the game's GitHub issue.<br>The database is updated every 20 minutes.</h3>
@@ -42,7 +49,6 @@
     <div class="searchBarContainer">
       <input autocomplete="off" type="text" name="fpps4" class="searchBar" id="search" placeholder="Search TITLE / CUSA">
       <input autocomplete="off" type="number" min="1" placeholder="1/1" name="fpps4" class="pageSelector" id="search2">
-      <!-- chrome, stop thinking that an text and number field is used to input passwords... please-->
     </div>
     
     <div class="optionButtons">
@@ -58,6 +64,21 @@
     <div class="gameContainer skeletonAnimation"></div>
     <div class="gameContainer skeletonAnimation"></div>
     <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <div class="gameContainer skeletonAnimation"></div>
+    <h4 class="totalTimeText">0 results in 0ms </h4>
   </div>
   <div class="pageBarContainer">
     <img class="pageBarImage" id="pageBarBack" onclick="pageBarBack()" src="../images/arrow_back.svg" alt="">
@@ -69,7 +90,14 @@
   <h5 style="text-align: center; font-size: 0.8rem;">Trademarks and logos displayed on this website are the property of their respective owners.<br> The use of any third-party trademarks, brand names, product names, and logos is for<br> informational purposes only and does not imply endorsement or sponsorship.</h5>
   <br>
 </main>
-<footer id="footer"></footer>
+<footer id="footer">
+  <style>
+    footer {
+      height: 3.65rem;
+      margin-top: 3rem;
+    }
+  </style>
+</footer>
 <script defer src="app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public_html/parts/navbar.html b/public_html/parts/navbar.html
index 9927ecc..94f673c 100644
--- a/public_html/parts/navbar.html
+++ b/public_html/parts/navbar.html
@@ -8,7 +8,6 @@
         justify-content: space-between;
         width: 100%;
         height: 3rem;
-        /* margin-top: 1.5rem; */
         background-color: var(--main1);
         border: 0.05rem solid var(--border);
         border-radius: 0 0 0.5rem 0.5rem;
@@ -51,34 +50,14 @@
         border-radius: 0.25rem;
     }
 
-    /* .boostyLogoSmol,
-    .boostyLogo {
-        width: 5.7rem;
-        height: 2.5rem;
-        border-radius: 0.5rem;
-    }
-    .boostyLogoSmol {display: none;} */
-
     .smolImage {height: 1.5rem; width: 1.5rem;}
     .bigImage {height: 2.5rem; width: 2.5rem;}
-    .gh-logo, .dc-logo {padding: 0.38rem;} /* fix icon hover */
+    .gh-logo, .dc-logo {padding: 0.38rem;}
     .dc-logo {margin-right: 1.2vw;}
 
-    /* @media screen and (max-width: 700px) {
-        .boostyLogoSmol {
-            display: block;
-            width: 2rem;
-            margin: 0 0.5rem 0 0.5rem;
-        }
-
-        .boostyLogo {
-            display: none;
-        }
-    } */
-
-    .lightMode .navbar-right, .lightMode .logo {filter: invert(0);} /* light mode */
-    .lightMode .logo span {filter: invert(0);} /* light mode */
-    .menu-icon:hover, .gh-logo:hover, .dc-logo:hover, .lightModeButton:hover, .logo:hover, .boostyLogo:hover {background-color: #00000014;}/* hover effect */
+    .lightMode .navbar-right, .lightMode .logo {filter: invert(0);}
+    .lightMode .logo span {filter: invert(0);}
+    .menu-icon:hover, .gh-logo:hover, .dc-logo:hover, .lightModeButton:hover, .logo:hover {background-color: #00000014;}/* hover effect */
 </style>
 <a href="https://fpps4.net" class="logo">
     <span style="color: #fff53c; font-weight: 500;">fp</span><span style="font-weight: 500;">PS4</span>
@@ -98,9 +77,4 @@
         <img src="https://fpps4.net/parts/images/dark_mode.svg" id="darkModeIcon" style="opacity: 0;" class="bigImage" alt="Dark mode toggle">
         <img src="https://fpps4.net/parts/images/light_mode.svg" id="lightModeIcon" style="display: none;" class="bigImage" alt="Light mode toggle">
     </div>
-    <!-- <div class="seperator"></div>
-    <a href="https://boosty.to/fpps4" target="_blank">
-        <img src="https://fpps4.net/parts/images/boosty.svg" class="boostyLogo">
-        <img src="https://fpps4.net/parts/images/boostySmol.svg" class="boostyLogoSmol">
-    </a> -->
 </div>
\ No newline at end of file
-- 
2.51.2

