From 8f81d2d7d38a9427ef6b04d5ccdc2a642e1385fc Mon Sep 17 00:00:00 2001
From: TohnoCoding <98242280+TohnoCoding@users.noreply.github.com>
Date: Thu, 3 Oct 2024 19:40:50 -0400
Subject: [PATCH] Adjustments and mobile landscape disclaimer

I hate hate hate hate hate hate hate hate hate hate hate hate hate hate hate hate hate hate hate mobile media queries so damn much.
---
 css/Site.css | 29 +++++++++--------------------
 index.html   |  7 ++++---
 js/index.js  |  8 +++-----
 3 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/css/Site.css b/css/Site.css
index 631b87e..80f1033 100644
--- a/css/Site.css
+++ b/css/Site.css
@@ -5,7 +5,7 @@
   -webkit-transform: translateY(50%);
   -ms-transform: translateY(50%);
   transform: translateY(50%);
-  font-size: 0.8em;
+  font-size: 0.8em;  
 }
 
 .btn-data {
@@ -171,33 +171,22 @@ div.member-eventonly {
     .icon-bar { transform: scale(0.65); right: 0px; top: 2%; }
 }
 
-@media screen and (orientation: portrait) and (min-width: 768px) {
+@media screen and (orientation: portrait) { /* I HATE MOBILE SO DAMN MUCH */
     #buttonsArea { width: 40% !important; }
+    
     #checkboxArea { padding-right: 4em !important; }
-}
-
-@media screen and (max-aspect-ratio: 16/9) { /* TODO: ADJUST FOR MOBILE */
-    .container {
-        max-width: 90%;
-    }
 
-    .col-1 {
-        margin-left: 15px !important;
-        margin-right: 15px !important;
-        margin-bottom: 15px !important;
+    .icon-bar {
+        right: 5% !important;
     }
     
-    .member-container {
-        transform: scale(1.3);
-    }
-    
-    .member-np {
-        transform: scale(0.6);
-        margin-right: -5px;
-        margin-bottom: -5px;
+    .container {
+        max-width: 95% !important;
     }
 }
 
+.listbox { justify-content: center; }
+
 .statsColumn {
     max-width: 49.5%;
     display: inline-block;
diff --git a/index.html b/index.html
index 1c76e12..0fd53b8 100644
--- a/index.html
+++ b/index.html
@@ -67,9 +67,10 @@ <h6 id="rmvNotice">[ Click/tap here to remove this message. ]</h6>
     </div>
     <div class="card" id="headerCard">
         <div id="card-body" class="card-body" style="text-align:center; padding: 0px;">
-            <p id="page_whatami">Yet another FGO Servant checklist with NP count.
-            Forked from <a href="https://nechigawara.github.io/nechi-fgo-checklist/" target="_blank">Nechigawara</a>.<br />
-            Please note that the site may take a while loading on first visit from caching all images.</p>
+            <p id="page_whatami">Please note that the site may take a while loading on first visit from caching all
+            images, and that <span style="font-weight: bold;">the best user experience is to use the site on <span
+            style="font-style: italic;">LANDSCAPE</span> view, as adjusting the complexity of a site like this for
+            mobile is a virtually impossible task for a non-UX developer like myself.</span> Sorry about that.</p>
             <form>
                 <table id="optionsAndButtons">
                     <tr>
diff --git a/js/index.js b/js/index.js
index 38e1246..d748ea0 100644
--- a/js/index.js
+++ b/js/index.js
@@ -814,17 +814,15 @@ function openFileUploadPrompt()
 /**
  * Updates the UI whenever Class Mode is toggled.
  */
-function updateClassMode() {  // Class mode change
-    updateURLOptionModeOnly(); finishLoading();
-    if(!isClassMode()) { $('.row').toggleClass('center-portraits'); } 
-} 
+function updateClassMode()
+{ updateURLOptionModeOnly(); finishLoading(); }   // Class mode change
 
 /**
  * Removes the noticeboard at the top.
  */
 function removeNoticeboard() {
     $('#noticeBoard').slideUp(function() {
-        $(this).remove(); // Removes the element after the animation completes
+        $(this).remove(); // Removes element after animation completes
     });
 }