Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-13 16:22:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Discover): improve styles to handle filters edge cases

Browse source
This commit is contained in:
Botzy 2025-02-18 15:35:14 +02:00
parent b1365e31d4
commit 224b6e6f76
2 changed files with 41 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/Discover/Discover.js
View file

@ -98,9 +98,11 @@ const Discover = ({ urlParams, queryParams }) => {
onSelect={onSelect}
/>
))}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} name={'filters'} />
</Button>
<div className={styles['filter-container']}>
<Button className={styles['filter-button']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} name={'filters'} />
</Button>
</div>
</div>
{
discover.catalog !== null && !discover.catalog.installed ?

55
src/routes/Discover/styles.less
View file

@ -59,7 +59,9 @@
display: none;
&~.filter-container {
display: flex;
.filter-button {
display: flex;
}
}
}
@ -69,20 +71,26 @@
}
.filter-container {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
.filter-icon {
display: flex;
flex: 1 0 5rem;
justify-content: flex-end;
.filter-button {
flex: none;
width: 1.4rem;
height: 1.4rem;
color: var(--primary-foreground-color);
display: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-left: 1.5rem;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
color: var(--primary-foreground-color);
}
}
}
}
@ -219,9 +227,14 @@
.select-input {
height: 3.5rem;
display: none;
&:not(:last-child) {
margin-bottom: 1rem;
&:nth-child(n+4) {
display: flex;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.multiselect-menu-container {
@ -362,7 +375,7 @@
&:nth-child(n+2) {
display: none;
&~.filter-container {
&~.filter-button {
display: flex;
}
}
@ -380,8 +393,12 @@
.selectable-inputs-modal-container {
.selectable-inputs-modal-content {
.select-input {
&:first-child {
display: none;
display: none;
&:nth-child(n+2) {
display: flex;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
}