add: search bar

Add new header and search bar

app/app.vue

@@ -1,5 +1,7 @@
 <template>
   <PpHeader />
-  <NuxtPage />
+  <div class="page">
+    <NuxtPage />
+  </div>
   <PpFooter />
 </template>

app/assets/styles/button.css

@@ -93,6 +93,19 @@
         }
     }
 
+    &.search-button {
+        --background: var(--color-lightest);
+        --color: var(--color-main-darkest);
+        border-radius: 100%;
+        padding: var(--padding);
+        font-size: 1.1em;
+
+        &:hover {
+            scale: 1.2;
+            --background: var(--color-light);
+        }
+    }
+
     &.mini-button {
         padding: .5rem 1.5rem;
         display: flex;

app/assets/styles/buttonGroup.css

@@ -1,7 +1,6 @@
 .ButtonGroup {
     display: flex;
     background: var(--color-main);
-    box-shadow: var(--box-shadow-z2);
 
     & button {
         --color: var(--color-light);

app/assets/styles/fonts.css

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url('/fonts/opensans.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('/fonts/roboto_con_reg.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/roboto_con_bold.woff2') format('woff2');
+}

app/assets/styles/form/search.css

@@ -0,0 +1,15 @@
+.Search {
+    border-radius: 9999px;
+    background: var(--color-lightest);
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    & > input {
+        all: unset;
+        flex-grow: 1;
+        padding: .5rem 0;
+    }
+}

app/assets/styles/general.css

@@ -58,6 +58,7 @@ body {
     height: 100%;
     overflow-x: hidden;
     font-family: sans-serif;
+    background: var(--color-main-darkest);
 }
 
 .dot {
@@ -103,10 +104,6 @@ body {
     box-shadow: var(--box-shadow-z2);
 }
 
-.content {
-    min-height: 100dvh;
-}
-
 .flex-col {
     display: flex;
     flex-direction: column;

app/assets/styles/header.css

@@ -3,20 +3,20 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--padding-default);
-    background-color: rgba(255 255 255 / .8);
-    backdrop-filter: blur(10px);
-    box-shadow: var(--box-shadow-z2);
-    color: var(--color-darkest);
+    background: var(--color-main-darkest);
     position: sticky;
     top: 0;
     z-index: 100;
+    font-family: 'Roboto', sans-serif;
+    font-weight: bold;
 
-    & strong {
-        font-size: 2em;
+    & a {
+        text-decoration: none;
+        color: var(--color-lightest);
+    }
 
-        & span {
-            color: var(--color-main-dark);
-        }
+    & .header-text {
+        font-size: 1.5em;
     }
 
     & input[type="checkbox"] {

app/assets/styles/page.css

@@ -0,0 +1,34 @@
+.filter-bar {
+    background: var(--color-lightest);
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+
+    & > 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 {
+    padding: 0 1rem 1rem 1rem;
+}
+
+.content {
+    min-height: 100dvh;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    overflow: hidden;
+    background: var(--color-lightest);
+}

app/assets/styles/priceCard.css

@@ -3,6 +3,7 @@
     width: 100%;
     color: var(--color-darkest);
     border-bottom: 1px solid var(--color-light);
+    font-family: 'Roboto', sans-serif;
 
     .bottom {
         position: absolute;
@@ -78,6 +79,10 @@
                 margin-right: .5rem;
                 color: var(--color-middle);
             }
+
+            & > span:nth-child(2) {
+                font-family: 'Roboto Condensed', sans-serif;
+            }
         }
 
         & .wrapper {
@@ -86,6 +91,7 @@
             width: 100%;
             gap: 1rem;
             justify-content: space-between;
+            font-family: 'Roboto Condensed', sans-serif;
 
             & > .info {
                 flex-grow: 0;
@@ -104,7 +110,7 @@
                 }
 
                 & > .pro {
-                    font-size: .6rem;
+                    font-size: .5rem;
                     color: var(--color-middle);
                     font-weight: lighter;
                 }

app/components/Pp/Form/Search.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="Search">
+    <input
+        v-model="text"
+        :id="id"
+        :placeholder="label"
+        @blur="emit('search', text)"
+    />
+    <PpButton class="search-button">
+      <Icon name="uil:search" mode="svg" />
+    </PpButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  label : string
+  id : string
+}
+
+defineProps<Props>()
+
+const emit = defineEmits(['search'])
+const text = defineModel()
+</script>

app/components/Pp/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="Header">
-    <NuxtLink to="/">
-      <strong><span>Pro</span>Papier</strong>
+    <NuxtLink class="header-text" to="/">
+      ProPapier
     </NuxtLink>
     <label for="burger_nav_toggle" v-if="available">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
@@ -22,10 +22,3 @@
 <script setup lang="ts">
 const available = false
 </script>
-
-<style scoped>
-  header a {
-    text-decoration: none;
-    color: var(--color-black);
-  }
-</style>

app/pages/index.vue

@@ -1,51 +1,59 @@
 <template>
-  <ClientOnly>
-    <PpDeleteDialog
-      ref="deleteModal"
-      :current-card-index="currentCardIndex"
-      @delete="removeCard(currentCardIndex)"
-    />
-    <PpPriceCardDialog
-      ref="modal"
-      :current-card="currentCard"
-      :current-card-index="currentCardIndex"
-      @update="updateCard()"
-    />
-    <section class="content flex-col">
-      <aside class="filter-bar">
-        <PpButtonGroup
-          :buttons="filterButtons"
-          @click="sort"
+  <div>
+    <ClientOnly>
+      <PpDeleteDialog
+        ref="deleteModal"
+        :current-card-index="currentCardIndex"
+        @delete="removeCard(currentCardIndex)"
+      />
+      <PpPriceCardDialog
+          ref="modal"
+          :current-card="currentCard"
+          :current-card-index="currentCardIndex"
+          @update="updateCard()"
+      />
+      <div class="search-bar">
+        <PpFormSearch
+          v-model="search"
+          label="Suche nach Klopapier!"
+          id="search_field"
         />
-      </aside>
-      <div class="flex-col" role="list">
-          <PpPriceCard
-            ref="priceCard"
-            v-for="(card, index) in cards"
-            :key="card.uuid"
-            :deletable="cards.length > 1"
-            :card="card"
-            @update="openModal(false, index)"
-            @remove="openDeleteModal()"
-          />
       </div>
-    </section>
-    <PpToolbar>
-      <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
-        <Icon class="icon" name="uil:refresh" mode="svg" />
-        <span>Neu sortieren</span>
-        <span
-          class="dot"
-          :class="{ visible : isDirty}"
-          aria-hidden="true"
-        />
-      </PpButton>
-      <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
-        <Icon class="icon" name="uil:plus" mode="svg" />
-        <span>Hinzufügen</span>
-      </PpButton>
-    </PpToolbar>
-  </ClientOnly>
+      <section class="content flex-col">
+        <aside class="filter-bar">
+          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
+            {{ button.label }}
+          </button>
+        </aside>
+        <div class="flex-col" role="list">
+          <PpPriceCard
+              ref="priceCard"
+              v-for="(card, index) in cards"
+              :key="card.uuid"
+              :deletable="cards.length > 1"
+              :card="card"
+              @update="openModal(false, index)"
+              @remove="openDeleteModal()"
+          />
+        </div>
+      </section>
+      <PpToolbar>
+        <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
+          <Icon class="icon" name="uil:refresh" mode="svg" />
+          <span>Neu sortieren</span>
+          <span
+              class="dot"
+              :class="{ visible : isDirty}"
+              aria-hidden="true"
+          />
+        </PpButton>
+        <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
+          <Icon class="icon" name="uil:plus" mode="svg" />
+          <span>Hinzufügen</span>
+        </PpButton>
+      </PpToolbar>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -62,6 +70,8 @@ const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
+const search = ref('')
+
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',

nuxt.config.ts

@@ -16,6 +16,21 @@ export default defineNuxtConfig({
     }
   },
 
+  app: {
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    head: {
+      htmlAttrs: { lang: 'de' },
+      link: [
+        { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/opensans.woff2', type: 'font/woff2' },
+        { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_bold.woff2', type: 'font/woff2' },
+        { rel: 'preload', crossorigin: 'anonymous', as: 'font', href: '/fonts/roboto_con_reg.woff2', type: 'font/woff2' },
+      ],
+    }
+  },
+
   routeRules: {
     '/': { prerender: true },
     '/imprint': { prerender: true },
@@ -31,7 +46,9 @@ export default defineNuxtConfig({
     './app/assets/styles/button.css',
     './app/assets/styles/buttonGroup.css',
     './app/assets/styles/priceCard.css',
-    './app/assets/styles/formInput.css',
+    './app/assets/styles/form/input.css',
+    './app/assets/styles/form/search.css',
     './app/assets/styles/toolbar.css',
+    './app/assets/styles/page.css',
   ]
 })