bvandeusen/FabledCurator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Merge pull request 'fix(browse): tabs and search on one row' (#99) from dev into main
Build images / sign-extension (push) Successful in 3s
Details
CI / lint (push) Successful in 3s
Details
Build images / build-ml (push) Successful in 7s
Details
CI / frontend-build (push) Successful in 24s
Details
CI / backend-lint-and-test (push) Successful in 29s
Details
Build images / build-web (push) Successful in 11s
Details
CI / integration (push) Successful in 3m13s
Details

Browse Source
This commit was merged in pull request #99.
This commit is contained in:
bvandeusen
2026-06-12 00:28:38 -04:00
parent 909fa37b15 3e1303ea3c
commit 11e9f5af60
1 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/BrowseView.vue
+50 -31
View File
@@ -9,37 +9,45 @@
under it (matches SettingsView's sticky tabs). -->
<div class="fc-browse__head">
<v-container fluid class="py-0">
<v-tabs v-model="tab" density="compact" color="accent">
<v-tab value="posts">Posts</v-tab>
<v-tab value="artists">Artists</v-tab>
<v-tab value="tags">Tags</v-tab>
</v-tabs>
<!-- Tabs and search share one row: the axis switcher on the left, the
search field + active-scope chips on the right (operator-asked
2026-06-12). Wraps to two rows only on narrow viewports. -->
<div class="fc-browse__bar">
<v-tabs
v-model="tab" density="compact" color="accent"
class="fc-browse__tabs"
>
<v-tab value="posts">Posts</v-tab>
<v-tab value="artists">Artists</v-tab>
<v-tab value="tags">Tags</v-tab>
</v-tabs>
<div class="fc-browse__search">
<v-text-field
v-model="searchInput"
density="compact" variant="outlined" hide-details clearable
prepend-inner-icon="mdi-magnify"
:placeholder="searchPlaceholder"
:aria-label="searchPlaceholder"
class="fc-browse__search-field"
/>
<!-- Posts search stays scoped to the active artist/platform filter
(operator-asked: 'if an artist is currently filtered in view').
The chips surface that scope next to the search even after the
PostsFilterBar scrolls off, and clear it to broaden. -->
<template v-if="tab === 'posts'">
<v-chip
v-if="artistId != null" closable size="small"
variant="tonal" color="accent" prepend-icon="mdi-account"
@click:close="clearFilter('artist_id')"
>{{ artistChipLabel }}</v-chip>
<v-chip
v-if="platform" closable size="small"
variant="tonal" color="accent" prepend-icon="mdi-web"
@click:close="clearFilter('platform')"
>{{ platform }}</v-chip>
</template>
<div class="fc-browse__search">
<v-text-field
v-model="searchInput"
density="compact" variant="outlined" hide-details clearable
prepend-inner-icon="mdi-magnify"
:placeholder="searchPlaceholder"
:aria-label="searchPlaceholder"
class="fc-browse__search-field"
/>
<!-- Posts search stays scoped to the active artist/platform filter
(operator-asked: 'if an artist is currently filtered in view').
The chips surface that scope next to the search even after the
PostsFilterBar scrolls off, and clear it to broaden. -->
<template v-if="tab === 'posts'">
<v-chip
v-if="artistId != null" closable size="small"
variant="tonal" color="accent" prepend-icon="mdi-account"
@click:close="clearFilter('artist_id')"
>{{ artistChipLabel }}</v-chip>
<v-chip
v-if="platform" closable size="small"
variant="tonal" color="accent" prepend-icon="mdi-web"
@click:close="clearFilter('platform')"
>{{ platform }}</v-chip>
</template>
</div>
</div>
</v-container>
</div>
@@ -150,12 +158,23 @@ function clearFilter(key) {
z-index: 4;
background: rgb(var(--v-theme-surface));
}
.fc-browse__bar {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 8px 0;
}
.fc-browse__tabs {
flex: 0 0 auto;
width: auto;
}
.fc-browse__search {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 0 12px;
flex: 1 1 320px;
}
.fc-browse__search-field {
max-width: 360px;