silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Add Success message

This commit is contained in:
philipp lang 2024-03-17 02:17:49 +01:00
parent 228fd01e26
commit b2926dd7ba
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/EventForm.ce.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<form v-if="loaded" novalidate @submit.prevent="submit">
<div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
<div v-if="finished === false" class="bg-white @container rounded-lg shadow-lg">
<div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
<template v-for="(section, index) in v.sections">
<a
@ -130,6 +130,31 @@
</carousel>
</div>
</div>
<div v-if="finished === true" class="mx-auto">
<div
class="bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[5rem_1fr] sm:grid-rows-[12rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10"
>
<div class="bg-primary w-32 h-32 md:w-40 md:h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
<svg class="w-20 h-20 md:w-24 md:h-24 text-emerald-300 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
<div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
</div>
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
<img class="w-64 h-32 object-cover" src="" />
</div>
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
<img class="w-64 h-32 object-cover" src="" />
</div>
</div>
<div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0 pt-6 sm:pt-0">
<div class="font-bold text-xl">Vielen Dank für deine Anmeldung.</div>
</div>
</div>
</div>
</form>
</div>
</template>
@ -145,6 +170,7 @@ import useToastify from './composables/useToastify.js';
import useFields from './composables/useFields.js';
const {success, errorFromResponse} = useToastify();
const finished = ref(true);
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
@ -230,7 +256,7 @@ function reload() {
reload();
watch(
() => props.value,
(value) => reload(),
(value) => reload()
);
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);