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

add: new design (wip)

Browse source 
New design as WIP, swipe controls
This commit is contained in:
Fiona Lena Urban 2025-05-10 11:07:06 +02:00
parent 259adf53f6
commit 7af148058e
15 changed files with 354 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
.Button {
--padding: .2rem;
--background: var(--color-main);
--color: var(--color-white);
--background: var(--color-gradient-main-dark);
--color: var(--color-lightest);
--background-hover: var(--color-main-dark);
position: relative;
@ -16,20 +16,27 @@
background: var(--background);
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-red);
--color: var(--color-white);
--background: var(--color-gradient-error);
--color: var(--color-lightest);
}
}
&.text {
--background: transparent;
--color: var(--color-black);
--color: var(--color-darkest);
padding: .5em 1.5em;
border-radius: var(--radius-default);
@ -38,11 +45,11 @@
}
&.white {
--color: var(--color-white);
--color: var(--color-lightest);
}
&.danger {
--color: var(--color-red);
--color: var(--color-error);
&:hover {
--background: rgba(255, 0, 0, 0.1);
@ -71,9 +78,9 @@
}
&.cta.white {
--background: var(--color-white);
--background: var(--color-lightest);
--color: var(--color-main);
--background-hover: var(--color-grey);
--background-hover: var(--color-light);
}
&.icon-button {

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

@ -1,9 +1,13 @@
.ButtonGroup {
display: flex;
background: var(--color-main);
border-radius: var(--radius-default);
overflow: hidden;
box-shadow: var(--box-shadow-z2);
& button {
--color: var(--color-white-transparent);
--background: var(--color-main);
--color: var(--color-light);
--background: var(--color-main-darkest);
all: unset;
display: flex;
align-items: center;
@ -17,8 +21,8 @@
transition: var(--transition-default);
&.active {
--color: var(--color-white);
--background: var(--color-main-dark);
--color: var(--color-darkest);
--background: var(--color-gradient-main);
}
&:first-child {

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

@ -1,9 +1,9 @@
.Footer {
background: var(--color-main-dark);
background: var(--color-main-darkest);
padding: 1rem;
& h4 {
color: var(--color-white);
color: var(--color-lightest);
text-align: center;
margin-bottom: 1rem;
}
@ -12,7 +12,7 @@
display: flex;
gap: 1rem;
justify-content: space-between;
color: var(--color-white-transparent);
color: var(--color-light);
}
& .socials {
@ -33,7 +33,7 @@
gap: 1rem;
& a {
color: var(--color-white);
color: var(--color-lightest);
text-decoration: none;
}
}

12
app/assets/styles/formInput.css
View file

@ -1,12 +1,12 @@
.Input {
&.error {
& .input-wrapper {
border-color: var(--color-red);
border-color: var(--color-error);
outline-width: 2px;
}
& span {
color: var(--color-red);
color: var(--color-error);
}
}
@ -17,11 +17,11 @@
& .input-wrapper {
position: relative;
flex: 25% 1 0;
border: 2px solid var(--color-blue);
border: 2px solid var(--color-main-dark);
border-radius: var(--radius-default);
overflow: hidden;
transition: var(--transition-default);
outline: 0 solid var(--color-white);
outline: 0 solid var(--color-lightest);
& label {
position: absolute;
@ -35,7 +35,7 @@
all: unset;
width: calc(100% - 1rem);
padding: 1.3rem .5rem .5rem .5rem;
background: var(--color-white);
background: var(--color-lightest);
&[type="number"] {
text-align: right;
@ -45,7 +45,7 @@
& input:focus,
& input:not(:placeholder-shown) {
& + label {
color: var(--color-main);
color: var(--color-main-dark);
}
}
}

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

@ -1,29 +1,50 @@
:root {
--padding-default: 1rem;
--padding-small: .5rem;
--radius-default: 5px;
--radius-default: 3px;
--transition-default: 150ms;
--color-white: white;
--color-white-transparent: rgba(255, 255, 255, 0.67);
--color-red: #cc0001;
--color-blue-light: #61a7fd;
--color-blue: #2e86de;
--color-blue-dark: #1b4b7f;
--color-grey: #c7c7c7;
--color-black: #333;
--color-success: #328104;
--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-orange: #DE9C2F;
--color-main: var(--color-blue);
--color-main-light: var(--color-blue-light);
--color-main-dark: var(--color-blue-dark);
--color-main-darkest: var(--color-blue-darkest);
--color-accent: var(--color-orange);
--color-accent: var(--color-green);
--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-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);
}
* {
@ -79,7 +100,6 @@ body {
.card {
overflow: hidden;
border-radius: var(--radius-default);
border: 1px solid var(--color-main);
box-shadow: var(--box-shadow-z2);
}
@ -108,7 +128,7 @@ body {
}
.text-white {
color: var(--color-white);
color: var(--color-lightest);
}
.bg-main {
@ -136,7 +156,7 @@ body {
}
.bg-white {
background: var(--color-white);
background: var(--color-lightest);
}
.padding {

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

@ -3,16 +3,18 @@
align-items: center;
justify-content: space-between;
padding: var(--padding-default);
background-color: var(--color-white);
background-color: var(--color-lightest);
box-shadow: var(--box-shadow-z2);
color: var(--color-darkest);
position: sticky;
top: 0;
z-index: 1;
& strong {
font-size: 2em;
& span {
color: var(--color-main);
color: var(--color-main-dark);
}
}
@ -38,7 +40,7 @@
top: 0;
height: 100dvh;
transition: 150ms ease-in-out;
background: var(--color-white);
background: var(--color-lightest);
font-size: 2em;
align-items: end;
z-index: 100;

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

@ -1,20 +1,59 @@
.PriceCard {
position: relative;
overflow: hidden;
width: 100%;
transition: 150ms;
opacity: 1;
color: var(--color-white);
color: var(--color-main-dark);
background: black;
.bottom {
position: absolute;
z-index: 1;
display: flex;
align-items: stretch;
width: 100%;
height: 100%;
& > * {
flex-grow: 1;
color: var(--color-lightest);
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 {
position: relative;
background: var(--color-lightest);
z-index: 2;
gap: 1rem;
padding: 1rem;
&.deleting {
max-height: 0;
opacity: 0;
}
border-radius: var(--radius-default);
& > header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-darkest);
& .icon {
font-size: 1rem;
@ -53,11 +92,6 @@
align-items: center;
gap: .25rem;
& > .icon {
font-size: 2rem;
padding: .2rem;
}
& > .price {
display: flex;
align-items: center;
@ -67,6 +101,8 @@
& > .pro {
font-size: .6rem;
font-weight: bold;
opacity: .7;
}
}
}
}

2
app/assets/styles/toolbar.css
View file

@ -1,7 +1,7 @@
.Toolbar {
display: flex;
justify-content: space-evenly;
background: var(--color-main);
background: var(--color-gradient-main-dark);
position: sticky;
bottom: 0;
box-shadow: var(--box-shadow-upper);

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

@ -1,5 +1,5 @@
<template>
<div class="ButtonGroup">
<div class="ButtonGroup z-2">
<button
v-for="(button, index) in buttons"
@click="click(index)"

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

@ -1,20 +1,29 @@
<template>
<article
ref="root"
class="PriceCard card bg-blue flex-col"
:class="{ deleting }"
<article class="PriceCard card">
<div class="bottom">
<div class="bg-edit">
<Icon class="icon" name="uil:pen" mode="svg" />
</div>
<div class="bg-delete">
<Icon class="icon" name="uil:trash-alt" mode="svg" />
</div>
</div>
<div
ref="top"
class="top flex-col"
:style="{ left, transition }"
>
<header>
<div class="name-price">
<span>{{ card.name || 'Kein Name' }}</span>
<span>{{ intl.format(+replaceComma(card.price))}}</span>
</div>
<div class="flex-row gap-default">
<div v-if="$device.isDesktop" class="flex-row gap-default">
<PpButton class="icon-button" @click="update()">
<Icon class="icon" name="uil:pen" mode="svg" />
</PpButton>
<PpButton class="icon-button" @click="deleteCard()">
<Icon class="icon" name="uil:times" mode="svg" />
<Icon class="icon" name="uil:trash-alt" mode="svg" />
</PpButton>
</div>
</header>
@ -42,6 +51,7 @@
<span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
</div>
</main>
</div>
</article>
</template>
@ -56,14 +66,37 @@ type Props = {
const { card } = defineProps<Props>()
const emit = defineEmits(['remove', 'update'])
const root = ref<HTMLElement>()
const deleting = ref<boolean>(false)
const top = useTemplateRef('top')
const left = shallowRef<string>('0')
const transition = shallowRef<string>('none')
const intl = Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
})
const { lengthX } = useSwipe(top, {
passive: false,
threshold: 5,
onSwipe() {
if (lengthX.value != 0) {
left.value = `${-clamp(lengthX.value, -100, 100)}px`
}
},
onSwipeEnd() {
if (lengthX.value < -50) update()
if (lengthX.value > 50) deleteCard()
transition.value = '150ms'
setTimeout(() => {
left.value = '0'
setTimeout(() => {
transition.value = 'none'
}, 50)
}, 100)
},
})
const update = () => emit('update')
const deleteCard = () => emit('remove')

4
app/pages/index.vue
View file

@ -29,7 +29,7 @@
</div>
</section>
<PpToolbar>
<PpButton class="mini-button text-white" @click="sort(currentSort)">
<PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
<Icon class="icon" name="uil:refresh" mode="svg" />
<span>Neu sortieren</span>
<span
@ -38,7 +38,7 @@
aria-hidden="true"
/>
</PpButton>
<PpButton class="mini-button text-white" @click="openModal(true, -1)">
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
<Icon class="icon" name="uil:plus" mode="svg" />
<span>Hinzufügen</span>
</PpButton>

4
app/utils/number.ts
View file

@ -1 +1,3 @@
export const replaceComma = (value: string | number) => `${value}`.replace(',', '.');
export const replaceComma = (value: string | number) => `${value}`.replace(',', '.')
export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)

4
nuxt.config.ts
View file

@ -22,9 +22,7 @@ export default defineNuxtConfig({
'/privacy': { prerender: true },
},
modules: [
'@nuxt/icon',
],
modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device'],
css : [
'./app/assets/styles/general.css',

108
package-lock.json generated
View file

@ -10,6 +10,8 @@
"@iconify-json/simple-icons": "^1.2.32",
"@iconify-json/uil": "^1.2.3",
"@nuxt/icon": "^1.10.3",
"@nuxtjs/device": "^3.2.4",
"@vueuse/nuxt": "^13.1.0",
"nuxt": "^3.16.2",
"vue": "latest",
"vue-router": "latest"
@ -2664,6 +2666,15 @@
"pathe": "^2.0.3"
}
},
"node_modules/@nuxtjs/device": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/@nuxtjs/device/-/device-3.2.4.tgz",
"integrity": "sha512-jIvN6QeodBNrUrL/1FCHk4bebsiLsGHlJd8c/m2ksLrGY4IZ0npA8IYhDTdYV92epGxoe8+3iZOzCjav+6TshQ==",
"license": "MIT",
"dependencies": {
"defu": "^6.1.4"
}
},
"node_modules/@oxc-parser/binding-darwin-arm64": {
"version": "0.56.5",
"resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.56.5.tgz",
@ -3793,6 +3804,12 @@
"integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
"license": "MIT"
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.21",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
"license": "MIT"
},
"node_modules/@types/yauzl": {
"version": "2.10.3",
"resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@ -4265,6 +4282,97 @@
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
"license": "MIT"
},
"node_modules/@vueuse/core": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.1.0.tgz",
"integrity": "sha512-PAauvdRXZvTWXtGLg8cPUFjiZEddTqmogdwYpnn60t08AA5a8Q4hZokBnpTOnVNqySlFlTcRYIC8OqreV4hv3Q==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.21",
"@vueuse/metadata": "13.1.0",
"@vueuse/shared": "13.1.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/@vueuse/metadata": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.1.0.tgz",
"integrity": "sha512-+TDd7/a78jale5YbHX9KHW3cEDav1lz1JptwDvep2zSG8XjCsVE+9mHIzjTOaPbHUAk5XiE4jXLz51/tS+aKQw==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/nuxt": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-13.1.0.tgz",
"integrity": "sha512-4xdxwKanLY4+z+/ZgSZcJvwuHlgZMU3km7z4lhlbLl6WZTKS3BiztnRzcrdt4zjU512oTlH5nsPNhUhV0KXiOA==",
"license": "MIT",
"dependencies": {
"@nuxt/kit": "^3.16.2",
"@vueuse/core": "13.1.0",
"@vueuse/metadata": "13.1.0",
"local-pkg": "^1.1.1"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"nuxt": "^3.0.0 || ^4.0.0-0",
"vue": "^3.5.0"
}
},
"node_modules/@vueuse/nuxt/node_modules/confbox": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
"integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
"license": "MIT"
},
"node_modules/@vueuse/nuxt/node_modules/local-pkg": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
"integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
"license": "MIT",
"dependencies": {
"mlly": "^1.7.4",
"pkg-types": "^2.0.1",
"quansync": "^0.2.8"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/nuxt/node_modules/pkg-types": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
"integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==",
"license": "MIT",
"dependencies": {
"confbox": "^0.2.1",
"exsolve": "^1.0.1",
"pathe": "^2.0.3"
}
},
"node_modules/@vueuse/shared": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.1.0.tgz",
"integrity": "sha512-IVS/qRRjhPTZ6C2/AM3jieqXACGwFZwWTdw5sNTSKk2m/ZpkuuN+ri+WCVUP8TqaKwJYt/KuMwmXspMAw8E6ew==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/@whatwg-node/disposablestack": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/@whatwg-node/disposablestack/-/disposablestack-0.0.6.tgz",

2
package.json
View file

@ -15,6 +15,8 @@
"@iconify-json/simple-icons": "^1.2.32",
"@iconify-json/uil": "^1.2.3",
"@nuxt/icon": "^1.10.3",
"@nuxtjs/device": "^3.2.4",
"@vueuse/nuxt": "^13.1.0",
"nuxt": "^3.16.2",
"vue": "latest",
"vue-router": "latest"