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

fix: a lot of design flaws

Browse source 
Info text when empty, new inputs, minimum height of content fixed
This commit is contained in:
Fiona Lena Urban 2025-05-11 11:07:19 +02:00
parent cef5330567
commit 1504b8bfe9
21 changed files with 970 additions and 458 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/app.vue
View file

@ -1,7 +1,11 @@
<template> <template>
<PpHeader /> <div class="page-wrapper">
<div class="page"> <PpHeader />
<NuxtPage /> <div class="page">
<NuxtPage />
</div>
<PpFooter />
</div> </div>
<PpFooter />
</template> </template>
<script setup lang="ts">
</script>

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

@ -1,24 +0,0 @@
@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');
}

52
app/assets/styles/form/input.css
View file

@ -1,52 +0,0 @@
.Input {
&.error {
& .input-wrapper {
border-color: var(--color-error);
outline-width: 2px;
}
& span {
color: var(--color-error);
}
}
& span {
font-size: .65em;
}
& .input-wrapper {
position: relative;
flex: 25% 1 0;
border: 2px solid var(--color-main-dark);
border-radius: var(--radius-default);
overflow: hidden;
transition: var(--transition-default);
outline: 0 solid var(--color-lightest);
& label {
position: absolute;
font-size: .8em;
top: .3rem;
left: .5rem;
transition: var(--transition-default);
}
& input {
all: unset;
width: calc(100% - 1rem);
padding: 1.3rem .5rem .5rem .5rem;
background: var(--color-lightest);
&[type="number"] {
text-align: right;
}
}
& input:focus,
& input:not(:placeholder-shown) {
& + label {
color: var(--color-main-dark);
}
}
}
}

66
app/assets/styles/form/textfield.css Executable file
View file

@ -0,0 +1,66 @@
.TextField {
--border-color: var(--color-light);
--label-color: var(--color-middle);
--label-position-top: 0.4em;
--label-font-size: 1rem;
--icon-color: var(--color-main-dark);
--message-color: var(--color-middle);
position: relative;
flex: 25% 1 0;
&:focus-within {
--border-color: var(--color-main-dark);
}
&:focus-within,
&:has(input:not(:placeholder-shown)) {
--icon-color: var(--color-main-dark);
--label-color: var(--color-main-dark);
--label-position-top: -11px;
--label-font-size: 0.8rem;
}
&.error {
--label-color: var(--color-error);
--icon-color: var(--color-error);
--border-color: var(--color-error);
--message-color: var(--color-error);
}
& .wrapper {
display: flex;
align-items: center;
padding: 0.1rem 0.5rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-default);
}
& label {
position: absolute;
background: var(--color-lightest);
padding: 0.2rem;
left: 1.8rem;
color: var(--label-color);
top: var(--label-position-top);
font-size: var(--label-font-size);
transition: var(--transition-default);
}
& .icon {
color: var(--icon-color);
}
& input {
all: unset;
padding: 0.5rem;
font-size: 1rem;
width: 100%;
flex: 25% 1 0;
}
& span {
color: var(--message-color);
font-size: 0.6rem;
}
}

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

