From 0a73fcbcf5530c90b286d8b10e57eb993c02bce0 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Thu, 22 May 2025 07:47:44 +0200
Subject: [PATCH] add: (WIP) category view

Removed h1 from calculator, add preparation for category view
---
 app/assets/styles/page.css | 22 +++++++++++++++++++---
 app/pages/index.vue        | 38 +++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css
index 60579c0..e8695d1 100644
--- a/app/assets/styles/page.css
+++ b/app/assets/styles/page.css
@@ -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 {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index d03f84e..52fdddf 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -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