better scaling

Axwabo · Feb 7, 2024 · 9c41be6 · 9c41be6
1 parent 9944cf3
commit 9c41be6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -2,6 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="description" content="Interactive SCP-914 recipe list for SCP:SL.">
     <meta name="author" content="Axwabo">
     <meta name="keywords" content="SCP, SCPSL, SCP:SL, SCP Secret Lab, SCP Secret Laboratory, 914, SCP-914, SCP SL, Secret Lab, SCP Universe, SCP games, SCP:CB, SCP: Containment Breach, SCPCB, SCP CB, Containment Breach, SCP 914, SCP:SL 914, SCPSL Recipes, SCP:SL Recipes">

diff --git a/main.js b/main.js
@@ -471,7 +471,7 @@ function loadApp() {
 function getScale() {
     const w = window.innerWidth;
     const h = window.innerHeight;
-    return Math.max(0.7, w > h ? h / 1080 : w / 1920);
+    return Math.max(0.4, w > h ? h / 1080 : w / 1920);
 }
 
 function onResize() {
@@ -530,6 +530,7 @@ function selectItem(div) {
     }
     targetIsSecondary = false;
     const clone = div.cloneNode(true);
+    clone.querySelector(".basicIcon")?.classList.add("scale-05");
     clone.setAttribute("data-item-name", item);
     const cont = $(s ? "#secondaryItem" : "#primaryItem").html("").append(clone);
     clone.addEventListener("click", () => {
@@ -937,8 +938,7 @@ function unitPriceGraph() {
     preventGuiFromClosing = true;
     closeContextMenu();
     $("#unitGraphCont").addClass("visible");
-    if ($("#appInfoCont.visible").get(0))
-        $("#appInfoCont").removeClass("visible");
+    $("#appInfoCont, #outputCont").removeClass("visible");
 }
 
 function closeGraph(overrideClicks = false) {
@@ -970,7 +970,7 @@ function addKeycard(infoCont, i) {
         const img = document.createElement("img");
         img.src = acc.img;
         img.draggable = false;
-        img.classList.add("basicIcon, scale-035");
+        img.classList.add("basicIcon", "scale-035");
         img.alt = level;
         accessCont.append(img);
     }
@@ -1010,6 +1010,7 @@ function addAmmo(infoCont, i) {
         if (item.category !== "firearm" || item.ammo !== i.name)
             continue;
         const clone = interactableItemClone(item.name, null, "info");
+        clone.querySelector(".basicIcon")?.classList.add("scale-05");
         firearmsCont.append(clone);
     }
     infoCont.append(firearmsCont);

diff --git a/style.css b/style.css
@@ -63,7 +63,7 @@ body {
 #langToggle {
     visibility: hidden;
     border: none;
-    font-size: 40px;
+    font-size: 30px;
     background-color: rgba(0, 0, 0, 0.5);
     color: rgb(200, 200, 200);
     user-select: none;
@@ -84,7 +84,7 @@ body {
 
 #appInfoBtn {
     visibility: hidden;
-    font-size: 40px;
+    font-size: 30px;
     background-color: transparent;
     width: 1.5em;
     height: 1.5em;
@@ -161,6 +161,7 @@ body {
 
 #overlays > div {
     width: calc(100% - 100px);
+    min-height: 90%;
     padding: 2.5% 32px 2.5% 68px;
     display: grid;
     justify-content: center;
@@ -174,6 +175,12 @@ body {
     display: none;
 }
 
+#unitGraphCont {
+    gap: 0.5em;
+    justify-content: start !important;
+    justify-items: start !important;
+}
+
 .iconCont {
     display: flex;
     justify-content: center;
@@ -198,6 +205,7 @@ body {
 }
 
 .itemInfo {
+    user-select: none;
     opacity: 0;
     transition: 0.3s;
     background-color: rgba(0, 0, 0, 0.75);
@@ -304,7 +312,7 @@ body {
     background-color: rgb(10, 10, 10);
     position: absolute;
     z-index: 10;
-    padding: 0.3rem;
+    padding: 0.2rem;
     overflow: hidden;
 }
 
@@ -313,12 +321,11 @@ body {
     background-color: rgb(30, 30, 30);
     color: white;
     cursor: pointer;
-    font-size: 1.5rem;
     width: 100%;
     transition-duration: 0.2s;
     transition-property: background-color, color, outline-color;
-    white-space: nowrap;
     outline: 0.1em solid transparent;
+    min-height: 2em;
 }
 
 .ctxButton:not(:first-child) {
@@ -357,9 +364,9 @@ body {
 
 #notice {
     width: 100vw;
-    font-size: 2rem;
+    font-size: 20px;
     display: block;
-    margin-top: 1em;
+    margin-top: 0.5em;
 }
 
 .chanceCont {
@@ -390,16 +397,16 @@ body {
 }
 
 #graphTitle {
-    font-size: 2em;
+    font-size: 1.5em;
     font-weight: bold;
     text-align: center;
     color: rgb(255, 180, 0);
 }
 
 #unitGraphTable {
     border-collapse: collapse;
-    /*display: block;*/
     overflow: scroll;
+    min-width: 20em;
 }
 
 tr, td {