Starting work on mobile adjustments

TohnoCoding · Oct 3, 2024 · b53c828 · b53c828
1 parent 1e6fd76
commit b53c828
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/css/Site.css b/css/Site.css
@@ -141,6 +141,10 @@ div.member-eventonly {
 }
 
 /* share buttons */
+#share {
+    z-index: 9999999;
+}
+
 #share button {
 	margin: 5px;
   	font-size: 24px;
@@ -172,12 +176,38 @@ div.member-eventonly {
     #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;
+    }
+
+    .member-container {
+        transform: scale(1.3);
+    }
+
+    .member-np {
+        transform: scale(0.6);
+        margin-right: -5px;
+        margin-bottom: -5px;
+    }
+}
+
 .statsColumn {
     max-width: 49.5%;
     display: inline-block;
     padding-left: 4em;
 }
 
+.center-portraits {
+    justify-content: center;
+}
+
 #statsContainer { margin: 0 auto; padding: 0; max-width: 90%; min-width: 60%; }
 
 .centerText { text-align: center; }

diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
     <meta name="twitter:title" content="FGO Servant checklist with NP count">
     <meta name="twitter:description" content="Another FGO Servant checklist with NP count, forked from Nechi.">
     <meta name="twitter:image" content="img/fgo-check-og.jpg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- CSS -->
     <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="css/select2/select2.min.css" crossorigin="anonymous">

diff --git a/js/index.js b/js/index.js
@@ -814,8 +814,10 @@ function openFileUploadPrompt()
 /**
  * Updates the UI whenever Class Mode is toggled.
  */
-function updateClassMode()
-{ updateURLOptionModeOnly(); finishLoading(); } // Class mode change
+function updateClassMode() {  // Class mode change
+    updateURLOptionModeOnly(); finishLoading();
+    if(!isClassMode()) { $('.row').toggleClass('center-portraits'); } 
+} 
 
 /**
  * Removes the noticeboard at the top.