Only show Upload button on library view

This commit is contained in:
2026-06-14 13:53:20 +02:00
parent a61f3a9c33
commit d2ce7f0fdc
5 changed files with 22 additions and 20 deletions
+3
View File
@@ -40,3 +40,6 @@ data/saves/*
# OS # OS
.DS_Store .DS_Store
Thumbs.db Thumbs.db
# Gitea
.gitea/
+1 -1
View File
@@ -43,7 +43,7 @@
}); });
</script> </script>
<Header onUploadClick={() => uploadTriggered++} /> <Header onUploadClick={() => uploadTriggered++} hideUpload={route !== "/"} />
<main class="container"> <main class="container">
{#if route === "/"} {#if route === "/"}
+13 -8
View File
@@ -98,7 +98,8 @@ h3 { font-size: 1.2rem; }
/* ═══════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════
BUTTONS BUTTONS
═══════════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════════ */
.btn { /* Only targets DOStalgia buttons, not js-dos emulator buttons inside .dos-container */
.btn.btn:not(.dos-container .btn) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -111,32 +112,36 @@ h3 { font-size: 1.2rem; }
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
text-transform: none;
height: auto;
min-height: 0;
line-height: normal;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.btn:hover { .btn.btn:not(.dos-container .btn):hover {
background: var(--phosphor-burn); background: var(--phosphor-burn);
border-color: var(--phosphor); border-color: var(--phosphor);
box-shadow: 0 0 12px var(--phosphor-dark); box-shadow: 0 0 12px var(--phosphor-dark);
} }
.btn:active { .btn.btn:not(.dos-container .btn):active {
transform: scale(0.97); transform: scale(0.97);
} }
.btn-primary { .btn-primary.btn-primary:not(.dos-container .btn) {
background: var(--phosphor-dark); background: var(--phosphor-dark);
border-color: var(--phosphor); border-color: var(--phosphor);
color: var(--phosphor-glow); color: var(--phosphor-glow);
} }
.btn-primary:hover { .btn-primary.btn-primary:not(.dos-container .btn):hover {
background: var(--phosphor-dim); background: var(--phosphor-dim);
color: var(--bg); color: var(--bg);
} }
.btn-danger { .btn-danger.btn-danger:not(.dos-container .btn) {
border-color: #cc3333; border-color: #cc3333;
color: #cc3333; color: #cc3333;
} }
.btn-danger:hover { .btn-danger.btn-danger:not(.dos-container .btn):hover {
background: #331111; background: #331111;
border-color: #ff4444; border-color: #ff4444;
color: #ff4444; color: #ff4444;
@@ -187,7 +192,7 @@ input::placeholder {
@media (max-width: 640px) { @media (max-width: 640px) {
h1 { font-size: 1.5rem; } h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; } h2 { font-size: 1.25rem; }
.btn { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; } .btn.btn:not(.dos-container .btn) { padding: 8px 14px; font-size: 0.85rem; min-height: 40px; }
input, textarea, select { font-size: 16px; } /* prevents iOS zoom */ input, textarea, select { font-size: 16px; } /* prevents iOS zoom */
} }
+4 -2
View File
@@ -1,5 +1,5 @@
<script> <script>
let { onUploadClick = () => {} } = $props(); let { onUploadClick = () => {}, hideUpload = false } = $props();
</script> </script>
<header class="header"> <header class="header">
@@ -17,7 +17,9 @@
<span class="logo-text">DOSTALGIA</span> <span class="logo-text">DOSTALGIA</span>
</a> </a>
<nav> <nav>
<button class="btn" onclick={onUploadClick}>+ Upload</button> {#if !hideUpload}
<button class="btn" onclick={onUploadClick}>+ Upload</button>
{/if}
</nav> </nav>
</div> </div>
</header> </header>
+1 -9
View File
@@ -134,7 +134,7 @@
{isSetup ? "Back" : game.title} {isSetup ? "Back" : game.title}
</button> </button>
{#if running} {#if running}
<button class="btn stop-btn" onclick={stopEmulator}> Stop</button> <button class="btn btn-danger" onclick={stopEmulator}> Stop</button>
{/if} {/if}
{/if} {/if}
</div> </div>
@@ -211,14 +211,6 @@
font-family: var(--font-sans); font-family: var(--font-sans);
} }
.link-button:hover { color: var(--phosphor); } .link-button:hover { color: var(--phosphor); }
.stop-btn {
border-color: #cc3333;
color: #ff4444;
}
.stop-btn:hover {
background: #331111;
box-shadow: 0 0 12px #331111;
}
/* Emulator canvas — always mounted */ /* Emulator canvas — always mounted */
.dos-container { .dos-container {