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

add: search bar

Browse source 
Add new header and search bar
This commit is contained in:
Fiona Lena Urban 2025-05-10 18:07:18 +02:00
parent 0aa495e05b
commit 4b07ebb2ec
18 changed files with 206 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/app.vue
View file

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

13
app/assets/styles/button.css
View file

@ -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;

1
app/assets/styles/buttonGroup.css
View file

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

24
app/assets/styles/fonts.css Executable file
View file

@ -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');
}

0
app/assets/styles/formInput.css → app/assets/styles/form/input.css
View file

15
app/assets/styles/form/search.css Normal file
View file

@ -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;
}
}

5
app/assets/styles/general.css
View file

@ -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;

18
app/assets/styles/header.css
View file

@ -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"] {

34
app/assets/styles/page.css Normal file
View file

@ -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);
}

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

@ -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;
}

0
app/components/Pp/FormInput.vue → app/components/Pp/Form/Input.vue
View file

25
app/components/Pp/Form/Search.vue Executable file
View file

@ -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>

11
app/components/Pp/Header.vue
View file

@ -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>

100
app/pages/index.vue
View file

@ -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: '',