bvandeusen/FabledCurator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 35 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). --> 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;