Compare commits
1 commit
220d4b1f30
...
987b685c41
| Author | SHA1 | Date | |
|---|---|---|---|
| 987b685c41 |
23 changed files with 4095 additions and 6406 deletions
76
README.md
76
README.md
|
|
@ -1 +1,75 @@
|
||||||
# TBD
|
# Nuxt Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm preview
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.Button {
|
.Button {
|
||||||
--padding: .2rem;
|
--padding: .2rem;
|
||||||
--background: var(--color-gradient-main-dark);
|
--background: var(--color-main);
|
||||||
--color: var(--color-lightest);
|
--color: var(--color-white);
|
||||||
--background-hover: var(--color-main-dark);
|
--background-hover: var(--color-main-dark);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -13,58 +13,9 @@
|
||||||
transition: var(--transition-default);
|
transition: var(--transition-default);
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
background: var(--background);
|
background: transparent;
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
|
|
||||||
&.transparent {
|
|
||||||
--background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: .5em 1.5em;
|
|
||||||
border-radius: var(--radius-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.raised {
|
|
||||||
box-shadow: var(--box-shadow-z2);
|
|
||||||
padding: .5em 1.5em;
|
|
||||||
border-radius: var(--radius-default);
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
--background: var(--color-gradient-error);
|
|
||||||
--color: var(--color-lightest);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.text {
|
|
||||||
--background: transparent;
|
|
||||||
--color: var(--color-darkest);
|
|
||||||
padding: .5em 1.5em;
|
|
||||||
border-radius: var(--radius-default);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
--background: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.white {
|
|
||||||
--color: var(--color-lightest);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
--color: var(--color-error);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
--background: rgba(255, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.round {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 100%;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cta {
|
&.cta {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
|
|
@ -78,9 +29,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.cta.white {
|
&.cta.white {
|
||||||
--background: var(--color-lightest);
|
--background: var(--color-white);
|
||||||
--color: var(--color-main);
|
--color: var(--color-main);
|
||||||
--background-hover: var(--color-light);
|
--background-hover: var(--color-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icon-button {
|
&.icon-button {
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
.ButtonGroup {
|
.ButtonGroup {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: var(--color-main);
|
|
||||||
border-radius: var(--radius-default);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: var(--box-shadow-z2);
|
|
||||||
|
|
||||||
& button {
|
& button {
|
||||||
--color: var(--color-light);
|
--color: var(--color-white-transparent);
|
||||||
--background: var(--color-main-darkest);
|
--background: var(--color-main);
|
||||||
all: unset;
|
all: unset;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -21,7 +17,7 @@
|
||||||
transition: var(--transition-default);
|
transition: var(--transition-default);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
--color: var(--color-lightest);
|
--color: var(--color-white);
|
||||||
--background: var(--color-main-dark);
|
--background: var(--color-main-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
.Footer {
|
.Footer {
|
||||||
position: relative;
|
background: var(--color-main-dark);
|
||||||
background: var(--color-darkest);
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
& h4 {
|
& h4 {
|
||||||
color: var(--color-lightest);
|
color: var(--color-white);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -14,7 +12,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: var(--color-light);
|
color: var(--color-white-transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
& .socials {
|
& .socials {
|
||||||
|
|
@ -35,7 +33,7 @@
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
color: var(--color-lightest);
|
color: var(--color-white);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,44 @@
|
||||||
.Input {
|
.Input {
|
||||||
&.error {
|
position: relative;
|
||||||
& .input-wrapper {
|
flex: 25% 1 0;
|
||||||
border-color: var(--color-error);
|
border: 2px solid var(--color-blue);
|
||||||
outline-width: 2px;
|
border-radius: var(--radius-default);
|
||||||
}
|
overflow: hidden;
|
||||||
|
transition: var(--transition-default);
|
||||||
|
outline: 0 solid var(--color-white);
|
||||||
|
|
||||||
& span {
|
& label {
|
||||||
color: var(--color-error);
|
position: absolute;
|
||||||
}
|
left: .5rem;
|
||||||
}
|
font-size: 1.5em;
|
||||||
|
top: .7rem;
|
||||||
& 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);
|
transition: var(--transition-default);
|
||||||
outline: 0 solid var(--color-lightest);
|
}
|
||||||
|
|
||||||
& label {
|
& input {
|
||||||
position: absolute;
|
all: unset;
|
||||||
font-size: .8em;
|
width: calc(100% - 1rem);
|
||||||
|
font-size: 1.2em;
|
||||||
|
padding: 1.3rem .5rem .5rem .5rem;
|
||||||
|
background: var(--color-white);
|
||||||
|
|
||||||
|
&[type="number"] {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(input:invalid) {
|
||||||
|
border-color: var(--color-red);
|
||||||
|
outline-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& input:focus,
|
||||||
|
& input:not(:placeholder-shown) {
|
||||||
|
& + label {
|
||||||
|
color: var(--color-main);
|
||||||
|
font-size: 1em;
|
||||||
top: .3rem;
|
top: .3rem;
|
||||||
left: .5rem;
|
right: .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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,50 +1,28 @@
|
||||||
:root {
|
:root {
|
||||||
--padding-default: 1rem;
|
--padding-default: 1rem;
|
||||||
--padding-small: .5rem;
|
--radius-default: 5px;
|
||||||
--radius-default: 3px;
|
|
||||||
--transition-default: 150ms;
|
--transition-default: 150ms;
|
||||||
|
|
||||||
--color-success: #328104;
|
--color-black: #333;
|
||||||
--color-error: #A20606;
|
--color-white: white;
|
||||||
--color-blue-light: #0DDCE7;
|
--color-white-transparent: rgba(255, 255, 255, 0.67);
|
||||||
--color-blue: #05B0FF;
|
--color-red: #cc0001;
|
||||||
--color-blue-dark: #0266F2;
|
--color-blue-light: #61a7fd;
|
||||||
--color-blue-darkest: #013174;
|
--color-blue: #2e86de;
|
||||||
|
--color-blue-dark: #1b4b7f;
|
||||||
--color-darkest: #292929;
|
--color-grey: #c7c7c7;
|
||||||
--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-orange: #DE9C2F;
|
||||||
|
|
||||||
--color-main: var(--color-blue);
|
--color-main: var(--color-blue);
|
||||||
--color-main-light: var(--color-blue-light);
|
--color-main-light: var(--color-blue-light);
|
||||||
--color-main-dark: var(--color-blue-dark);
|
--color-main-dark: var(--color-blue-dark);
|
||||||
--color-main-darkest: var(--color-blue-darkest);
|
|
||||||
|
|
||||||
--color-accent: var(--color-green);
|
--color-accent: var(--color-orange);
|
||||||
--color-accent-light: var(--color-green-light);
|
|
||||||
--color-accent-dark: var(--color-green-dark);
|
|
||||||
--color-accent-darkest: var(--color-green-darkest);
|
|
||||||
|
|
||||||
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
|
|
||||||
--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-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-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-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|
@ -58,7 +36,7 @@ body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color: var(--color-darkest);
|
color: var(--color-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
|
|
@ -101,6 +79,7 @@ body {
|
||||||
.card {
|
.card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--radius-default);
|
border-radius: var(--radius-default);
|
||||||
|
border: 1px solid var(--color-main);
|
||||||
box-shadow: var(--box-shadow-z2);
|
box-shadow: var(--box-shadow-z2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,7 +108,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-white {
|
.text-white {
|
||||||
color: var(--color-lightest);
|
color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-main {
|
.bg-main {
|
||||||
|
|
@ -146,50 +125,4 @@ body {
|
||||||
|
|
||||||
.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: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-blue {
|
|
||||||
background: var(--color-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-white {
|
|
||||||
background: var(--color-lightest);
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding {
|
|
||||||
gap: 1rem;
|
|
||||||
padding: var(--padding-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-small {
|
|
||||||
gap: 1rem;
|
|
||||||
padding: var(--padding-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 100vw;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--radius-default);
|
|
||||||
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
& header {
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
& footer {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::backdrop {
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -3,19 +3,16 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: var(--padding-default);
|
padding: var(--padding-default);
|
||||||
background-color: rgba(255 255 255 / .8);
|
background-color: var(--color-white);
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
box-shadow: var(--box-shadow-z2);
|
box-shadow: var(--box-shadow-z2);
|
||||||
color: var(--color-darkest);
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 100;
|
z-index: 1;
|
||||||
|
|
||||||
& strong {
|
& strong {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
color: var(--color-main-dark);
|
color: var(--color-main);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -41,7 +38,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
transition: 150ms ease-in-out;
|
transition: 150ms ease-in-out;
|
||||||
background: var(--color-lightest);
|
background: var(--color-white);
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
|
||||||
|
|
@ -1,117 +1,93 @@
|
||||||
.PriceCard {
|
.PriceCard {
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
transition: 150ms;
|
transition: 150ms;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
max-height: 400px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--color-darkest);
|
|
||||||
background: black;
|
|
||||||
|
|
||||||
.bottom {
|
&.deleting {
|
||||||
position: absolute;
|
max-height: 0;
|
||||||
z-index: 1;
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.folded {
|
||||||
|
grid-template-rows: auto 0fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > header {
|
||||||
|
color: var(--color-white);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
justify-content: space-between;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
height: 100%;
|
font-size: 1.3em;
|
||||||
|
|
||||||
& > * {
|
& > .Button {
|
||||||
flex-grow: 1;
|
color: var(--color-white);
|
||||||
color: var(--color-lightest);
|
border: 2px solid var(--color-white);
|
||||||
font-size: 2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
& .icon {
|
|
||||||
filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .bg-edit {
|
|
||||||
background: var(--color-gradient-main-dark);
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .bg-delete {
|
|
||||||
background: var(--color-gradient-error-reverse);
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: right;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
& aside {
|
||||||
position: relative;
|
overflow: hidden;
|
||||||
background: var(--color-lightest);
|
}
|
||||||
z-index: 2;
|
|
||||||
|
& footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& > .Button.delete {
|
||||||
|
scale: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .Button.deletable {
|
||||||
|
scale: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .padding {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: 1rem;
|
padding: var(--padding-default);
|
||||||
border-radius: var(--radius-default);
|
}
|
||||||
|
|
||||||
&.animated {
|
& .bg-blue {
|
||||||
transition: var(--transition-default);
|
background: var(--color-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .bg-white {
|
||||||
|
background: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
& .wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
flex-basis: 25%;
|
||||||
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > header {
|
& > .info {
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--color-darkest);
|
|
||||||
|
|
||||||
& .icon {
|
& > .icon {
|
||||||
font-size: 1rem;
|
color: var(--color-blue-light);
|
||||||
cursor: pointer;
|
font-size: 2rem;
|
||||||
|
padding: .2rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
& .name-price {
|
& > .price {
|
||||||
display: flex;
|
font-size: 1.2rem;
|
||||||
gap: .5rem;
|
}
|
||||||
|
|
||||||
& > span:nth-child(1) {
|
& > .pro {
|
||||||
|
font-size: .8rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
max-width: 210px;
|
color: var(--color-main-light);
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > span:nth-child(2)::before {
|
|
||||||
content: '•';
|
|
||||||
margin-right: .5rem;
|
|
||||||
color: var(--color-middle);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
gap: 1rem;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
& > .info {
|
|
||||||
flex-grow: 0;
|
|
||||||
align-items: center;
|
|
||||||
gap: .25rem;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
& > .price {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: .5rem;
|
|
||||||
|
|
||||||
& > .icon {
|
|
||||||
color: var(--color-main-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .pro {
|
|
||||||
font-size: .6rem;
|
|
||||||
color: var(--color-middle);
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
.Toolbar {
|
.Toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
background: var(--color-main-darkest);
|
background: var(--color-main);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 100;
|
|
||||||
box-shadow: var(--box-shadow-upper);
|
box-shadow: var(--box-shadow-upper);
|
||||||
|
|
||||||
& > .Button {
|
& > .Button {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ButtonGroup z-2">
|
<div class="ButtonGroup">
|
||||||
<button
|
<button
|
||||||
v-for="(button, index) in buttons"
|
v-for="(button, index) in buttons"
|
||||||
@click="click(index)"
|
@click="click(index)"
|
||||||
|
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<template>
|
|
||||||
<dialog
|
|
||||||
ref="dialog"
|
|
||||||
closedby="any"
|
|
||||||
>
|
|
||||||
<form method="dialog">
|
|
||||||
<header class="flex-row padding">
|
|
||||||
Wirklich löschen?
|
|
||||||
<PpButton class="round text">
|
|
||||||
<Icon name="uil:times" mode="svg" />
|
|
||||||
</PpButton>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<div class="padding flex-col">
|
|
||||||
<p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer class="flex-row padding">
|
|
||||||
<PpButton class="text">
|
|
||||||
<span>Abbrechen</span>
|
|
||||||
</PpButton>
|
|
||||||
<PpButton class="danger raised" @click="$emit('delete')">
|
|
||||||
<span>Löschen</span>
|
|
||||||
</PpButton>
|
|
||||||
</footer>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
type Props = {
|
|
||||||
currentCardIndex : number
|
|
||||||
}
|
|
||||||
|
|
||||||
defineProps<Props>()
|
|
||||||
defineEmits(['delete'])
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,20 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="Input">
|
<div class="Input flex-col">
|
||||||
<div class="input-wrapper flex-col">
|
<input
|
||||||
<input
|
|
||||||
v-model="text"
|
v-model="text"
|
||||||
:type="type"
|
:type="type"
|
||||||
:id="id"
|
:id="makeId()"
|
||||||
:step="step"
|
:step="step"
|
||||||
:min="min"
|
:min="min"
|
||||||
:max="max"
|
:max="max"
|
||||||
:required="required"
|
:required="required"
|
||||||
placeholder=" "
|
placeholder=" "
|
||||||
@blur="emit('blur')"
|
@blur="emit('blur')"
|
||||||
/>
|
/>
|
||||||
<label :for="id">{{ label }}</label>
|
<label :for="makeId()">{{ label }}</label>
|
||||||
</div>
|
|
||||||
<span v-if="message">{{ message }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -25,9 +22,9 @@ type Props = {
|
||||||
min ?: number
|
min ?: number
|
||||||
step ?: number
|
step ?: number
|
||||||
required ?: boolean
|
required ?: boolean
|
||||||
message ?: string
|
|
||||||
label : string
|
label : string
|
||||||
id : string
|
id : string
|
||||||
|
uid : string
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|
@ -35,9 +32,15 @@ const {
|
||||||
required = false,
|
required = false,
|
||||||
step = 0.01,
|
step = 0.01,
|
||||||
min = 1,
|
min = 1,
|
||||||
|
max,
|
||||||
|
label,
|
||||||
|
id,
|
||||||
|
uid,
|
||||||
} = defineProps<Props>()
|
} = defineProps<Props>()
|
||||||
|
|
||||||
const emit = defineEmits(['blur'])
|
const emit = defineEmits(['blur'])
|
||||||
|
|
||||||
const text = defineModel()
|
const text = defineModel()
|
||||||
|
|
||||||
|
const makeId = () => `${id}_${uid}`
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<header class="Header">
|
<header class="Header">
|
||||||
<NuxtLink to="/">
|
<strong><span>Pro</span>Papier</strong>
|
||||||
<strong><span>Pro</span>Papier</strong>
|
|
||||||
</NuxtLink>
|
|
||||||
<label for="burger_nav_toggle">
|
<label for="burger_nav_toggle">
|
||||||
<Icon name="solar:hamburger-menu-broken" size="2em" />
|
<Icon name="solar:hamburger-menu-broken" size="2em" />
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -46,11 +44,4 @@ const navPoints = useState<NavPoint[]>('nav', () => ([
|
||||||
const cb = useTemplateRef('checkbox')
|
const cb = useTemplateRef('checkbox')
|
||||||
const closeNav = () => { cb.value!.checked = false }
|
const closeNav = () => { cb.value!.checked = false }
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
header a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--color-darkest);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,59 +1,64 @@
|
||||||
<template>
|
<template>
|
||||||
<article class="PriceCard card">
|
<form
|
||||||
<div class="bottom">
|
ref="root"
|
||||||
<div class="bg-edit">
|
class="PriceCard card"
|
||||||
<Icon class="icon" name="uil:pen" mode="svg" />
|
:class="{ folded, deleting }"
|
||||||
|
@submit.prevent="() => {}"
|
||||||
|
>
|
||||||
|
<header class="padding bg-blue">
|
||||||
|
{{ card.name || 'Kein Name' }}
|
||||||
|
<PpButton
|
||||||
|
class="icon-button bg-main"
|
||||||
|
@click="folded = !folded"
|
||||||
|
>
|
||||||
|
<Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
|
||||||
|
</PpButton>
|
||||||
|
</header>
|
||||||
|
<aside>
|
||||||
|
<div class="input-wrapper padding bg-blue flex-col">
|
||||||
|
<div class="wrapper">
|
||||||
|
<PpFormInput v-model="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
|
||||||
|
<PpFormInput v-model="card.price" label="Preis" id="p" :uid="card.uuid" type="number" :min="0.01" @blur="calculate" />
|
||||||
|
</div>
|
||||||
|
<div class="wrapper">
|
||||||
|
<PpFormInput v-model="card.roles" label="Rollen" id="r" :uid="card.uuid" type="number" :max="150" @blur="calculate" />
|
||||||
|
<PpFormInput v-model="card.sheets" label="Blätter" id="b" :uid="card.uuid" type="number" :max="500" @blur="calculate" />
|
||||||
|
<PpFormInput v-model="card.layers" label="Lagen" id="l" :uid="card.uuid" type="number" :max="10" @blur="calculate" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-delete">
|
</aside>
|
||||||
<Icon class="icon" name="uil:trash-alt" mode="svg" />
|
<main class="wrapper padding bg-white">
|
||||||
|
<div class="info flex-col">
|
||||||
|
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
||||||
|
<span class="price">{{ intl.format(ppr) }}</span>
|
||||||
|
<span class="pro">Pro 1</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="info flex-col">
|
||||||
<div
|
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
||||||
ref="top"
|
<span class="price">{{ intl.format(pps) }}</span>
|
||||||
class="top flex-col"
|
<span class="pro">Pro 10</span>
|
||||||
:class="{ 'animated' : !isSwiping }"
|
</div>
|
||||||
:style="{ left }"
|
<div class="info flex-col">
|
||||||
>
|
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
||||||
<header>
|
<span class="price">{{ intl.format(ppl) }}</span>
|
||||||
<div class="name-price">
|
<span class="pro">Pro 100</span>
|
||||||
<span>{{ card.name || 'Kein Name' }}</span>
|
</div>
|
||||||
<span>{{ intl.format(+replaceComma(card.price))}}</span>
|
</main>
|
||||||
</div>
|
<footer class="padding bg-blue flex-row">
|
||||||
<div v-if="$device.isDesktop" class="flex-row gap-default">
|
<PpButton
|
||||||
<PpButton class="icon-button" @click="update()">
|
class="delete"
|
||||||
<Icon class="icon" name="uil:pen" mode="svg" />
|
:class="{ deletable }"
|
||||||
</PpButton>
|
@click="deleteCard"
|
||||||
<PpButton class="icon-button" @click="deleteCard()">
|
>
|
||||||
<Icon class="icon" name="uil:trash-alt" mode="svg" />
|
<Icon name="uil:trash" mode="svg" />
|
||||||
</PpButton>
|
Entfernen
|
||||||
</div>
|
</PpButton>
|
||||||
</header>
|
<PpButton v-if="false" class="cta white">
|
||||||
|
<Icon name="uil:qrcode-scan" mode="svg" />
|
||||||
<main class="wrapper">
|
Scan
|
||||||
<div class="info flex-col">
|
</PpButton>
|
||||||
<div class="price">
|
</footer>
|
||||||
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
</form>
|
||||||
<span class="value">{{ intl.format(card.ppr) }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info flex-col">
|
|
||||||
<div class="price">
|
|
||||||
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
|
||||||
<span class="value">{{ intl.format(card.pps) }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info flex-col">
|
|
||||||
<div class="price">
|
|
||||||
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
|
||||||
<span class="value">{{ intl.format(card.ppl) }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
@ -67,30 +72,44 @@ type Props = {
|
||||||
const { card } = defineProps<Props>()
|
const { card } = defineProps<Props>()
|
||||||
const emit = defineEmits(['remove', 'update'])
|
const emit = defineEmits(['remove', 'update'])
|
||||||
|
|
||||||
const top = useTemplateRef('top')
|
const root = ref<HTMLElement>()
|
||||||
const left = shallowRef<string>('0')
|
const folded = ref<boolean>(false)
|
||||||
|
const deleting = ref<boolean>(false)
|
||||||
|
|
||||||
|
const ppr = ref(card.ppr)
|
||||||
|
const pps = ref(card.pps)
|
||||||
|
const ppl = ref(card.ppl)
|
||||||
|
|
||||||
const intl = Intl.NumberFormat('de-DE', {
|
const intl = Intl.NumberFormat('de-DE', {
|
||||||
style: 'currency',
|
style: 'currency',
|
||||||
currency: 'EUR',
|
currency: 'EUR',
|
||||||
})
|
})
|
||||||
|
|
||||||
const { lengthX, isSwiping } = useSwipe(top, {
|
const calculate = () => {
|
||||||
passive: false,
|
if (!card.price || !card.roles) return
|
||||||
threshold: 30,
|
ppr.value = card.price / card.roles
|
||||||
onSwipe() {
|
|
||||||
if (lengthX.value > 50 || lengthX.value < -50) {
|
|
||||||
left.value = `${-clamp(lengthX.value, -100, 100)}px`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSwipeEnd() {
|
|
||||||
if (lengthX.value < -50) update()
|
|
||||||
if (lengthX.value > 50) deleteCard()
|
|
||||||
left.value = '0'
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const update = () => emit('update')
|
if (!card.sheets) {
|
||||||
|
update()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
pps.value = (ppr.value / card.sheets) * 10
|
||||||
|
|
||||||
const deleteCard = () => emit('remove')
|
if(!card.layers) {
|
||||||
|
update()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ppl.value = (pps.value / card.layers) * 10
|
||||||
|
|
||||||
|
update()
|
||||||
|
}
|
||||||
|
|
||||||
|
const update = () => emit('update', { ...card, ppr: ppr.value, pps: pps.value, ppl: ppl.value })
|
||||||
|
|
||||||
|
const deleteCard = async () => {
|
||||||
|
root.value?.addEventListener('transitionend', () => emit('remove'))
|
||||||
|
deleting.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => folded.value = !!card.price)
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<template>
|
|
||||||
<dialog
|
|
||||||
ref="dialog"
|
|
||||||
closedby="any"
|
|
||||||
>
|
|
||||||
<form method="dialog">
|
|
||||||
<header class="flex-row padding">
|
|
||||||
{{ cardLabel }}
|
|
||||||
<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-row gap-default">
|
|
||||||
<PpFormInput
|
|
||||||
v-model="currentCard.name"
|
|
||||||
id="card_name"
|
|
||||||
label="Name"
|
|
||||||
:class="{'error': !validFields.name }"
|
|
||||||
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
|
|
||||||
/>
|
|
||||||
<PpFormInput
|
|
||||||
v-model="currentCard.price"
|
|
||||||
id="card_price"
|
|
||||||
label="Preis"
|
|
||||||
:class="{'error': !validFields.price }"
|
|
||||||
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row gap-default">
|
|
||||||
<PpFormInput
|
|
||||||
v-model="currentCard.roles"
|
|
||||||
id="card_roles"
|
|
||||||
label="Rollen"
|
|
||||||
:class="{'error': !validFields.roles }"
|
|
||||||
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
|
|
||||||
/>
|
|
||||||
<PpFormInput
|
|
||||||
v-model="currentCard.sheets"
|
|
||||||
id="card_sheets"
|
|
||||||
label="Blätter"
|
|
||||||
:class="{'error': !validFields.sheets }"
|
|
||||||
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
|
|
||||||
/>
|
|
||||||
<PpFormInput
|
|
||||||
v-model="currentCard.layers"
|
|
||||||
id="card_layers"
|
|
||||||
label="Lagen"
|
|
||||||
:class="{'error': !validFields.layers }"
|
|
||||||
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer class="flex-row padding">
|
|
||||||
<form method="dialog">
|
|
||||||
<PpButton class="danger text">
|
|
||||||
<span>Abbrechen</span>
|
|
||||||
</PpButton>
|
|
||||||
</form>
|
|
||||||
<PpButton class="raised" @click="validate">
|
|
||||||
<span>{{ cardLabel }}</span>
|
|
||||||
</PpButton>
|
|
||||||
</footer>
|
|
||||||
</dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { Card } from '../../../shared/Card'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
currentCardIndex : number
|
|
||||||
currentCard ?: Card
|
|
||||||
}
|
|
||||||
|
|
||||||
const { currentCardIndex, currentCard } = defineProps<Props>()
|
|
||||||
const emit = defineEmits(['update'])
|
|
||||||
|
|
||||||
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
|
|
||||||
const cardLabel = computed(() => currentCardIndex > -1 ? 'Bearbeiten' : 'Hinzufügen')
|
|
||||||
|
|
||||||
const checkPrice = () => {
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
const validFields = reactive({
|
|
||||||
name: true,
|
|
||||||
price: true,
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
dialog.value?.addEventListener('close', () => {
|
|
||||||
validFields.name = true
|
|
||||||
validFields.price = true
|
|
||||||
validFields.roles = true
|
|
||||||
validFields.sheets = true
|
|
||||||
validFields.layers = true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<section class="Imp flex-col gap-default content full">
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
Fiona Lena Urban<br/>
|
|
||||||
Fiona Urban aka webfussel<br/>
|
|
||||||
Teichäckerweg 39<br/>
|
|
||||||
76297 Stutensee
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3>Kontakt</h3>
|
|
||||||
<ClientOnly>
|
|
||||||
<p>
|
|
||||||
Telefon: 017631640961<br/>
|
|
||||||
E-Mail: fiona@webfussel.de
|
|
||||||
</p>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3>Umsatzsteuer-ID</h3>
|
|
||||||
<p>
|
|
||||||
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br/>
|
|
||||||
DE348500161
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3>Angaben zur Berufs­haftpflicht­versicherung</h3>
|
|
||||||
<p>
|
|
||||||
<strong>Name und Sitz des Versicherers:</strong><br/>
|
|
||||||
Hiscox SA<br/>
|
|
||||||
Arnulfstr. 31<br/>
|
|
||||||
80636 München
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<strong>Geltungsraum der Versicherung:</strong><br/>
|
|
||||||
Bundesrepublik Deutschland
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3>Redaktionell verantwortlich</h3>
|
|
||||||
<p>Fiona Lena Urban</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3>Verbraucher­streit­beilegung / Universal­schlichtungs­stelle</h3>
|
|
||||||
<p>
|
|
||||||
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
|
|
||||||
Verbraucherschlichtungsstelle teilzunehmen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-col gap-default">
|
|
||||||
<h3>Quellenangaben</h3>
|
|
||||||
<div>
|
|
||||||
<h4>Impressumstext</h4>
|
|
||||||
<p>Quelle: <a href="https://www.e-recht24.de">e-recht24.de</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
useSeoMeta({
|
|
||||||
robots: 'noindex, nofollow',
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,15 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<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">
|
<section class="content flex-col">
|
||||||
<aside class="filter-bar">
|
<aside class="filter-bar">
|
||||||
<PpButtonGroup
|
<PpButtonGroup
|
||||||
|
|
@ -23,13 +12,13 @@
|
||||||
:key="card.uuid"
|
:key="card.uuid"
|
||||||
:deletable="cards.length > 1"
|
:deletable="cards.length > 1"
|
||||||
:card="card"
|
:card="card"
|
||||||
@update="openModal(false, index)"
|
@update="newCard => updateCard(newCard, index)"
|
||||||
@remove="openDeleteModal()"
|
@remove="removeCard(card)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<PpToolbar>
|
<PpToolbar>
|
||||||
<PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
|
<PpButton class="mini-button text-white" @click="sort(currentSort)">
|
||||||
<Icon class="icon" name="uil:refresh" mode="svg" />
|
<Icon class="icon" name="uil:refresh" mode="svg" />
|
||||||
<span>Neu sortieren</span>
|
<span>Neu sortieren</span>
|
||||||
<span
|
<span
|
||||||
|
|
@ -38,7 +27,7 @@
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</PpButton>
|
</PpButton>
|
||||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
<PpButton class="mini-button text-white" @click="addCard">
|
||||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||||
<span>Hinzufügen</span>
|
<span>Hinzufügen</span>
|
||||||
</PpButton>
|
</PpButton>
|
||||||
|
|
@ -48,82 +37,46 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Card } from '../../shared/Card'
|
import type { Card } from '../../shared/Card'
|
||||||
import type { Button } from '../../shared/ButtonGroup'
|
import type { Button } from '../../shared/ButtonGroup'
|
||||||
import { PpPriceCardDialog, PpDeleteDialog } from '#components'
|
|
||||||
|
|
||||||
const currentSort = ref(0)
|
const currentSort = ref(0)
|
||||||
const isDirty = ref(false)
|
const isDirty = ref(false)
|
||||||
const currentCard = ref<Card>()
|
|
||||||
const currentCardIndex = ref<number>(-1)
|
|
||||||
const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
|
|
||||||
const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
|
|
||||||
|
|
||||||
const createCard = (uuid : string) : Card => ({
|
const createCard = (uuid : string) : Card => ({
|
||||||
uuid,
|
uuid,
|
||||||
name: '',
|
name: '',
|
||||||
price: '',
|
price: 0,
|
||||||
roles: '',
|
roles: 0,
|
||||||
sheets: '',
|
sheets: 0,
|
||||||
layers: '',
|
layers: 0,
|
||||||
ppr: 0,
|
ppr: 0,
|
||||||
pps: 0,
|
pps: 0,
|
||||||
ppl: 0,
|
ppl: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
const cards = useState<Card[]>('cards', () => [
|
const cards = useState('cards', () => [
|
||||||
createCard(crypto.randomUUID()),
|
createCard(crypto.randomUUID()),
|
||||||
])
|
])
|
||||||
|
|
||||||
const addCard = (card : Card) => {
|
const addCard = () => {
|
||||||
const price = calculate(card)
|
cards.value.unshift(createCard(crypto.randomUUID()))
|
||||||
cards.value.unshift({ ...card, ...price })
|
isDirty.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeCard = (card : Card) => {
|
||||||
|
cards.value = cards.value.filter(element => element.uuid !== card.uuid)
|
||||||
isDirty.value = true
|
isDirty.value = true
|
||||||
updateLocalStorage()
|
updateLocalStorage()
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeCard = (index : number) => {
|
const updateCard = (card : Card, index : number) => {
|
||||||
cards.value.splice(index, 1)
|
cards.value[index] = card
|
||||||
isDirty.value = true
|
isDirty.value = true
|
||||||
updateLocalStorage()
|
updateLocalStorage()
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateCard = () => {
|
|
||||||
if (currentCardIndex.value === -1) {
|
|
||||||
addCard(currentCard.value!)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const price = calculate(currentCard.value!)
|
|
||||||
const newCard = { ...currentCard.value!, ...price }
|
|
||||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
|
||||||
isDirty.value = true
|
|
||||||
updateLocalStorage()
|
|
||||||
}
|
|
||||||
|
|
||||||
const openModal = (createNew : boolean, index : number) => {
|
|
||||||
if (createNew) {
|
|
||||||
currentCardIndex.value = -1
|
|
||||||
currentCard.value = createCard(crypto.randomUUID())
|
|
||||||
|
|
||||||
modal.value?.$el.showModal()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
currentCardIndex.value = index
|
|
||||||
currentCard.value = { ...cards.value[index]! }
|
|
||||||
|
|
||||||
modal.value?.$el.showModal()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const openDeleteModal = () => {
|
|
||||||
deleteModal.value?.$el.showModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateLocalStorage = () => {
|
const updateLocalStorage = () => {
|
||||||
localStorage.setItem('cards', JSON.stringify(cards.value.map(card => {
|
localStorage.setItem('cards', JSON.stringify(cards.value))
|
||||||
const { uuid, name, price, roles, sheets, layers } = card
|
|
||||||
return { uuid, name, price, roles, sheets, layers }
|
|
||||||
})))
|
|
||||||
localStorage.setItem('sort', JSON.stringify(currentSort.value))
|
localStorage.setItem('sort', JSON.stringify(currentSort.value))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -167,16 +120,8 @@ const sort = (index : number) => {
|
||||||
isDirty.value = false
|
isDirty.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const calculate = (card : Card) => {
|
|
||||||
const ppr = +replaceComma(card.price) / +card.roles
|
|
||||||
const pps = (ppr / +card.sheets) * 100
|
|
||||||
const ppl = (pps / +card.layers)
|
|
||||||
|
|
||||||
return { ppr, pps, ppl }
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]').map((card : Card) => ({ ...card, ...calculate(card) }))
|
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
|
||||||
cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
|
cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
|
||||||
const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
|
const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
|
||||||
sort(sortFromStorage)
|
sort(sortFromStorage)
|
||||||
|
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<template>
|
|
||||||
<section class="flex-col gap-default content full">
|
|
||||||
<h3>
|
|
||||||
Datenschutzerklärung
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Wir senden keinerlei Daten an Drittanbieter.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Wir verwerten keinerlei Daten.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Alle persistierten Daten befinden sich ausschließlich auf Ihrem Endgerät im sogenannten "localStorage" und werden ausschließlich auf Ihrem Gerät verarbeitet.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export const replaceComma = (value: string | number) => `${value}`.replace(',', '.')
|
|
||||||
|
|
||||||
export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
|
|
||||||
|
|
@ -6,26 +6,8 @@ export default defineNuxtConfig({
|
||||||
compatibilityVersion: 4,
|
compatibilityVersion: 4,
|
||||||
},
|
},
|
||||||
|
|
||||||
nitro: {
|
|
||||||
prerender: {
|
|
||||||
routes: [
|
|
||||||
'/',
|
|
||||||
'/imprint',
|
|
||||||
'/privacy',
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
routeRules: {
|
|
||||||
'/': { prerender: true },
|
|
||||||
'/imprint': { prerender: true },
|
|
||||||
'/privacy': { prerender: true },
|
|
||||||
},
|
|
||||||
|
|
||||||
modules: [
|
modules: [
|
||||||
'@nuxt/icon',
|
'@nuxt/icon',
|
||||||
'@vueuse/nuxt',
|
|
||||||
'@nuxtjs/device',
|
|
||||||
'nuxt-mongoose',
|
'nuxt-mongoose',
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
9401
package-lock.json
generated
Normal file → Executable file
9401
package-lock.json
generated
Normal file → Executable file
File diff suppressed because it is too large
Load diff
|
|
@ -12,12 +12,8 @@
|
||||||
"postinstall": "nuxt prepare"
|
"postinstall": "nuxt prepare"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify-json/simple-icons": "^1.2.32",
|
|
||||||
"@iconify-json/uil": "^1.2.3",
|
|
||||||
"@nuxt/icon": "^1.10.3",
|
"@nuxt/icon": "^1.10.3",
|
||||||
"@nuxtjs/device": "^3.2.4",
|
"nuxt": "^3.15.4",
|
||||||
"@vueuse/nuxt": "^13.1.0",
|
|
||||||
"nuxt": "^3.16.2",
|
|
||||||
"nuxt-mongoose": "^1.0.6",
|
"nuxt-mongoose": "^1.0.6",
|
||||||
"vue": "latest",
|
"vue": "latest",
|
||||||
"vue-router": "latest"
|
"vue-router": "latest"
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
export type Card = {
|
export type Card = {
|
||||||
|
uuid: string
|
||||||
|
name: string
|
||||||
|
price: number
|
||||||
|
roles: number
|
||||||
|
sheets: number
|
||||||
|
layers: number
|
||||||
ppr: number
|
ppr: number
|
||||||
pps: number
|
pps: number
|
||||||
ppl: number
|
ppl: number
|
||||||
uuid: string
|
}
|
||||||
name: string
|
|
||||||
price: string
|
|
||||||
roles: string
|
|
||||||
sheets: string
|
|
||||||
layers: string
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue