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

fix(browse): put tabs and search on one row
CI / lint (push) Successful in 3s
Details
CI / frontend-build (push) Successful in 20s
Details
CI / backend-lint-and-test (push) Successful in 28s
Details
CI / integration (push) Successful in 3m12s
Details

Browse Source 
Operator-asked: the tab strip and search field were stacked; place them
side-by-side in a single flex bar (tabs left, search + scope chips right),
wrapping to two rows only on narrow viewports.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-06-12 00:25:03 -04:00
parent 2c544ad5af
commit 3e1303ea3c
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). --> under it (matches SettingsView's sticky tabs). -->
<div class="fc-browse__head"> <div class="fc-browse__head">
<v-container fluid class="py-0"> <v-container fluid class="py-0">
<v-tabs v-model="tab" density="compact" color="accent"> <!-- Tabs and search share one row: the axis switcher on the left, the
<v-tab value="posts">Posts</v-tab> search field + active-scope chips on the right (operator-asked
<v-tab value="artists">Artists</v-tab> 2026-06-12). Wraps to two rows only on narrow viewports. -->
<v-tab value="tags">Tags</v-tab> <div class="fc-browse__bar">
</v-tabs> <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"> <div class="fc-browse__search">
<v-text-field <v-text-field
v-model="searchInput" v-model="searchInput"
density="compact" variant="outlined" hide-details clearable density="compact" variant="outlined" hide-details clearable
prepend-inner-icon="mdi-magnify" prepend-inner-icon="mdi-magnify"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
:aria-label="searchPlaceholder" :aria-label="searchPlaceholder"
class="fc-browse__search-field" class="fc-browse__search-field"
/> />
<!-- Posts search stays scoped to the active artist/platform filter <!-- Posts search stays scoped to the active artist/platform filter
(operator-asked: 'if an artist is currently filtered in view'). (operator-asked: 'if an artist is currently filtered in view').
The chips surface that scope next to the search even after the The chips surface that scope next to the search even after the
PostsFilterBar scrolls off, and clear it to broaden. --> PostsFilterBar scrolls off, and clear it to broaden. -->
<template v-if="tab === 'posts'"> <template v-if="tab === 'posts'">
<v-chip <v-chip
v-if="artistId != null" closable size="small" v-if="artistId != null" closable size="small"
variant="tonal" color="accent" prepend-icon="mdi-account" variant="tonal" color="accent" prepend-icon="mdi-account"
@click:close="clearFilter('artist_id')" @click:close="clearFilter('artist_id')"
>{{ artistChipLabel }}</v-chip> >{{ artistChipLabel }}</v-chip>
<v-chip <v-chip
v-if="platform" closable size="small" v-if="platform" closable size="small"
variant="tonal" color="accent" prepend-icon="mdi-web" variant="tonal" color="accent" prepend-icon="mdi-web"
@click:close="clearFilter('platform')" @click:close="clearFilter('platform')"
>{{ platform }}</v-chip> >{{ platform }}</v-chip>
</template> </template>
</div>
</div> </div>
</v-container> </v-container>
</div> </div>
@@ -150,12 +158,23 @@ function clearFilter(key) {
z-index: 4; z-index: 4;
background: rgb(var(--v-theme-surface)); 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 { .fc-browse__search {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 0 12px; flex: 1 1 320px;
} }
.fc-browse__search-field { .fc-browse__search-field {
max-width: 360px; max-width: 360px;