fix: a lot of design flaws
Info text when empty, new inputs, minimum height of content fixed
This commit is contained in:
parent
cef5330567
commit
1504b8bfe9
21 changed files with 970 additions and 458 deletions
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class="page-wrapper">
|
||||
<PpHeader />
|
||||
<div class="page">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
<PpFooter />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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
66
app/assets/styles/form/textfield.css
Executable 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +1,27 @@
|
|||
:root {
|
||||
--padding-default: 1rem;
|
||||
--padding-small: .5rem;
|
||||
--padding-small: 0.5rem;
|
||||
--radius-default: 3px;
|
||||
--transition-default: 150ms;
|
||||
|
||||
--color-success: #328104;
|
||||
--color-error: #A20606;
|
||||
--color-blue-light: #0DDCE7;
|
||||
--color-blue: #05B0FF;
|
||||
--color-blue-dark: #0266F2;
|
||||
--color-error: #a20606;
|
||||
--color-blue-light: #0ddce7;
|
||||
--color-blue: #05b0ff;
|
||||
--color-blue-dark: #0266f2;
|
||||
--color-blue-darkest: #013174;
|
||||
|
||||
--color-darkest: #292929;
|
||||
--color-dark: #404040;
|
||||
--color-middle: #707070;
|
||||
--color-light: #E0E0E6;
|
||||
--color-lightest: #FAFAFF;
|
||||
|
||||
--color-green-light: #05FFC5;
|
||||
--color-green: #02F276;
|
||||
--color-green-dark: #09DC33;
|
||||
--color-green-darkest: #07B029;
|
||||
--color-green-darkest-most: #157C2A;
|
||||
--color-light: #e0e0e6;
|
||||
--color-lightest: #fafaff;
|
||||
|
||||
--color-green-light: #05ffc5;
|
||||
--color-green: #02f276;
|
||||
--color-green-dark: #09dc33;
|
||||
--color-green-darkest: #07b029;
|
||||
--color-green-darkest-most: #157c2a;
|
||||
|
||||
--color-main: var(--color-blue);
|
||||
--color-main-light: var(--color-blue-light);
|
||||
|
|
@ -38,13 +37,12 @@
|
|||
--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);
|
||||
--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);
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -156,6 +154,23 @@ body {
|
|||
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 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -163,16 +178,28 @@ dialog {
|
|||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
background: var(--color-lightest);
|
||||
font-size: 1rem;
|
||||
|
||||
& > .wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
& header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
& footer {
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: bold;
|
||||
|
||||
& a {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
background: var(--color-lightest);
|
||||
display: flex;
|
||||
|
|
@ -25,16 +40,24 @@
|
|||
z-index: 100;
|
||||
|
||||
& p {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: lighter;
|
||||
font-weight: 100;
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 100dvh;
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
overflow: hidden;
|
||||
background: var(--color-lightest);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
width: 100%;
|
||||
color: var(--color-darkest);
|
||||
border-bottom: 1px solid var(--color-light);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
|
|
@ -79,10 +78,6 @@
|
|||
margin-right: .5rem;
|
||||
color: var(--color-middle);
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
& .wrapper {
|
||||
|
|
@ -91,7 +86,6 @@
|
|||
width: 100%;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
|
||||
& > .info {
|
||||
flex-grow: 0;
|
||||
|
|
@ -110,7 +104,7 @@
|
|||
}
|
||||
|
||||
& > .pro {
|
||||
font-size: .5rem;
|
||||
font-size: .6rem;
|
||||
color: var(--color-middle);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
ref="dialog"
|
||||
closedby="any"
|
||||
>
|
||||
<form method="dialog">
|
||||
<header class="flex-row padding">
|
||||
<form method="dialog" class="wrapper">
|
||||
<header class="flex-row">
|
||||
Wirklich löschen?
|
||||
<PpButton class="round text">
|
||||
<Icon name="uil:times" mode="svg" />
|
||||
</PpButton>
|
||||
</header>
|
||||
<main>
|
||||
<div class="padding flex-col">
|
||||
<div class="flex-col">
|
||||
<p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex-row padding">
|
||||
<footer class="flex-row">
|
||||
<PpButton class="text">
|
||||
<span>Abbrechen</span>
|
||||
</PpButton>
|
||||
|
|
|
|||
|
|
@ -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
27
app/components/Pp/Form/TextField.vue
Executable 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,7 +2,7 @@
|
|||
<div class="Header">
|
||||
<img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
|
||||
<div>
|
||||
<header>
|
||||
<header class="roboto-condensed">
|
||||
<NuxtLink class="header-text" to="/">
|
||||
ProPapier
|
||||
</NuxtLink>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<article class="PriceCard">
|
||||
<article class="PriceCard roboto-condensed">
|
||||
<div class="bottom">
|
||||
<div class="bg-edit">
|
||||
<Icon class="icon" name="uil:pen" mode="svg" />
|
||||
|
|
|
|||
|
|
@ -1,64 +1,72 @@
|
|||
<template>
|
||||
<dialog
|
||||
ref="dialog"
|
||||
closedby="any"
|
||||
>
|
||||
<dialog ref="dialog" closedby="any">
|
||||
<div class="wrapper">
|
||||
<form method="dialog">
|
||||
<header class="flex-row padding">
|
||||
{{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues Hinzufügen' }}
|
||||
<header class="flex-row">
|
||||
{{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
|
||||
<PpButton class="round text">
|
||||
<Icon name="uil:times" mode="svg" />
|
||||
</PpButton>
|
||||
</header>
|
||||
</form>
|
||||
<main v-if="currentCard">
|
||||
<div class="padding flex-col">
|
||||
<div class="flex-col gap-default">
|
||||
<div class="flex-row gap-default">
|
||||
<PpFormInput
|
||||
<PpFormTextField
|
||||
v-model="currentCard.name"
|
||||
id="card_name"
|
||||
label="Name"
|
||||
:class="{'error': !validFields.name }"
|
||||
icon="uil:user"
|
||||
:class="{ error: !validFields.name }"
|
||||
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
|
||||
@input="validFields.name = true"
|
||||
/>
|
||||
<PpFormInput
|
||||
<PpFormTextField
|
||||
v-model="currentCard.price"
|
||||
id="card_price"
|
||||
label="Preis"
|
||||
icon="uil:euro"
|
||||
mode="decimal"
|
||||
:class="{'error': !validFields.price }"
|
||||
:class="{ error: !validFields.price }"
|
||||
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
|
||||
@input="validFields.price = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-row gap-default">
|
||||
<PpFormInput
|
||||
<PpFormTextField
|
||||
v-model="currentCard.roles"
|
||||
id="card_roles"
|
||||
label="Rollen"
|
||||
icon="uil:toilet-paper"
|
||||
mode="decimal"
|
||||
:class="{'error': !validFields.roles }"
|
||||
:class="{ error: !validFields.roles }"
|
||||
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
|
||||
@input="validFields.roles = true"
|
||||
/>
|
||||
<PpFormInput
|
||||
<PpFormTextField
|
||||
v-model="currentCard.sheets"
|
||||
id="card_sheets"
|
||||
label="Blätter"
|
||||
label="Blatt"
|
||||
icon="uil:file-landscape"
|
||||
mode="decimal"
|
||||
:class="{'error': !validFields.sheets }"
|
||||
:class="{ error: !validFields.sheets }"
|
||||
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
|
||||
@input="validFields.sheets = true"
|
||||
/>
|
||||
<PpFormInput
|
||||
<PpFormTextField
|
||||
v-model="currentCard.layers"
|
||||
id="card_layers"
|
||||
label="Lagen"
|
||||
icon="uil:layer-group"
|
||||
mode="decimal"
|
||||
:class="{'error': !validFields.layers }"
|
||||
:class="{ error: !validFields.layers }"
|
||||
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
|
||||
@input="validFields.layers = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex-row padding">
|
||||
<footer class="flex-row">
|
||||
<form method="dialog">
|
||||
<PpButton class="danger text">
|
||||
<span>Abbrechen</span>
|
||||
|
|
@ -68,34 +76,43 @@
|
|||
<span>{{ currentCardIndex > -1 ? 'Übernehmen' : 'Hinzufügen' }}</span>
|
||||
</PpButton>
|
||||
</footer>
|
||||
</div>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Card } from '../../../shared/Card'
|
||||
import type { Card } from '../../../shared/Card';
|
||||
|
||||
type Props = {
|
||||
currentCardIndex : number
|
||||
currentCard ?: Card
|
||||
}
|
||||
currentCardIndex: number;
|
||||
currentCard?: Card;
|
||||
};
|
||||
|
||||
const { currentCardIndex, currentCard } = defineProps<Props>()
|
||||
const emit = defineEmits(['update'])
|
||||
const { currentCardIndex, currentCard } = defineProps<Props>();
|
||||
const emit = defineEmits(['update']);
|
||||
|
||||
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
|
||||
const dialog = useTemplateRef<HTMLDialogElement>("dialog");
|
||||
|
||||
const checkPrice = () => {
|
||||
if (!currentCard) { return false }
|
||||
if (currentCard.price.length === 0) { return false }
|
||||
const price = +replaceComma(currentCard.price)
|
||||
return !isNaN(price)
|
||||
if (!currentCard) {
|
||||
return false;
|
||||
}
|
||||
if (currentCard.price.length === 0) {
|
||||
return false;
|
||||
}
|
||||
const price = +replaceComma(currentCard.price);
|
||||
return !isNaN(price);
|
||||
};
|
||||
|
||||
const checkIfInteger = (toBeNumber: string) => {
|
||||
if (toBeNumber.length === 0) { return false }
|
||||
if (toBeNumber.includes(',') || toBeNumber.includes('.')) { return false }
|
||||
return !isNaN(+toBeNumber)
|
||||
if (toBeNumber.length === 0) {
|
||||
return false;
|
||||
}
|
||||
if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
|
||||
return false;
|
||||
}
|
||||
return !isNaN(+toBeNumber);
|
||||
};
|
||||
|
||||
const validFields = reactive({
|
||||
name: true,
|
||||
|
|
@ -103,30 +120,32 @@ const validFields = reactive({
|
|||
roles: true,
|
||||
sheets: true,
|
||||
layers: true,
|
||||
})
|
||||
});
|
||||
|
||||
const validate = () => {
|
||||
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()
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
dialog.value?.addEventListener('close', () => {
|
||||
validFields.name = true
|
||||
validFields.price = true
|
||||
validFields.roles = true
|
||||
validFields.sheets = true
|
||||
validFields.layers = true
|
||||
})
|
||||
})
|
||||
validFields.name = true;
|
||||
validFields.price = true;
|
||||
validFields.roles = true;
|
||||
validFields.sheets = true;
|
||||
validFields.layers = true;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="nuxt-page-wrapper flex-col">
|
||||
<ClientOnly>
|
||||
<PpDeleteDialog
|
||||
ref="deleteModal"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
/>
|
||||
<Teleport to="#subheader">
|
||||
<div class="search-bar">
|
||||
<p>Preisvergleich. Schnell. Unkompliziert.</p>
|
||||
<p class="roboto-condensed">Vergleichen. Schnell. Unkompliziert.</p>
|
||||
</div>
|
||||
</Teleport>
|
||||
<section class="content flex-col">
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
{{ button.label }}
|
||||
</button>
|
||||
</aside>
|
||||
<div class="flex-col" role="list">
|
||||
<div class="flex-col" role="list" v-if="cards.length">
|
||||
<PpPriceCard
|
||||
ref="priceCard"
|
||||
v-for="(card, index) in cards"
|
||||
|
|
@ -34,6 +34,11 @@
|
|||
@remove="openDeleteModal()"
|
||||
/>
|
||||
</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>
|
||||
<PpToolbar>
|
||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
||||
|
|
|
|||
|
|
@ -26,9 +26,6 @@ export default defineNuxtConfig({
|
|||
link: [
|
||||
{ rel: 'preload', as: 'image', href: '/img/propapier.svg', type: 'image/svg+xml' },
|
||||
{ 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 },
|
||||
},
|
||||
|
||||
modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device'],
|
||||
modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device', '@nuxt/fonts'],
|
||||
|
||||
css : [
|
||||
'./app/assets/styles/general.css',
|
||||
|
|
@ -48,7 +45,7 @@ export default defineNuxtConfig({
|
|||
'./app/assets/styles/button.css',
|
||||
'./app/assets/styles/buttonGroup.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/toolbar.css',
|
||||
'./app/assets/styles/page.css',
|
||||
|
|
|
|||
716
package-lock.json
generated
716
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -14,6 +14,7 @@
|
|||
"dependencies": {
|
||||
"@iconify-json/simple-icons": "^1.2.32",
|
||||
"@iconify-json/uil": "^1.2.3",
|
||||
"@nuxt/fonts": "^0.11.3",
|
||||
"@nuxt/icon": "^1.10.3",
|
||||
"@nuxtjs/device": "^3.2.4",
|
||||
"@vueuse/nuxt": "^13.1.0",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue