webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: (wip) new filtering layout

Browse source 
DropDown component, ToggleButton component,
This commit is contained in:
Fiona Lena Urban 2025-05-13 20:43:15 +02:00
parent 38cd37cf74
commit 3fd26b4e66
11 changed files with 203 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/icons/sort_asc.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="m6.29 14.29l-.29.3V7a1 1 0 0 0-2 0v7.59l-.29-.3a1 1 0 0 0-1.42 1.42l2 2a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l2-2a1 1 0 0 0-1.42-1.42M11 8h10a1 1 0 0 0 0-2H11a1 1 1 0 0 0 2m10 3H11a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2m0 5H11a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 391 B

2
app/assets/icons/sort_desc.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="m6.29 14.29l-.29.3V7a1 1 0 0 0-2 0v7.59l-.29-.3a1 1 0 0 0-1.42 1.42l2 2a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l2-2a1 1 0 0 0-1.42-1.42M11 8h10a1 1 0 0 0 0-2H11a1 1 1 0 0 0 2m10 3H11a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2m0 5H11a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 391 B

64
app/assets/styles/form/dropdown.css Normal file
View file

@ -0,0 +1,64 @@
.DropDown {
--border-color: var(--color-light);
--label-color: var(--color-darkest);
--background-color: var(--color-lightest);
--arrow-color: var(--color-main-dark);
position: relative;
&.active {
--background-color: var(--color-main-dark);
--label-color: var(--color-lightest);
--arrow-color: var(--color-lightest);
--border-color: var(--color-main-dark);
& ul {
scale: 1 1;
}
}
& button {
all: unset;
cursor: pointer;
color: var(--label-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-default);
background: var(--background-color);
padding: .5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
transition: var(--transition-default);
width: 70px;
& .icon {
color: var(--arrow-color);
}
}
& ul {
position: absolute;
list-style: none;
transform-origin: top;
scale: 1 0;
transition: var(--transition-default);
color: var(--color-darkest);
border: 1px solid var(--color-main-dark);
border-radius: var(--radius-default);
background: var(--color-lightest);
box-shadow: var(--box-shadow-z2);
width: 100%;
z-index: 2000;
top: 0;
& li {
padding: .5rem 1rem;
&.selected {
background: var(--color-main-dark);
color: var(--color-lightest);
}
}
}
}

14
app/assets/styles/form/togglebutton.css Normal file
View file

@ -0,0 +1,14 @@
.ToggleButton {
all: unset;
color: var(--color-lightest);
background: var(--color-main-dark);
padding: .5rem .8rem;
border-radius: var(--radius-default);
display: flex;
align-items: center;
justify-content: center;
& .icon {
font-size: 1.2rem;
}
}

19
app/assets/styles/page.css
View file

@ -16,24 +16,9 @@
.filter-bar {
background: var(--color-lightest);
display: flex;
justify-content: space-between;
justify-content: flex-end;
gap: 1rem;
padding: var(--padding-default);
& > button {
all: unset;
cursor: pointer;
color: var(--color-main-darkest);
font-weight: bolder;
font-family: 'Roboto', sans-serif;
&.active {
color: var(--color-main-darkest);
}
&:not(.active) {
opacity: .5;
}
}
}
.search-bar {

2
app/assets/styles/priceCard.css
View file

@ -2,7 +2,7 @@
position: relative;
width: 100%;
color: var(--color-darkest);
border-bottom: 1px solid var(--color-light);
border-bottom: 1px dashed var(--color-light);
.bottom {
position: absolute;