Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-06 08:26:00 +01:00
Code Issues Projects Releases Wiki Activity

Fix filtered list toolbar overflow on mobile devices (#5933)

Browse source 
Scenes list page is still ugly, but that will be addressed separately.
This commit is contained in:
WithoutPants 2025-06-17 12:30:28 +10:00 committed by GitHub
parent 7d692232ed
commit fe9a6d87d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
ui/v2.5/src/components/List/FilteredListToolbar.tsx
View file

@ -68,8 +68,8 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
return ( return (
<ButtonToolbar className="filtered-list-toolbar"> <ButtonToolbar className="filtered-list-toolbar">
{onToggleSidebar && ( <ButtonGroup>
<div> {onToggleSidebar && (
<ButtonGroup> <ButtonGroup>
<Button <Button
className="sidebar-toggle-button" className="sidebar-toggle-button"
@ -80,28 +80,28 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
<SidebarIcon /> <SidebarIcon />
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</div> )}
)} </ButtonGroup>
<div> <ButtonGroup>
<ButtonGroup> {showEditFilter && (
{showEditFilter && ( <ListFilter
<ListFilter onFilterUpdate={setFilter}
onFilterUpdate={setFilter} filter={filter}
filter={filter} openFilterDialog={() => showEditFilter()}
openFilterDialog={() => showEditFilter()} view={view}
view={view} withSidebar={!!onToggleSidebar}
withSidebar={!!onToggleSidebar}
/>
)}
<ListOperationButtons
onSelectAll={onSelectAll}
onSelectNone={onSelectNone}
otherOperations={operations}
itemsSelected={selectedIds.size > 0}
onEdit={onEdit}
onDelete={onDelete}
/> />
)}
<ListOperationButtons
onSelectAll={onSelectAll}
onSelectNone={onSelectNone}
otherOperations={operations}
itemsSelected={selectedIds.size > 0}
onEdit={onEdit}
onDelete={onDelete}
/>
<ButtonGroup>
<ListViewOptions <ListViewOptions
displayMode={filter.displayMode} displayMode={filter.displayMode}
displayModeOptions={filterOptions.displayModeOptions} displayModeOptions={filterOptions.displayModeOptions}
@ -110,10 +110,8 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
onSetZoom={zoomable ? setZoom : undefined} onSetZoom={zoomable ? setZoom : undefined}
/> />
</ButtonGroup> </ButtonGroup>
</div> </ButtonGroup>
<div> <ButtonGroup></ButtonGroup>
<ButtonGroup></ButtonGroup>
</div>
</ButtonToolbar> </ButtonToolbar>
); );
}; };

8
ui/v2.5/src/components/List/styles.scss
View file

@ -871,6 +871,14 @@ input[type="range"].zoom-slider {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
row-gap: 0.5rem; row-gap: 0.5rem;
&:first-child {
justify-content: flex-start;
}
&:last-child {
justify-content: flex-end;
}
} }
.btn.display-mode-select { .btn.display-mode-select {

11
ui/v2.5/src/components/Scenes/styles.scss
View file

@ -910,6 +910,7 @@ input[type="range"].blue-slider {
& > div { & > div {
display: flex; display: flex;
flex: 1; flex: 1;
flex-wrap: nowrap;
&:first-child { &:first-child {
justify-content: flex-start; justify-content: flex-start;
@ -922,6 +923,16 @@ input[type="range"].blue-slider {
&:last-child { &:last-child {
justify-content: flex-end; justify-content: flex-end;
} }
@include media-breakpoint-down(xs) {
&:nth-child(2) {
justify-content: flex-end;
}
&:last-child {
display: none;
}
}
} }
} }