mirror of
https://github.com/markuryy/shark.git
synced 2025-12-12 11:41:02 +00:00
refctor(ui): make tabs layout consistent with the rest of the app in settings and queue
This commit is contained in:
@@ -42,24 +42,39 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="downloads-page">
|
||||
<div class="header">
|
||||
<h2>Downloads</h2>
|
||||
<div class="header-actions">
|
||||
<button onclick={handleClearCompleted} disabled={queueItems.every(i => i.status !== 'completed')}>
|
||||
Clear Completed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="downloads-wrapper">
|
||||
<h2 style="padding: 8px">Downloads</h2>
|
||||
|
||||
{#if queueItems.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No downloads in queue</p>
|
||||
<p class="help-text">Add tracks, albums, or playlists from services to start downloading</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="sunken-panel" style="overflow: auto; flex: 1;">
|
||||
<table class="interactive">
|
||||
<section class="downloads-content">
|
||||
<!--
|
||||
svelte-ignore a11y_no_noninteractive_element_to_interactive_role
|
||||
Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
|
||||
-->
|
||||
<menu role="tablist">
|
||||
<li role="tab" aria-selected={true}>
|
||||
<button>Queue</button>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
<div class="window tab-content" role="tabpanel">
|
||||
<div class="window-body">
|
||||
<div class="tab-header">
|
||||
<h4>{queueItems.length} item{queueItems.length !== 1 ? 's' : ''} in queue</h4>
|
||||
<div class="header-actions">
|
||||
<button onclick={handleClearCompleted} disabled={queueItems.every(i => i.status !== 'completed')}>
|
||||
Clear Completed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if queueItems.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No downloads in queue</p>
|
||||
<p class="help-text">Add tracks, albums, or playlists from services to start downloading</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="sunken-panel table-container">
|
||||
<table class="interactive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-title">Title</th>
|
||||
@@ -97,28 +112,62 @@
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.downloads-page {
|
||||
.downloads-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.downloads-content {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: -2px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tab-content .window-body {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--button-shadow, #808080);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-header h4 {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
@@ -126,13 +175,21 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
opacity: 0.6;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(#666, #999);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
@@ -155,6 +212,9 @@
|
||||
|
||||
.col-title {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.col-artist {
|
||||
|
||||
@@ -141,32 +141,34 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="padding: 8px;">
|
||||
<h2>Settings</h2>
|
||||
<!--
|
||||
svelte-ignore a11y_no_noninteractive_element_to_interactive_role
|
||||
Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
|
||||
The role="tablist" selector is used by 98.css CSS rules (menu[role="tablist"]).
|
||||
The <menu> element IS interactive (contains clickable <button> elements) and the
|
||||
role="tablist" properly describes the semantic purpose to assistive technology.
|
||||
This is the documented pattern from 98.css and matches WAI-ARIA tab widget patterns.
|
||||
-->
|
||||
<menu role="tablist">
|
||||
<li role="tab" aria-selected={activeTab === 'library'}>
|
||||
<a href="#library" onclick={(e) => { e.preventDefault(); activeTab = 'library'; }}>Library</a>
|
||||
</li>
|
||||
<li role="tab" aria-selected={activeTab === 'deezer'}>
|
||||
<a href="#deezer" onclick={(e) => { e.preventDefault(); activeTab = 'deezer'; }}>Deezer</a>
|
||||
</li>
|
||||
<li role="tab" aria-selected={activeTab === 'advanced'}>
|
||||
<a href="#advanced" onclick={(e) => { e.preventDefault(); activeTab = 'advanced'; }}>Advanced</a>
|
||||
</li>
|
||||
</menu>
|
||||
<div class="settings-wrapper">
|
||||
<h2 style="padding: 8px">Settings</h2>
|
||||
|
||||
<div class="window" role="tabpanel">
|
||||
<div class="window-body">
|
||||
<section class="settings-content">
|
||||
<!--
|
||||
svelte-ignore a11y_no_noninteractive_element_to_interactive_role
|
||||
Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
|
||||
The role="tablist" selector is used by 98.css CSS rules (menu[role="tablist"]).
|
||||
The <menu> element IS interactive (contains clickable <button> elements) and the
|
||||
role="tablist" properly describes the semantic purpose to assistive technology.
|
||||
This is the documented pattern from 98.css and matches WAI-ARIA tab widget patterns.
|
||||
-->
|
||||
<menu role="tablist">
|
||||
<li role="tab" aria-selected={activeTab === 'library'}>
|
||||
<a href="#library" onclick={(e) => { e.preventDefault(); activeTab = 'library'; }}>Library</a>
|
||||
</li>
|
||||
<li role="tab" aria-selected={activeTab === 'deezer'}>
|
||||
<a href="#deezer" onclick={(e) => { e.preventDefault(); activeTab = 'deezer'; }}>Deezer</a>
|
||||
</li>
|
||||
<li role="tab" aria-selected={activeTab === 'advanced'}>
|
||||
<a href="#advanced" onclick={(e) => { e.preventDefault(); activeTab = 'advanced'; }}>Advanced</a>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
<div class="window tab-content" role="tabpanel">
|
||||
<div class="window-body">
|
||||
{#if activeTab === 'library'}
|
||||
<section class="tab-content">
|
||||
<section>
|
||||
<h3>Library Folders</h3>
|
||||
<div class="field-row-stacked">
|
||||
<label for="music-folder">Music Folder</label>
|
||||
@@ -214,7 +216,7 @@
|
||||
</div>
|
||||
</section>
|
||||
{:else if activeTab === 'deezer'}
|
||||
<section class="tab-content">
|
||||
<section>
|
||||
<h3>Deezer Download Settings</h3>
|
||||
|
||||
<div class="field-row-stacked">
|
||||
@@ -336,7 +338,7 @@
|
||||
</fieldset>
|
||||
</section>
|
||||
{:else if activeTab === 'advanced'}
|
||||
<section class="tab-content">
|
||||
<section>
|
||||
<h3>Advanced Settings</h3>
|
||||
|
||||
<div class="field-row-stacked">
|
||||
@@ -364,14 +366,20 @@
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.settings-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -380,12 +388,27 @@
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
menu[role="tablist"] {
|
||||
margin-bottom: 0;
|
||||
.settings-content {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin: 0;
|
||||
margin-top: -2px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tab-content .window-body {
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.info-note {
|
||||
|
||||
Reference in New Issue
Block a user