From a661f8222d3585d71682655de8181b6c231c2030 Mon Sep 17 00:00:00 2001
From: Andus <me@andus.dev>
Date: Mon, 23 Jun 2025 16:29:33 +0200
Subject: [PATCH] Poprawa mobilnego UI

---
 app/docker_utils.py          |  6 ++---
 app/static/style.css         | 44 ++++++++++++++++++++++++++++--------
 app/templates/dashboard.html | 31 +++++++++++++++++++------
 3 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/app/docker_utils.py b/app/docker_utils.py
index e139217..0491ce7 100644
--- a/app/docker_utils.py
+++ b/app/docker_utils.py
@@ -115,9 +115,9 @@ def start_server(username):
             f"{ports[1]}/tcp": ports[1],
             f"{ports[2]}/tcp": ports[2],
         },
-        volumes={
-            os.path.abspath(path): {'bind': '/data', 'mode': 'rw'}
-        },
+        volumes=[
+            f"{os.path.abspath(path)}:/data"
+        ],
         environment=environment,
         restart_policy={"Name": "unless-stopped"}
     )
diff --git a/app/static/style.css b/app/static/style.css
index 054bac1..10edd10 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -105,8 +105,9 @@ h2 {
 
 /* Tabs */
 .tabs {
+    /* Desktop default layout */
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr); /* Original desktop layout */
     gap: 14px;
     margin-bottom: 26px;
 }
@@ -121,6 +122,11 @@ h2 {
     color: #ccc;
     transition: background-color 0.25s, transform 0.2s;
     box-shadow: 0 0 8px transparent;
+    /* Flexbox for text and icon alignment */
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center content horizontally */
+    gap: 8px; /* Space between text and icon */
 }
 
 .tab-button:hover {
@@ -134,6 +140,16 @@ h2 {
     box-shadow: 0 0 14px #4a5aef99;
 }
 
+.tab-button .tab-icon {
+    font-size: 1.2em; /* Adjust icon size as needed */
+}
+
+.tab-button .tab-text {
+    /* By default, text is visible on desktop */
+    display: block;
+}
+
+
 .square-button {
     aspect-ratio: 1 / 1;
     width: 200px;
@@ -666,18 +682,28 @@ a.non-link:hover {
         box-sizing: border-box;
     }
 
+    /* Tabs on Mobile: Single row, icons only */
     .tabs {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 10px;
-        margin-bottom: 12px;
+        display: flex; /* Use flexbox for a single row */
+        grid-template-columns: unset; /* Override grid for mobile */
+        justify-content: space-around; /* Distribute items evenly */
+        flex-wrap: nowrap; /* Keep tabs in a single row */
+        overflow-x: auto; /* Enable horizontal scrolling if buttons exceed screen width */
+        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+        padding-bottom: 5px; /* Add some padding for scrollbar if present */
+        gap: 8px; /* Slightly smaller gap on mobile */
     }
 
     .tab-button {
-        padding: 12px;
-        font-size: 0.95rem;
-        width: 100%;
-        box-sizing: border-box;
+        flex-shrink: 0; /* Prevent buttons from shrinking */
+        padding: 10px 15px; /* Adjust padding for icon-only buttons */
+        /* Center content for icon-only */
+        justify-content: center;
+        width: auto; /* Allow buttons to size to content */
+    }
+
+    .tab-button .tab-text {
+        display: none; /* Hide the text on mobile */
     }
 
     .square-button {
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 51d76c0..fc1cdee 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -3,12 +3,24 @@
 <h2>Twój serwer Minecraft</h2>
 
 <div class="tabs">
-    <button class="tab-button" onclick="showTab('controls')">Sterowanie 🎛️</button>
-    <button class="tab-button" onclick="showTab('console')">Konsola 📟</button>
-    <button class="tab-button" onclick="showTab('files')">Pliki 📁</button>
-    <button class="tab-button" onclick="showTab('config')">Konfiguracja 🛠️</button>
-    <button class="tab-button" onclick="showTab('mods')">Mody/Pluginy 🧩</button>
-    <button class="tab-button" onclick="showTab('statistics')">Statystyki 📈</button>
+    <button class="tab-button" onclick="showTab('controls')">
+        <span class="tab-text">Sterowanie</span> <span class="tab-icon">🎛️</span>
+    </button>
+    <button class="tab-button" onclick="showTab('console')">
+        <span class="tab-text">Konsola</span> <span class="tab-icon">📟</span>
+    </button>
+    <button class="tab-button" onclick="showTab('files')">
+        <span class="tab-text">Pliki</span> <span class="tab-icon">📁</span>
+    </button>
+    <button class="tab-button" onclick="showTab('config')">
+        <span class="tab-text">Konfiguracja</span> <span class="tab-icon">🛠️</span>
+    </button>
+    <button class="tab-button" onclick="showTab('mods')">
+        <span class="tab-text">Mody/Pluginy</span> <span class="tab-icon">🧩</span>
+    </button>
+    <button class="tab-button" onclick="showTab('statistics')">
+        <span class="tab-text">Statystyki</span> <span class="tab-icon">📈</span>
+    </button>
 </div>
 
 <div class="tab-content">
@@ -141,6 +153,11 @@
     function showTab(id) {
         document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
         $(id).classList.add('active');
+        // Close the mobile menu if it's open (optional, depending on your menu implementation)
+        const tabsContainer = document.querySelector('.tabs');
+        if (tabsContainer.classList.contains('mobile-active')) {
+            tabsContainer.classList.remove('mobile-active');
+        }
     }
 
     let currentPath = '';
@@ -267,4 +284,4 @@
     setInterval(checkServerStatus, 5000);
 </script>
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file