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

fix(browse): tabs and search on one row #99

Merged
bvandeusen merged 1 commits from dev into main 2026-06-12 00:28:38 -04:00
Conversation 0 Commits 1 Files Changed 1
+50 -31
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;