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

add: (WIP) category view

Browse source 
Removed h1 from calculator, add preparation for category view
This commit is contained in:
Fiona Lena Urban 2025-05-22 07:47:44 +02:00
parent 50ef15c1a6
commit 0a73fcbcf5
2 changed files with 44 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,11 +14,27 @@
}
.filter-bar {
background: var(--color-lightest);
display: flex;
justify-content: flex-end;
gap: 1rem;
justify-content: space-between;
padding: var(--padding-default);
& .box {
display: flex;
flex-direction: column;
gap: .5rem;
& strong {
color: var(--color-darkest);
font-size: .8rem;
}
& > div {
background: var(--color-lightest);
display: flex;
justify-content: flex-end;
gap: .5rem;
}
}
}
.search-bar {

38
app/pages/index.vue
View file

@ -13,20 +13,32 @@
@update="updateCard()"
/>
<section class="content flex-col">
<div class="content-text">
<h1>Mit ProPapier Preise vergleichen und sparen</h1>
</div>
<aside class="filter-bar">
<PpFormDropDown
:elements="sortElements"
:current="currentSortElement!"
@click="setSortElement"
/>
<PpFormToggleButton
:icons="['pp:sort-desc', 'pp:sort-asc']"
:current="currentSortDirection"
@click="countSortDirection"
/>
<div class="box">
<strong>Kategorie:</strong>
<div>
<PpFormDropDown
:elements="sortElements"
:current="currentSortElement!"
@click="setSortElement"
/>
</div>
</div>
<div class="box">
<strong>Preise Sortieren nach:</strong>
<div>
<PpFormDropDown
:elements="sortElements"
:current="currentSortElement!"
@click="setSortElement"
/>
<PpFormToggleButton
:icons="['pp:sort-desc', 'pp:sort-asc']"
:current="currentSortDirection"
@click="countSortDirection"
/>
</div>
</div>
</aside>
<div class="flex-col" role="list" v-if="cards.length">
<PpPriceCard