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 @@