From 7b079bb9fdde3f2b8276a7100d3416405009c2be Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Fri, 14 Feb 2025 00:27:33 -0800 Subject: fix mobile scaling CSS issues --- index.js | 6 ++--- tiers.css | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ tiers.html | 1 + 3 files changed, 89 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 5e9a19c..8fb469c 100644 --- a/index.js +++ b/index.js @@ -308,9 +308,9 @@ async function save_tierlist_with_template(filename) { try { // Fetch resources let [templateResponse, jsResponse, cssResponse] = await Promise.all([ - fetch('tiers'), - fetch('tiers.js'), - fetch('tiers.css') + fetch('/tiers.html'), + fetch('/tiers.js'), + fetch('/tiers.css') ]); let [templateHTML, scriptContent, styleContent] = await Promise.all([ diff --git a/tiers.css b/tiers.css index 0f8f1db..c2e9fca 100644 --- a/tiers.css +++ b/tiers.css @@ -201,3 +201,88 @@ img:hover { .row-buttons, .top-container, .images { display: none !important; } + +/* ...existing code... */ + +/* Add these media queries at the end of the file */ +@media screen and (max-width: 768px) { + .tierlist span { + min-width: 60px; + min-height: 60px; + font-size: 20px; + } + + .tierlist div.row { + height: auto; + min-height: 60px; + flex-direction: column; + } + + span.header { + width: 100%; + height: 40px; + } + + span.items { + padding: 5px; + min-height: 60px; + } + + img { + max-height: 60px; + } + + .button { + height: 60px; + width: 60px; + } + + .button img { + width: 40px; + } + + .buttons-container { + gap: 10px; + flex-wrap: wrap; + } + + .modal-content { + padding: 15px; + width: 95%; + } + + #modal-title, #modal-description { + width: 90%; + } + + #modal-description { + height: 20vh; + } + + .title { + font-size: 20px; + margin-bottom: 10px; + } +} + +/* For very small screens */ +@media screen and (max-width: 480px) { + .tierlist span { + min-width: 50px; + min-height: 50px; + font-size: 16px; + } + + .button { + height: 50px; + width: 50px; + } + + .button img { + width: 30px; + } + + img { + max-height: 50px; + } +} \ No newline at end of file diff --git a/tiers.html b/tiers.html index c8eaabb..3e25d73 100644 --- a/tiers.html +++ b/tiers.html @@ -5,6 +5,7 @@ Exported Tier List +
-- cgit v1.2.3