fix: normalized and centralized sizes and padding & landingpage structure #5
25 changed files with 472 additions and 389 deletions
23
app/app.vue
Executable file → Normal file
23
app/app.vue
Executable file → Normal file
|
|
@ -1,11 +1,18 @@
|
|||
<template>
|
||||
<div class="page-wrapper">
|
||||
<PpHeader />
|
||||
<div class="page">
|
||||
<PpNavigation />
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
<PpFooter />
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: all 2000ms;
|
||||
}
|
||||
.page-enter-from,
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
filter: blur(.5rem);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.Button {
|
||||
--padding: .2rem;
|
||||
--padding: var(--padding-xs);
|
||||
--background: var(--color-main-dark);
|
||||
--color: var(--color-lightest);
|
||||
--background-hover: var(--color-main-dark);
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-default);
|
||||
outline: none;
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
&.transparent {
|
||||
--background: transparent;
|
||||
box-shadow: none;
|
||||
padding: .5em 1.5em;
|
||||
padding: var(--padding-s) var(--padding-l);
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
&.raised {
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
padding: .5em 1.5em;
|
||||
padding: var(--padding-s) var(--padding-l);
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&.danger {
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
&.text {
|
||||
--background: transparent;
|
||||
--color: var(--color-darkest);
|
||||
padding: .5em 1.5em;
|
||||
padding: var(--padding-s) var(--padding-l);
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -62,13 +62,13 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
padding: .5rem;
|
||||
padding: var(--padding-s);
|
||||
}
|
||||
|
||||
&.cta {
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
padding: .5rem 1.5rem;
|
||||
padding: var(--padding-s) var(--padding-l);
|
||||
border-radius: var(--radius-default);
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
--color: var(--color-main-darkest);
|
||||
border-radius: 100%;
|
||||
padding: var(--padding);
|
||||
font-size: 1.1em;
|
||||
font-size: var(--font-size-l);
|
||||
|
||||
&:hover {
|
||||
scale: 1.2;
|
||||
|
|
@ -106,17 +106,17 @@
|
|||
}
|
||||
|
||||
&.mini-button {
|
||||
padding: .5rem 1.5rem;
|
||||
padding: var(--padding-s) var(--padding-l);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
gap: var(--padding-xs);
|
||||
|
||||
& > .icon {
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: .8rem;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
gap: var(--padding-xs);
|
||||
padding: var(--padding-s);
|
||||
flex-grow: 1;
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ dialog {
|
|||
border: none;
|
||||
border-radius: var(--radius-default);
|
||||
background: var(--color-lightest);
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-default);
|
||||
color: var(--color-darkest);
|
||||
position: relative;
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ dialog {
|
|||
& > .wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
}
|
||||
|
||||
& header {
|
||||
|
|
|
|||
|
|
@ -12,27 +12,27 @@
|
|||
|
||||
& .bottom {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
justify-content: space-between;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
& .socials {
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--font-size-xl);
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: var(--padding-xl);
|
||||
}
|
||||
|
||||
& .data-links {
|
||||
justify-content: flex-end;
|
||||
font-size: .8rem;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
& ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
|
||||
& a {
|
||||
color: var(--color-lightest);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.Search {
|
||||
border-radius: 9999px;
|
||||
background: var(--color-lightest);
|
||||
padding: 0 1rem;
|
||||
padding: 0 var(--padding-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
|
||||
& > input {
|
||||
all: unset;
|
||||
flex-grow: 1;
|
||||
padding: .5rem 0;
|
||||
padding: var(--padding-s) 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
.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);
|
||||
--label-position-top: var(--font-size-default);
|
||||
--label-position-left: 2.5rem;
|
||||
--label-font-size: var(--font-size-default);
|
||||
--message-color: var(--color-middle);
|
||||
|
||||
position: relative;
|
||||
|
|
@ -15,15 +15,11 @@
|
|||
|
||||
&: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);
|
||||
--label-color: var(--color-error) !important;
|
||||
--border-color: var(--color-error);
|
||||
--message-color: var(--color-error);
|
||||
}
|
||||
|
|
@ -31,37 +27,46 @@
|
|||
& .wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
padding: var(--padding-xxs) var(--padding-xs);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
& label {
|
||||
position: absolute;
|
||||
background: var(--color-lightest);
|
||||
padding: 0.2rem;
|
||||
left: 1.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--label-color);
|
||||
top: var(--label-position-top);
|
||||
font-size: var(--label-font-size);
|
||||
gap: 2px;
|
||||
top: -6px;
|
||||
left: calc(var(--padding-xs) - 2px);
|
||||
font-size: var(--font-size-s);
|
||||
transition: var(--transition-default);
|
||||
|
||||
& > * {
|
||||
background: var(--color-lightest);
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& .icon {
|
||||
color: var(--icon-color);
|
||||
position: relative;
|
||||
color: var(--label-color);
|
||||
font-size: var(--font-size-default);
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
& input {
|
||||
all: unset;
|
||||
padding: var(--padding-small);
|
||||
font-size: 1rem;
|
||||
padding: var(--padding-xxs) var(--padding-s) var(--padding-xxs) 0;
|
||||
font-size: var(--font-size-s);
|
||||
width: 100%;
|
||||
flex: 25% 1 0;
|
||||
color: var(--color-darkest);
|
||||
}
|
||||
|
||||
& span {
|
||||
& > span {
|
||||
color: var(--message-color);
|
||||
font-size: 0.6rem;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
:root {
|
||||
--padding-default: 1rem;
|
||||
--padding-small: 0.5rem;
|
||||
--padding-large: 2rem;
|
||||
--radius-default: 3px;
|
||||
--radius-border: 15px;
|
||||
--transition-default: 150ms;
|
||||
|
||||
--color-success: #328104;
|
||||
--color-error: #a20606;
|
||||
--color-blue-light: #0ddce7;
|
||||
--color-blue-light: #d7e1f1;
|
||||
--color-blue: #05b0ff;
|
||||
--color-blue-dark: #0266f2;
|
||||
--color-blue-darkest: #013174;
|
||||
|
|
@ -26,6 +19,7 @@
|
|||
--color-green-darkest-most: #157c2a;
|
||||
|
||||
--color-main: var(--color-blue);
|
||||
--color-main-lightest: var(--color-blue-light);
|
||||
--color-main-light: var(--color-blue-light);
|
||||
--color-main-dark: var(--color-blue-dark);
|
||||
--color-main-darkest: var(--color-blue-darkest);
|
||||
|
|
@ -35,6 +29,9 @@
|
|||
--color-accent-dark: var(--color-green-dark);
|
||||
--color-accent-darkest: var(--color-green-darkest);
|
||||
|
||||
--color-text: var(--color-darkest);
|
||||
--color-text-invert: var(--color-lightest);
|
||||
|
||||
--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));
|
||||
|
|
@ -45,6 +42,29 @@
|
|||
--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);
|
||||
|
||||
/* Font Sizes & Scaling Factor*/
|
||||
--scaling-factor: 1.25;
|
||||
--font-size-xs: calc(var(--font-size-s) / var(--scaling-factor));
|
||||
--font-size-s: calc(var(--font-size-default) / var(--scaling-factor));
|
||||
--font-size-default: 1rem;
|
||||
--font-size-l: calc(var(--font-size-default) * var(--scaling-factor));
|
||||
--font-size-xl: calc(var(--font-size-l) * var(--scaling-factor));
|
||||
--font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor));
|
||||
|
||||
/* Paddings depend on Font-Size */
|
||||
--padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
|
||||
--padding-xs: calc(var(--padding-s) / var(--scaling-factor));
|
||||
--padding-default: var(--font-size-default);
|
||||
--padding-s: calc(var(--padding-default) / var(--scaling-factor));
|
||||
--padding-l: calc(var(--padding-default) * var(--scaling-factor));
|
||||
--padding-xl: calc(var(--padding-l) * var(--scaling-factor));
|
||||
--padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));
|
||||
|
||||
--radius-default: calc(var(--font-size-default) / 3);
|
||||
--radius-border: var(--font-size-default);
|
||||
|
||||
--transition-default: 150ms;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -59,43 +79,29 @@ body {
|
|||
overflow-x: hidden;
|
||||
font-family: sans-serif;
|
||||
background: var(--color-main-darkest);
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-default);
|
||||
}
|
||||
|
||||
.dot {
|
||||
--size: 10px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
top: 5px;
|
||||
right: 25%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-accent);
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
position: absolute;
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
scale: 0;
|
||||
transition: var(--transition-default);
|
||||
|
||||
&.visible {
|
||||
scale: 1;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin: var(--padding-xl) 0 var(--padding-default);
|
||||
text-wrap: balance;
|
||||
hyphens: auto;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||||
}
|
||||
h2 {
|
||||
margin: var(--padding-l) 0 var(--padding-default);
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
h3 {
|
||||
margin: var(--padding-default) 0 var(--padding-default);
|
||||
font-size: var(--font-size-default);
|
||||
}
|
||||
|
||||
a:has(button) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -115,7 +121,7 @@ body {
|
|||
}
|
||||
|
||||
.text-white {
|
||||
color: var(--color-lightest);
|
||||
color: var(--color-text-invert);
|
||||
}
|
||||
|
||||
.bg-main {
|
||||
|
|
@ -130,12 +136,16 @@ body {
|
|||
background-color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
.bg-main-darkest {
|
||||
background-color: var(--color-main-darkest);
|
||||
}
|
||||
|
||||
.bg-main-dark-hover:hover {
|
||||
background-color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
.gap-default {
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
|
|
@ -147,13 +157,13 @@ body {
|
|||
}
|
||||
|
||||
.padding {
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
.padding-small {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-small);
|
||||
gap: var(--padding-default);
|
||||
padding: var(--padding-s);
|
||||
}
|
||||
|
||||
.roboto-condensed {
|
||||
|
|
@ -170,5 +180,5 @@ body {
|
|||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
height: 10px;
|
||||
height: var(--padding-s);
|
||||
}
|
||||
|
|
@ -2,20 +2,37 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: var(--color-main-darkest);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
padding: var(--padding-default);
|
||||
|
||||
&:not(.lp) {
|
||||
background: var(--color-main-darkest);
|
||||
}
|
||||
|
||||
&.lp {
|
||||
position: absolute;
|
||||
backdrop-filter: blur(10px);
|
||||
mask: linear-gradient(to top, transparent, black 20%);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
& .logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
& .burger-button {
|
||||
all: unset;
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
|
||||
& header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
|
||||
& a {
|
||||
|
|
@ -26,7 +43,7 @@
|
|||
& .header-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
|
|
@ -34,52 +51,17 @@
|
|||
}
|
||||
|
||||
& .big {
|
||||
font-size: 1.5em;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& .small {
|
||||
font-size: .8em;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& input[type="checkbox"]:checked + nav {
|
||||
translate: 0;
|
||||
}
|
||||
|
||||
& nav,
|
||||
& ul {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
& nav {
|
||||
position: fixed;
|
||||
padding: var(--padding-default);
|
||||
translate: 100% 0;
|
||||
width: 100vw;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
transition: 150ms ease-in-out;
|
||||
background: var(--color-lightest);
|
||||
font-size: 2em;
|
||||
align-items: end;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
& ul {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
& li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.lp) {
|
||||
&:after, &:before {
|
||||
content: '';
|
||||
display: block;
|
||||
|
|
@ -99,4 +81,5 @@
|
|||
left: 0;
|
||||
mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
|
||||
}
|
||||
}
|
||||
}
|
||||
30
app/assets/styles/landingpage.css
Normal file
30
app/assets/styles/landingpage.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.home-hero {
|
||||
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/img/hero-image.webp"); /* single color gradient for dark layer over image */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
color: var(--color-text-invert);
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin: var(--padding-xxl) auto 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
.home-text {
|
||||
padding: var(--padding-xxl) var(--padding-default);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
69
app/assets/styles/navigation.css
Normal file
69
app/assets/styles/navigation.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.Navigation {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: 5000;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 150ms ease-in-out;
|
||||
pointer-events: none;
|
||||
|
||||
&.open {
|
||||
pointer-events: all;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
|
||||
& nav {
|
||||
translate: -1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
background: var(--color-lightest);
|
||||
align-items: end;
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
padding: var(--padding-default);
|
||||
height: calc(100% - var(--padding-xxl));
|
||||
width: 70%;
|
||||
translate: 100% 0;
|
||||
transition: 150ms ease-in-out;
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
& button {
|
||||
justify-self: flex-end;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
& ul {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
font-size: var(--font-size-l);
|
||||
gap: var(--padding-default);
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--padding-default);
|
||||
color: var(--color-middle);
|
||||
border-radius: var(--radius-default);
|
||||
padding: var(--padding-xs) var(--padding-s);
|
||||
transition: var(--transition-default);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: var(--color-main-light);
|
||||
color: var(--color-main-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,10 +49,18 @@
|
|||
overflow: hidden;
|
||||
background: var(--color-lightest);
|
||||
height: 100%;
|
||||
|
||||
h1:first-of-type,
|
||||
h2:first-of-type,
|
||||
h3:first-of-type,
|
||||
p:first-of-type,
|
||||
figure:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
padding: var(--padding-large) var(--padding-default) var(--padding-default);
|
||||
padding: var(--padding-xl) var(--padding-default) 0;
|
||||
color: var(--color-darkest);
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -67,6 +75,6 @@
|
|||
}
|
||||
|
||||
.Legal {
|
||||
padding: var(--padding-large) var(--padding-default);
|
||||
padding: var(--padding-l) var(--padding-default);
|
||||
color: var(--color-darkest);
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
& > * {
|
||||
flex-grow: 1;
|
||||
color: var(--color-lightest);
|
||||
font-size: 2rem;
|
||||
font-size: var(--font-size-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
|
||||
& .bg-edit {
|
||||
background: var(--color-main-dark);
|
||||
padding: 2rem;
|
||||
padding: var(--padding-xl);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& .bg-delete {
|
||||
background: var(--color-error);
|
||||
padding: 2rem;
|
||||
padding: var(--padding-xl);
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
position: relative;
|
||||
background: var(--color-lightest);
|
||||
z-index: 2;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
padding: var(--padding-default);
|
||||
|
||||
&.animated {
|
||||
|
|
@ -56,14 +56,14 @@
|
|||
color: var(--color-darkest);
|
||||
|
||||
& .icon {
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
& .name-price {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
gap: var(--padding-xs);
|
||||
|
||||
& > span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
& > span:nth-child(2)::before {
|
||||
content: '•';
|
||||
margin-right: .5rem;
|
||||
margin-right: var(--padding-xs);
|
||||
color: var(--color-middle);
|
||||
}
|
||||
}
|
||||
|
|
@ -84,19 +84,19 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
gap: var(--padding-default);
|
||||
justify-content: space-between;
|
||||
|
||||
& > .info {
|
||||
flex-grow: 0;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
gap: var(--padding-xxs);
|
||||
font-weight: bold;
|
||||
|
||||
& > .price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
gap: var(--padding-xs);
|
||||
|
||||
& > .icon {
|
||||
color: var(--color-main-dark);
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
& > .pro {
|
||||
font-size: .6rem;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-middle);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
box-shadow: var(--box-shadow-upper);
|
||||
|
||||
& > .Button {
|
||||
--padding: 1rem;
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-default);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<div class="TextField">
|
||||
<div class="wrapper">
|
||||
<input v-model="text" :type="type" :id="id" :placeholder="placeholder" @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
|
||||
<label :for="id">
|
||||
<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>
|
||||
<span>{{ label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<span v-if="message">{{ message }}</span>
|
||||
</div>
|
||||
|
|
@ -11,12 +13,13 @@
|
|||
|
||||
<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';
|
||||
type?: 'text' | 'number'
|
||||
message?: string
|
||||
icon?: string
|
||||
label: string
|
||||
placeholder: string
|
||||
id: string
|
||||
mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
|
||||
};
|
||||
|
||||
const { type = "text", mode = "text" } = defineProps<Props>();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="Header">
|
||||
<div>
|
||||
<div class="Header" :class="[type]">
|
||||
<header class="roboto-condensed">
|
||||
<NuxtLink class="header-text" to="/">
|
||||
<img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
|
||||
|
|
@ -9,25 +8,21 @@
|
|||
<span class="small">Vergleichen. Schnell. Unkompliziert.</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<label for="burger_nav_toggle" v-if="available">
|
||||
<Icon name="solar:hamburger-menu-broken" size="2em" />
|
||||
</label>
|
||||
<input type="checkbox" id="burger_nav_toggle" v-if="available" />
|
||||
<nav class="flex-col" v-if="available">
|
||||
<label for="burger_nav_toggle">
|
||||
<Icon name="solar:close-circle-broken" />
|
||||
</label>
|
||||
<ul class="flex-col">
|
||||
<li>Home</li>
|
||||
<li>Übersicht</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="burger-button" @click="open()">
|
||||
<Icon name="uil:bars" size="2em" />
|
||||
</button>
|
||||
</header>
|
||||
<div id="subheader" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const available = false
|
||||
type Props = {
|
||||
type ?: 'lp'
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const nav = useNavigation()
|
||||
const open = () => { nav.showNavigation() }
|
||||
</script>
|
||||
|
|
|
|||
41
app/components/Pp/Navigation.vue
Normal file
41
app/components/Pp/Navigation.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<section class="Navigation" :class="{ open }">
|
||||
<nav>
|
||||
<PpButton class="round text" @click="close()">
|
||||
<Icon name="uil:times" mode="svg" />
|
||||
</PpButton>
|
||||
<ul class="flex-col">
|
||||
<li v-for="page in pages">
|
||||
<NuxtLink :to="page.route" @click="close()" active-class="active">
|
||||
<Icon class="icon" :name="`uil:${page.icon}`" mode="svg" />
|
||||
<span>{{ page.label }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const nav = useNavigation()
|
||||
const close = () => nav.hideNavigation()
|
||||
const open = computed(() => nav.isNavigationVisible.value)
|
||||
|
||||
const pages = [
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'home',
|
||||
route: '/'
|
||||
},
|
||||
{
|
||||
label: 'Schnellrechner',
|
||||
icon: 'calculator',
|
||||
route: '/rechner'
|
||||
},
|
||||
// {
|
||||
// label: 'Über uns',
|
||||
// icon: 'users-alt',
|
||||
// route: '/about-us'
|
||||
// }
|
||||
]
|
||||
</script>
|
||||
|
|
@ -16,7 +16,8 @@
|
|||
v-model="currentCard.name"
|
||||
id="card_name"
|
||||
label="Name"
|
||||
icon="uil:user"
|
||||
icon="uil:pricetag-alt"
|
||||
:placeholder="randomName"
|
||||
:class="{ error: !validFields.name }"
|
||||
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
|
||||
@input="validFields.name = true"
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
v-model="currentCard.price"
|
||||
id="card_price"
|
||||
label="Preis"
|
||||
placeholder="2,49"
|
||||
icon="uil:euro"
|
||||
mode="decimal"
|
||||
:class="{ error: !validFields.price }"
|
||||
|
|
@ -37,6 +39,7 @@
|
|||
v-model="currentCard.roles"
|
||||
id="card_roles"
|
||||
label="Rollen"
|
||||
placeholder="8"
|
||||
icon="uil:toilet-paper"
|
||||
mode="decimal"
|
||||
:class="{ error: !validFields.roles }"
|
||||
|
|
@ -47,6 +50,7 @@
|
|||
v-model="currentCard.sheets"
|
||||
id="card_sheets"
|
||||
label="Blatt"
|
||||
placeholder="150"
|
||||
icon="uil:file-landscape"
|
||||
mode="decimal"
|
||||
:class="{ error: !validFields.sheets }"
|
||||
|
|
@ -57,6 +61,7 @@
|
|||
v-model="currentCard.layers"
|
||||
id="card_layers"
|
||||
label="Lagen"
|
||||
placeholder="3"
|
||||
icon="uil:layer-group"
|
||||
mode="decimal"
|
||||
:class="{ error: !validFields.layers }"
|
||||
|
|
@ -94,6 +99,25 @@ const emit = defineEmits(['update'])
|
|||
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
|
||||
const wrapper = useTemplateRef<HTMLElement>('wrapper')
|
||||
|
||||
const market = [
|
||||
'Lotl',
|
||||
'Olda',
|
||||
'Bäwä',
|
||||
'Brutto',
|
||||
]
|
||||
|
||||
const product = [
|
||||
'Weichelig',
|
||||
'Sau Rauh',
|
||||
'Bissl Sanft',
|
||||
'Ganz ok',
|
||||
'Flauschi'
|
||||
]
|
||||
|
||||
const generateRandomName = () => `${market[Math.floor(Math.random() * market.length)]} ${product[Math.floor(Math.random() * product.length)]}`
|
||||
|
||||
const randomName = useState('randomName', () => generateRandomName())
|
||||
|
||||
const checkPrice = () => {
|
||||
if (!currentCard) return false
|
||||
if (currentCard.price.length === 0) return false
|
||||
|
|
@ -138,6 +162,7 @@ onMounted(() => {
|
|||
validFields.roles = true
|
||||
validFields.sheets = true
|
||||
validFields.layers = true
|
||||
randomName.value = generateRandomName()
|
||||
})
|
||||
|
||||
onClickOutside(wrapper, () => dialog.value?.close())
|
||||
|
|
|
|||
24
app/composables/navigation.ts
Normal file
24
app/composables/navigation.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { ref } from 'vue'
|
||||
|
||||
const isNavigationVisible = ref(false)
|
||||
|
||||
export const useNavigation = () => {
|
||||
const toggleNavigation = () => {
|
||||
isNavigationVisible.value = !isNavigationVisible.value
|
||||
}
|
||||
|
||||
const showNavigation = () => {
|
||||
isNavigationVisible.value = true
|
||||
}
|
||||
|
||||
const hideNavigation = () => {
|
||||
isNavigationVisible.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
isNavigationVisible,
|
||||
toggleNavigation,
|
||||
showNavigation,
|
||||
hideNavigation
|
||||
}
|
||||
}
|
||||
11
app/layouts/default.vue
Executable file
11
app/layouts/default.vue
Executable file
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div class="page-wrapper">
|
||||
<PpHeader />
|
||||
<div class="page">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
<PpFooter />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
11
app/layouts/landingpage.vue
Normal file
11
app/layouts/landingpage.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div class="page-wrapper">
|
||||
<PpHeader type="lp" />
|
||||
<div class="page">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
<PpFooter />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
159
app/pages/index.vue
Executable file → Normal file
159
app/pages/index.vue
Executable file → Normal file
|
|
@ -1,154 +1,25 @@
|
|||
<template>
|
||||
<div class="nuxt-page-wrapper flex-col">
|
||||
<ClientOnly>
|
||||
<PpDeleteDialog
|
||||
ref="deleteModal"
|
||||
:current-card-index="currentCardIndex"
|
||||
@delete="removeCard(currentCardIndex)"
|
||||
/>
|
||||
<PpPriceCardDialog
|
||||
ref="modal"
|
||||
:current-card="currentCard"
|
||||
:current-card-index="currentCardIndex"
|
||||
@update="updateCard()"
|
||||
/>
|
||||
<section class="content flex-col">
|
||||
<div class="content-text">
|
||||
<h1>Mit ProPapier Preise vergleichen und sparen</h1>
|
||||
<section class="Home flex-col content full">
|
||||
<div class="home-hero">
|
||||
<div class="text">
|
||||
<h1>
|
||||
Du zahlst zuviel fürs Papier?
|
||||
</h1>
|
||||
<NuxtLink to="/rechner">
|
||||
<PpButton class="cta">Preise vergleichen</PpButton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<aside class="filter-bar">
|
||||
<button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
|
||||
{{ button.label }}
|
||||
</button>
|
||||
</aside>
|
||||
<div class="flex-col" role="list" v-if="cards.length">
|
||||
<PpPriceCard
|
||||
ref="priceCard"
|
||||
v-for="(card, index) in cards"
|
||||
:key="card.uuid"
|
||||
:deletable="cards.length > 1"
|
||||
:card="card"
|
||||
@update="openModal(false, index)"
|
||||
@remove="openDeleteModal()"
|
||||
/>
|
||||
</div>
|
||||
<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.
|
||||
<div class="home-text padding ">
|
||||
<p>
|
||||
Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klo-, Küchen- und Haushaltspapier und sparst so bares Geld.
|
||||
</p>
|
||||
</section>
|
||||
<PpToolbar>
|
||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||
<span>Hinzufügen</span>
|
||||
</PpButton>
|
||||
</PpToolbar>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Card } from '../../shared/Card'
|
||||
import type { Button } from '../../shared/ButtonGroup'
|
||||
import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
|
||||
|
||||
const cards = useLocalStorage<Card[]>('cards', [])
|
||||
const currentSort = useLocalStorage<number>('sort', 0)
|
||||
const currentCard = ref<Card>()
|
||||
const currentCardIndex = ref<number>(-1)
|
||||
const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
|
||||
const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
|
||||
const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
|
||||
|
||||
const createCard = (uuid : string) : Card => ({
|
||||
uuid,
|
||||
name: '',
|
||||
price: '',
|
||||
roles: '',
|
||||
sheets: '',
|
||||
layers: '',
|
||||
definePageMeta({
|
||||
layout: 'landingpage'
|
||||
})
|
||||
|
||||
|
||||
const addCard = (card : Card) => {
|
||||
cards.value.unshift({ ...card })
|
||||
sort()
|
||||
}
|
||||
|
||||
const removeCard = (index : number) => {
|
||||
cards.value.splice(index, 1)
|
||||
sort()
|
||||
}
|
||||
|
||||
const updateCard = () => {
|
||||
if (currentCardIndex.value === -1) {
|
||||
addCard(currentCard.value!)
|
||||
return
|
||||
}
|
||||
|
||||
const newCard = { ...currentCard.value! }
|
||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
||||
sort()
|
||||
}
|
||||
|
||||
const openModal = (createNew : boolean, index : number) => {
|
||||
if (createNew) {
|
||||
currentCardIndex.value = -1
|
||||
currentCard.value = createCard(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 filterButtons = ref<Button[]>([
|
||||
{
|
||||
label: 'Rollen',
|
||||
icon: 'uil:toilet-paper',
|
||||
active: currentSort.value === 0,
|
||||
},
|
||||
{
|
||||
label: 'Blatt',
|
||||
icon: 'uil:file-landscape',
|
||||
active: currentSort.value === 1,
|
||||
},
|
||||
{
|
||||
label: 'Lagen',
|
||||
icon: 'uil:layer-group',
|
||||
active: currentSort.value === 2,
|
||||
},
|
||||
])
|
||||
|
||||
const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
|
||||
cards.value.sort((a, b) => {
|
||||
const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null
|
||||
const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null
|
||||
if (!aCard || !bCard) return 0
|
||||
return aCard[key] - bCard[key]
|
||||
})
|
||||
}
|
||||
|
||||
const sort = async (index : number = currentSort.value) => {
|
||||
currentSort.value = index
|
||||
filterButtons.value.forEach(button => { button.active = false })
|
||||
filterButtons.value[index]!.active = true
|
||||
|
||||
await nextTick()
|
||||
|
||||
switch (index) {
|
||||
case 0: return sortBy('ppr')
|
||||
case 1: return sortBy('pps')
|
||||
case 2: return sortBy('ppl')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
app/pages/other.vue → app/pages/rechner.vue
Normal file → Executable file
41
app/pages/other.vue → app/pages/rechner.vue
Normal file → Executable file
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="nuxt-page-wrapper flex-col">
|
||||
<ClientOnly>
|
||||
<PpDeleteDialog
|
||||
ref="deleteModal"
|
||||
|
|
@ -12,20 +12,16 @@
|
|||
:current-card-index="currentCardIndex"
|
||||
@update="updateCard()"
|
||||
/>
|
||||
<div class="search-bar">
|
||||
<PpFormSearch
|
||||
v-model="search"
|
||||
label="Suche nach Klopapier!"
|
||||
id="search_field"
|
||||
/>
|
||||
</div>
|
||||
<section class="content flex-col">
|
||||
<div class="content-text">
|
||||
<h1>Mit ProPapier Preise vergleichen und sparen</h1>
|
||||
</div>
|
||||
<aside class="filter-bar">
|
||||
<button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
|
||||
{{ button.label }}
|
||||
</button>
|
||||
</aside>
|
||||
<div class="flex-col" role="list">
|
||||
<div class="flex-col" role="list" v-if="cards.length">
|
||||
<PpPriceCard
|
||||
ref="priceCard"
|
||||
v-for="(card, index) in cards"
|
||||
|
|
@ -36,17 +32,13 @@
|
|||
@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="sort(currentSort)">
|
||||
<Icon class="icon" name="uil:refresh" mode="svg" />
|
||||
<span>Neu sortieren</span>
|
||||
<span
|
||||
class="dot"
|
||||
:class="{ visible : isDirty}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PpButton>
|
||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||
<span>Hinzufügen</span>
|
||||
|
|
@ -63,15 +55,12 @@ import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
|
|||
|
||||
const cards = useLocalStorage<Card[]>('cards', [])
|
||||
const currentSort = useLocalStorage<number>('sort', 0)
|
||||
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 priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const createCard = (uuid : string) : Card => ({
|
||||
uuid,
|
||||
name: '',
|
||||
|
|
@ -84,12 +73,12 @@ const createCard = (uuid : string) : Card => ({
|
|||
|
||||
const addCard = (card : Card) => {
|
||||
cards.value.unshift({ ...card })
|
||||
isDirty.value = true
|
||||
sort()
|
||||
}
|
||||
|
||||
const removeCard = (index : number) => {
|
||||
cards.value.splice(index, 1)
|
||||
isDirty.value = true
|
||||
sort()
|
||||
}
|
||||
|
||||
const updateCard = () => {
|
||||
|
|
@ -100,7 +89,7 @@ const updateCard = () => {
|
|||
|
||||
const newCard = { ...currentCard.value! }
|
||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
||||
isDirty.value = true
|
||||
sort()
|
||||
}
|
||||
|
||||
const openModal = (createNew : boolean, index : number) => {
|
||||
|
|
@ -149,12 +138,12 @@ const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
|
|||
})
|
||||
}
|
||||
|
||||
const sort = (index : number) => {
|
||||
const sort = async (index : number = currentSort.value) => {
|
||||
currentSort.value = index
|
||||
filterButtons.value.forEach(button => { button.active = false })
|
||||
filterButtons.value[index]!.active = true
|
||||
|
||||
isDirty.value = false
|
||||
await nextTick()
|
||||
|
||||
switch (index) {
|
||||
case 0: return sortBy('ppr')
|
||||
|
|
@ -48,6 +48,7 @@ export default defineNuxtConfig({
|
|||
css : [
|
||||
'./app/assets/styles/general.css',
|
||||
'./app/assets/styles/header.css',
|
||||
'./app/assets/styles/navigation.css',
|
||||
'./app/assets/styles/footer.css',
|
||||
'./app/assets/styles/button.css',
|
||||
'./app/assets/styles/buttonGroup.css',
|
||||
|
|
@ -57,6 +58,7 @@ export default defineNuxtConfig({
|
|||
'./app/assets/styles/toolbar.css',
|
||||
'./app/assets/styles/page.css',
|
||||
'./app/assets/styles/dialog.css',
|
||||
'./app/assets/styles/landingpage.css',
|
||||
],
|
||||
|
||||
site: {
|
||||
|
|
|
|||
BIN
public/img/hero-image.webp
Normal file
BIN
public/img/hero-image.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
Add table
Add a link
Reference in a new issue