Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-06 16:34:02 +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

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

@ -68,8 +68,8 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
return (
<ButtonToolbar className="filtered-list-toolbar">
<ButtonGroup>
{onToggleSidebar && (
<div>
<ButtonGroup>
<Button
className="sidebar-toggle-button"
@ -80,10 +80,9 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
<SidebarIcon />
</Button>
</ButtonGroup>
</div>
)}
</ButtonGroup>
<div>
<ButtonGroup>
{showEditFilter && (
<ListFilter
@ -102,6 +101,7 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
onEdit={onEdit}
onDelete={onDelete}
/>
<ButtonGroup>
<ListViewOptions
displayMode={filter.displayMode}
displayModeOptions={filterOptions.displayModeOptions}
@ -110,10 +110,8 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
onSetZoom={zoomable ? setZoom : undefined}
/>
</ButtonGroup>
</div>
<div>
</ButtonGroup>
<ButtonGroup></ButtonGroup>
</div>
</ButtonToolbar>
);
};

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

@ -871,6 +871,14 @@ input[type="range"].zoom-slider {
flex-wrap: wrap;
justify-content: center;
row-gap: 0.5rem;
&:first-child {
justify-content: flex-start;
}
&:last-child {
justify-content: flex-end;
}
}
.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 {
display: flex;
flex: 1;
flex-wrap: nowrap;
&:first-child {
justify-content: flex-start;
@ -922,6 +923,16 @@ input[type="range"].blue-slider {
&:last-child {
justify-content: flex-end;
}
@include media-breakpoint-down(xs) {
&:nth-child(2) {
justify-content: flex-end;
}
&:last-child {
display: none;
}
}
}
}