@ -1,181 +1,208 @@
:root { :root {
--padding-default: 1rem; --padding-default: 1rem;
--padding-small: .5rem; --padding-small: 0.5rem;
--radius-default: 3px; --radius-default: 3px;
--transition-default: 150ms; --transition-default: 150ms;
--color-success: #328104; --color-success: #328104;
--color-error: #A20606; --color-error: #a20606;
--color-blue-light: #0DDCE7; --color-blue-light: #0ddce7;
--color-blue: #05B0FF; --color-blue: #05b0ff;
--color-blue-dark: #0266F2; --color-blue-dark: #0266f2;
--color-blue-darkest: #013174; --color-blue-darkest: #013174;
--color-darkest: #292929; --color-darkest: #292929;
--color-dark: #404040; --color-dark: #404040;
--color-middle: #707070; --color-middle: #707070;
--color-light: #E0E0E6; --color-light: #e0e0e6;
--color-lightest: #FAFAFF; --color-lightest: #fafaff;
--color-green-light: #05FFC5; --color-green-light: #05ffc5;
--color-green: #02F276; --color-green: #02f276;
--color-green-dark: #09DC33; --color-green-dark: #09dc33;
--color-green-darkest: #07B029; --color-green-darkest: #07b029;
--color-green-darkest-most: #157C2A; --color-green-darkest-most: #157c2a;
--color-main: var(--color-blue);
--color-main-light: var(--color-blue-light);
--color-main-dark: var(--color-blue-dark);
--color-main-darkest: var(--color-blue-darkest);
--color-main: var(--color-blue); --color-accent: var(--color-green);
--color-main-light: var(--color-blue-light); --color-accent-light: var(--color-green-light);
--color-main-dark: var(--color-blue-dark); --color-accent-dark: var(--color-green-dark);
--color-main-darkest: var(--color-blue-darkest); --color-accent-darkest: var(--color-green-darkest);
--color-accent: var(--color-green); --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
--color-accent-light: var(--color-green-light); --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
--color-accent-dark: var(--color-green-dark); --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
--color-accent-darkest: var(--color-green-darkest); --color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
--color-gradient-error: linear-gradient(to bottom right, #b00707, #dc0909);
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light)); --color-gradient-error-reverse: linear-gradient(to top left, #b00707, #dc0909);
--color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
--color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
--color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
--color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909);
--color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909);
--box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
--box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
--box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
--box-shadow-upper: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 6px rgba(0, 0, 0, 0.23);
--box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--box-shadow-inset: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body { body {
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
font-family: sans-serif; font-family: sans-serif;
background: var(--color-main-darkest); background: var(--color-main-darkest);
} }
.dot { .dot {
--size: 10px; --size: 10px;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
top: 5px; top: 5px;
right: 25%; right: 25%;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-accent); background-color: var(--color-accent);
display: inline-block; display: inline-block;
margin-right: 0.5rem; margin-right: 0.5rem;
position: absolute; position: absolute;
box-shadow: var(--box-shadow-z2); box-shadow: var(--box-shadow-z2);
scale: 0; scale: 0;
transition: var(--transition-default); transition: var(--transition-default);
&.visible { &.visible {
scale: 1; scale: 1;
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
} }
@keyframes pulse { @keyframes pulse {
0% { 0% {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
} }
70% { 70% {
transform: scale(1); transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
} }
100% { 100% {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
} }
} }
.card { .card {
overflow: hidden; overflow: hidden;
border-radius: var(--radius-default); border-radius: var(--radius-default);
box-shadow: var(--box-shadow-z2); box-shadow: var(--box-shadow-z2);
} }
.flex-col { .flex-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.flex-row { .flex-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.text-white { .text-white {
color: var(--color-lightest); color: var(--color-lightest);
} }
.bg-main { .bg-main {
background-color: var(--color-main); background-color: var(--color-main);
} }
.bg-main-hover:hover { .bg-main-hover:hover {
background-color: var(--color-main); background-color: var(--color-main);
} }
.bg-main-dark { .bg-main-dark {
background-color: var(--color-main-dark); background-color: var(--color-main-dark);
} }
.bg-main-dark-hover:hover { .bg-main-dark-hover:hover {
background-color: var(--color-main-dark); background-color: var(--color-main-dark);
} }
.gap-default { .gap-default {
gap: 1rem; gap: 1rem;
} }
.bg-blue { .bg-blue {
background: var(--color-blue); background: var(--color-blue);
} }
.bg-white { .bg-white {
background: var(--color-lightest); background: var(--color-lightest);
} }
.padding { .padding {
gap: 1rem; gap: 1rem;
padding: var(--padding-default); padding: var(--padding-default);
} }
.padding-small { .padding-small {
gap: 1rem; gap: 1rem;
padding: var(--padding-small); padding: var(--padding-small);
}
.roboto-condensed {
font-family: "Roboto Condensed", sans-serif;
}
.roboto {
font-family: "Roboto", sans-serif;
}
.open-sans {
font-family: "Open Sans", sans-serif;
}
.grow {
flex-grow: 1;
height: 10px;
} }
dialog { dialog {
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 100vw; width: 100vw;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border: none; border: none;
border-radius: var(--radius-default); border-radius: var(--radius-default);
background: var(--color-lightest);
font-size: 1rem;
font-size: 1rem; & > .wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
& header { & header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} padding: 1rem 1rem 0;
}
& footer { main {
justify-content: space-between; padding: 0 1rem;
} }
&::backdrop { & footer {
background: rgba(0, 0, 0, 0.5); justify-content: space-between;
} padding: 0 1rem 1rem;
}
&::backdrop {
background: rgba(0, 0, 0, 0.5);
}
} }

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

@ -16,7 +16,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-family: 'Roboto', sans-serif;
font-weight: bold; font-weight: bold;
& a { & a {

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

@ -1,3 +1,18 @@
.page-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
& .page {
flex-grow: 1;
& .nuxt-page-wrapper {
height: 100%;
justify-content: space-between;
}
}
}
.filter-bar { .filter-bar {
background: var(--color-lightest); background: var(--color-lightest);
display: flex; display: flex;
@ -25,16 +40,24 @@
z-index: 100; z-index: 100;
& p { & p {
font-family: 'Roboto Condensed', sans-serif; font-weight: 100;
font-weight: lighter;
color: var(--color-lightest); color: var(--color-lightest);
} }
} }
.content { .content {
min-height: 100dvh;
border-top-left-radius: 15px; border-top-left-radius: 15px;
border-top-right-radius: 15px; border-top-right-radius: 15px;
overflow: hidden; overflow: hidden;
background: var(--color-lightest); background: var(--color-lightest);
height: 100%;
}
.info-text {
padding: 0 1rem;
text-align: center;
width: 100%;
top: 40%;
transform: translateY(-50%);
position: absolute;
} }

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

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

14
app/components/Pp/DeleteDialog.vue
View file

@ -3,22 +3,22 @@
ref="dialog" ref="dialog"
closedby="any" closedby="any"
> >
<form method="dialog"> <form method="dialog" class="wrapper">
<header class="flex-row padding"> <header class="flex-row">
Wirklich löschen? Wirklich löschen?
<PpButton class="round text"> <PpButton class="round text">
<Icon name="uil:times" mode="svg" /> <Icon name="uil:times" mode="svg" />
</PpButton> </PpButton>
</header> </header>
<main> <main>
<div class="padding flex-col"> <div class="flex-col">
<p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p> <p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
</div> </div>
</main> </main>
<footer class="flex-row padding"> <footer class="flex-row">
<PpButton class="text"> <PpButton class="text">
<span>Abbrechen</span> <span>Abbrechen</span>
</PpButton> </PpButton>
<PpButton class="danger raised" @click="$emit('delete')"> <PpButton class="danger raised" @click="$emit('delete')">
<span>Löschen</span> <span>Löschen</span>
</PpButton> </PpButton>

46
app/components/Pp/Form/Input.vue
View file

@ -1,46 +0,0 @@
<template>
<div class="Input">
<div class="input-wrapper flex-col">
<input
v-model="text"
:type="type"
:id="id"
:step="step"
:min="min"
:max="max"
:required="required"
placeholder=" "
@blur="emit('blur')"
:inputmode="mode"
/>
<label :for="id">{{ label }}</label>
</div>
<span v-if="message">{{ message }}</span>
</div>
</template>
<script setup lang="ts">
type Props = {
type ?: 'text' | 'number'
max ?: number
min ?: number
step ?: number
required ?: boolean
message ?: string
label : string
id : string
mode ?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
}
const {
type = 'text',
required = false,
step = 0.01,
min = 1,
mode = 'text',
} = defineProps<Props>()
const emit = defineEmits(['blur'])
const text = defineModel()
</script>

27
app/components/Pp/Form/TextField.vue Executable file
View file

@ -0,0 +1,27 @@
<template>
<div class="TextField">
<div class="wrapper">
<Icon v-if="icon" class="icon" :name="icon" mode="svg" />
<input v-model="text" :type="type" :id="id" placeholder=" " @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
<label :for="id">{{ label }}</label>
</div>
<span v-if="message">{{ message }}</span>
</div>
</template>
<script setup lang="ts">
type Props = {
type?: 'text' | 'number';
message?: string;
icon?: string;
label: string;
id: string;
mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
};
const { type = "text", mode = "text" } = defineProps<Props>();
const emit = defineEmits(['blur', 'input']);
const text = defineModel();
</script>

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

@ -2,7 +2,7 @@
<div class="Header"> <div class="Header">
<img class="logo" src="/img/propapier.svg" alt="ProPapier logo" /> <img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
<div> <div>
<header> <header class="roboto-condensed">
<NuxtLink class="header-text" to="/"> <NuxtLink class="header-text" to="/">
ProPapier ProPapier
</NuxtLink> </NuxtLink>

2
app/components/Pp/PriceCard.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<article class="PriceCard"> <article class="PriceCard roboto-condensed">
<div class="bottom"> <div class="bottom">
<div class="bg-edit"> <div class="bg-edit">
<Icon class="icon" name="uil:pen" mode="svg" /> <Icon class="icon" name="uil:pen" mode="svg" />

143
app/components/Pp/PriceCardDialog.vue
View file

@ -1,64 +1,72 @@
<template> <template>
<dialog <dialog ref="dialog" closedby="any">
ref="dialog" <div class="wrapper">
closedby="any" <form method="dialog">
> <header class="flex-row">
<form method="dialog"> {{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
<header class="flex-row padding"> <PpButton class="round text">
{{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues Hinzufügen' }} <Icon name="uil:times" mode="svg" />
<PpButton class="round text"> </PpButton>
<Icon name="uil:times" mode="svg" /> </header>
</PpButton> </form>
</header>
</form>
<main v-if="currentCard"> <main v-if="currentCard">
<div class="padding flex-col"> <div class="flex-col gap-default">
<div class="flex-row gap-default"> <div class="flex-row gap-default">
<PpFormInput <PpFormTextField
v-model="currentCard.name" v-model="currentCard.name"
id="card_name" id="card_name"
label="Name" label="Name"
:class="{'error': !validFields.name }" icon="uil:user"
:class="{ error: !validFields.name }"
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''" :message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
@input="validFields.name = true"
/> />
<PpFormInput <PpFormTextField
v-model="currentCard.price" v-model="currentCard.price"
id="card_price" id="card_price"
label="Preis" label="Preis"
icon="uil:euro"
mode="decimal" mode="decimal"
:class="{'error': !validFields.price }" :class="{ error: !validFields.price }"
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''" :message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
@input="validFields.price = true"
/> />
</div> </div>
<div class="flex-row gap-default"> <div class="flex-row gap-default">
<PpFormInput <PpFormTextField
v-model="currentCard.roles" v-model="currentCard.roles"
id="card_roles" id="card_roles"
label="Rollen" label="Rollen"
icon="uil:toilet-paper"
mode="decimal" mode="decimal"
:class="{'error': !validFields.roles }" :class="{ error: !validFields.roles }"
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''" :message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
@input="validFields.roles = true"
/> />
<PpFormInput <PpFormTextField
v-model="currentCard.sheets" v-model="currentCard.sheets"
id="card_sheets" id="card_sheets"
label="Blätter" label="Blatt"
icon="uil:file-landscape"
mode="decimal" mode="decimal"
:class="{'error': !validFields.sheets }" :class="{ error: !validFields.sheets }"
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''" :message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
@input="validFields.sheets = true"
/> />
<PpFormInput <PpFormTextField
v-model="currentCard.layers" v-model="currentCard.layers"
id="card_layers" id="card_layers"
label="Lagen" label="Lagen"
icon="uil:layer-group"
mode="decimal" mode="decimal"
:class="{'error': !validFields.layers }" :class="{ error: !validFields.layers }"
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''" :message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
@input="validFields.layers = true"
/> />
</div> </div>
</div> </div>
</main> </main>
<footer class="flex-row padding"> <footer class="flex-row">
<form method="dialog"> <form method="dialog">
<PpButton class="danger text"> <PpButton class="danger text">
<span>Abbrechen</span> <span>Abbrechen</span>
@ -68,34 +76,43 @@
<span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span> <span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span>
</PpButton> </PpButton>
</footer> </footer>
</div>
</dialog> </dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { Card } from '../../../shared/Card' import type { Card } from '../../../shared/Card';
type Props = { type Props = {
currentCardIndex : number currentCardIndex: number;
currentCard ?: Card currentCard?: Card;
} };
const { currentCardIndex, currentCard } = defineProps<Props>() const { currentCardIndex, currentCard } = defineProps<Props>();
const emit = defineEmits(['update']) const emit = defineEmits(['update']);
const dialog = useTemplateRef<HTMLDialogElement>('dialog') const dialog = useTemplateRef<HTMLDialogElement>("dialog");
const checkPrice = () => { const checkPrice = () => {
if (!currentCard) { return false } if (!currentCard) {
if (currentCard.price.length === 0) { return false } return false;
const price = +replaceComma(currentCard.price) }
return !isNaN(price) if (currentCard.price.length === 0) {
} return false;
}
const price = +replaceComma(currentCard.price);
return !isNaN(price);
};
const checkIfInteger = (toBeNumber : string) => { const checkIfInteger = (toBeNumber: string) => {
if (toBeNumber.length === 0) { return false } if (toBeNumber.length === 0) {
if (toBeNumber.includes(',') || toBeNumber.includes('.')) { return false } return false;
return !isNaN(+toBeNumber) }
} if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
return false;
}
return !isNaN(+toBeNumber);
};
const validFields = reactive({ const validFields = reactive({
name: true, name: true,
@ -103,30 +120,32 @@ const validFields = reactive({
roles: true, roles: true,
sheets: true, sheets: true,
layers: true, layers: true,
}) });
const validate = () => { const validate = () => {
if (!currentCard) { return } if (!currentCard) {
return;
validFields.name = currentCard.name.length > 0
validFields.price = checkPrice()
validFields.roles = checkIfInteger(currentCard.roles)
validFields.sheets = checkIfInteger(currentCard.sheets)
validFields.layers = checkIfInteger(currentCard.layers)
if (Object.values(validFields).every(value => value)) {
emit('update')
dialog.value?.close()
} }
}
validFields.name = currentCard.name.length > 0;
validFields.price = checkPrice();
validFields.roles = checkIfInteger(currentCard.roles);
validFields.sheets = checkIfInteger(currentCard.sheets);
validFields.layers = checkIfInteger(currentCard.layers);
if (Object.values(validFields).every((value) => value)) {
emit('update');
dialog.value?.close();
}
};
onMounted(() => { onMounted(() => {
dialog.value?.addEventListener('close', () => { dialog.value?.addEventListener('close', () => {
validFields.name = true validFields.name = true;
validFields.price = true validFields.price = true;
validFields.roles = true validFields.roles = true;
validFields.sheets = true validFields.sheets = true;
validFields.layers = true validFields.layers = true;
}) });
}) });
</script> </script>

25
app/pages/index.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="nuxt-page-wrapper flex-col">
<ClientOnly> <ClientOnly>
<PpDeleteDialog <PpDeleteDialog
ref="deleteModal" ref="deleteModal"
@ -14,7 +14,7 @@
/> />
<Teleport to="#subheader"> <Teleport to="#subheader">
<div class="search-bar"> <div class="search-bar">
<p>Preisvergleich. Schnell. Unkompliziert.</p> <p class="roboto-condensed">Vergleichen. Schnell. Unkompliziert.</p>
</div> </div>
</Teleport> </Teleport>
<section class="content flex-col"> <section class="content flex-col">
@ -23,17 +23,22 @@
{{ button.label }} {{ button.label }}
</button> </button>
</aside> </aside>
<div class="flex-col" role="list"> <div class="flex-col" role="list" v-if="cards.length">
<PpPriceCard <PpPriceCard
ref="priceCard" ref="priceCard"
v-for="(card, index) in cards" v-for="(card, index) in cards"
:key="card.uuid" :key="card.uuid"
:deletable="cards.length > 1" :deletable="cards.length > 1"
:card="card" :card="card"
@update="openModal(false, index)" @update="openModal(false, index)"
@remove="openDeleteModal()" @remove="openDeleteModal()"
/> />
</div> </div>
<p class="info-text grow" v-else>
Du hast noch keinerlei Einträge angelegt.
<br />Aber das ist gar nicht schlimm!
<br />Tippe einfach unten auf "+ Hinzufügen" und leg los.
</p>
</section> </section>
<PpToolbar> <PpToolbar>
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)"> <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">

7
nuxt.config.ts
View file

@ -26,9 +26,6 @@ export default defineNuxtConfig({
link: [ link: [
{ rel: 'preload', as: 'image', href: '/img/propapier.svg', type: 'image/svg+xml' }, { rel: 'preload', as: 'image', href: '/img/propapier.svg', type: 'image/svg+xml' },
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }, { rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' },
{ 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' },
], ],
} }
}, },
@ -39,7 +36,7 @@ export default defineNuxtConfig({
'/privacy': { prerender: true }, '/privacy': { prerender: true },
}, },
modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device'], modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device', '@nuxt/fonts'],
css : [ css : [
'./app/assets/styles/general.css', './app/assets/styles/general.css',
@ -48,7 +45,7 @@ export default defineNuxtConfig({
'./app/assets/styles/button.css', './app/assets/styles/button.css',
'./app/assets/styles/buttonGroup.css', './app/assets/styles/buttonGroup.css',
'./app/assets/styles/priceCard.css', './app/assets/styles/priceCard.css',
'./app/assets/styles/form/input.css', './app/assets/styles/form/textfield.css',
'./app/assets/styles/form/search.css', './app/assets/styles/form/search.css',
'./app/assets/styles/toolbar.css', './app/assets/styles/toolbar.css',
'./app/assets/styles/page.css', './app/assets/styles/page.css',

716
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -14,6 +14,7 @@
"dependencies": { "dependencies": {
"@iconify-json/simple-icons": "^1.2.32", "@iconify-json/simple-icons": "^1.2.32",
"@iconify-json/uil": "^1.2.3", "@iconify-json/uil": "^1.2.3",
"@nuxt/fonts": "^0.11.3",
"@nuxt/icon": "^1.10.3", "@nuxt/icon": "^1.10.3",
"@nuxtjs/device": "^3.2.4", "@nuxtjs/device": "^3.2.4",
"@vueuse/nuxt": "^13.1.0", "@vueuse/nuxt": "^13.1.0",

BIN
public/fonts/opensans.woff2
View file

Binary file not shown.

BIN
public/fonts/roboto_con_bold.woff2
View file

Binary file not shown.

BIN
public/fonts/roboto_con_reg.woff2
View file

Binary file not shown.