pille
/
wi-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add responsive

This commit is contained in:
philipp lang 2023-01-07 17:42:46 +01:00
parent 8171500682
commit ade334e2f9
3 changed files with 30 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/eventregistration.js
View File

@ -23,7 +23,7 @@ export default function (toasted) {
gender: 'Weiblich', gender: 'Weiblich',
email: 'philipp@aaa.de', email: 'philipp@aaa.de',
birthday: '1991-06-20', birthday: '1991-06-20',
agegroup: '', agegroup: 'Leiter',
group: '', group: '',
agegroup_leader: '', agegroup_leader: '',
emergency_phone: '', emergency_phone: '',
@ -35,7 +35,7 @@ export default function (toasted) {
meta: { meta: {
submitRequest: null, submitRequest: null,
errorFields: [], errorFields: [],
active: 0, active: 2,
slides: [ slides: [
'Persönliches', 'Persönliches',
'Veranstaltung', 'Veranstaltung',
@ -88,25 +88,18 @@ export default function (toasted) {
if (e !== null) { if (e !== null) {
e.preventDefault(); e.preventDefault();
} }
if (index < 0 || index > this.meta.slides.length-1) {
return;
}
this.scrollForm(this.$refs.form); this.scrollForm(this.$refs.form);
this.meta.active = index; this.meta.active = index;
this.$refs.slider.scrollLeft = this.$refs.slider.scrollWidth / this.meta.slides.length * index; this.$refs.slider.scrollLeft = this.$refs.slider.scrollWidth / this.meta.slides.length * index;
// this.$refs.mobileSlider.scrollLeft = this.$refs.mobileSlider.scrollWidth / this.meta.slides.length * index; this.$refs.mobileSlider.scrollLeft = this.$refs.mobileSlider.scrollWidth / this.meta.slides.length * index;
}, },
scrollForm(el) { scrollForm(el) {
var margin = window.getComputedStyle(el).marginTop.replace('px', ''); var margin = window.getComputedStyle(el).marginTop.replace('px', '');
scrollToElement(el, 300, (margin?margin:0) * -1); scrollToElement(el, 300, (margin?margin:0) * -1);
}, },
onNextButtonClick(e) {
if (this.meta.active != this.meta.slides.length - 1) {
this.slideTo(e, this.meta.active + 1);
}
},
onPrevButtonClick(e) {
if (this.meta.active != 0) {
this.slideTo(e, this.meta.active - 1);
}
},
submit() { submit() {
var _self = this; var _self = this;
var promise = fetch(window.location.href, { var promise = fetch(window.location.href, {

46
components/eventform/default.htm
View File

@ -4,33 +4,33 @@
{% macro field(context, name, label, required, type) %} {% macro field(context, name, label, required, type) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"> <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
<input name="{{name}}" type="{{type|default('text')}}" id="{{name}}" placeholder=" " class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-2 px-3 w-full" x-model="data.{{name}}" /> <input name="{{name}}" type="{{type|default('text')}}" id="{{name}}" placeholder=" " class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full" x-model="data.{{name}}" />
<span <span
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm" class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-xs xs:peer-focus:text-sm"
>{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
> >
</label> </label>
{% endmacro %} {% endmacro %}
{% macro textarea(context, name, label, required, type) %} {% macro textarea(context, name, label, required, type) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"> <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
<textarea name="{{name}}" rows="6" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-2 px-3 w-full" x-model="data.{{name}}"> <textarea name="{{name}}" rows="6" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full" x-model="data.{{name}}">
</textarea> </textarea>
<span <span
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm" class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs sm:text-sm"
>{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
> >
</label> </label>
{% endmacro %} {% endmacro %}
{% macro select(context, name, label, required, options) %} {% macro select(context, name, label, required, options) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" for="{{name}}"> <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" for="{{name}}">
<select name="{{name}}" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-2 px-3 w-full" x-model="data.{{name}}"> <select name="{{name}}" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full" x-model="data.{{name}}">
<option :selected="data.{{name}} === ''" value="">-- kein --</option> <option :selected="data.{{name}} === ''" value="">-- kein --</option>
<template x-for="model in meta.{{options}}"> <template x-for="model in meta.{{options}}">
<option :selected="data.{{name}} === model.id" :value="model.id" x-text="model.name"></option> <option :selected="data.{{name}} === model.id" :value="model.id" x-text="model.name"></option>
</template> </template>
</select> </select>
<span <span
class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm" class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs sm:text-sm"
>{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
> >
</label> </label>
@ -41,7 +41,7 @@
class="text-gray-600 text-sm" class="text-gray-600 text-sm"
>{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
> >
<div class="flex flex-col space-y-1"> <div class="grid grid-cols-2 sm:grid-cols-1 gap-2">
<template x-for="option, index in meta.{{options}}"> <template x-for="option, index in meta.{{options}}">
<label :for="`{{name}}-${index}`" class="block relative flex items-center"> <label :for="`{{name}}-${index}`" class="block relative flex items-center">
<input type="radio" name="{{name}}" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" /> <input type="radio" name="{{name}}" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" />
@ -71,13 +71,13 @@
class="text-gray-600 flex text-sm" class="text-gray-600 flex text-sm"
>{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
> >
<div class="flex flex-col space-y-1"> <div class="grid grid-cols-2 sm:grid-cols-1 gap-2">
<template x-for="option, index in meta.{{options}}"> <template x-for="option, index in meta.{{options}}">
<label :for="`{{name}}-${index}`" class="block relative flex items-center"> <label :for="`{{name}}-${index}`" class="block relative flex items-center">
<input type="checkbox" name="{{name}}[]" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" /> <input type="checkbox" name="{{name}}[]" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span>
<span class="pl-8" x-text="option.name"></span> <span class="pl-8 text-sm sm:text-base" x-text="option.name"></span>
</label> </label>
</template> </template>
</div> </div>
@ -99,10 +99,9 @@
<form x-ref="form" @submit.prevent="submit" class="my-6" novalidate> <form x-ref="form" @submit.prevent="submit" class="my-6" novalidate>
<div x-ref="eventFormContainer" class="{{formContainerClass}}"> <div x-ref="eventFormContainer" class="{{formContainerClass}}">
{% set arrowClass = "flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300" %} {% set arrowClass = "flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300" %}
{% set positionClass = "flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-teal-800 mr-2 text-teal-200 font-goudy transition duration-300" %} {% set positionClass = "flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-teal-800 text-teal-200 font-goudy transition duration-300" %}
{% set arrowFont = "text-sm text-teal-100" %} {% set arrowFont = "text-sm text-teal-100" %}
<!--
<div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg"> <div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
<template x-for="(slide, index) in meta.slides"> <template x-for="(slide, index) in meta.slides">
<a @click="slideTo($event, index)" href="#" class="{{arrowClass}}" :class="{ 'bg-emerald-500': index <= meta.active, 'bg-primary-700': index > meta.active }"> <a @click="slideTo($event, index)" href="#" class="{{arrowClass}}" :class="{ 'bg-emerald-500': index <= meta.active, 'bg-primary-700': index > meta.active }">
@ -111,14 +110,12 @@
</a> </a>
</template> </template>
</div> </div>
-->
<!-- <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-primary-700 ">
<div class="flex items-center px-6 overflow-auto overflow-hidden rounded-t-lg sm:hidden bg-primary-700"> <a @click.prevent="slideTo($event, meta.active-1)" href="#" class="{{positionClass}} w-7 h-7 flex-none" :class="{'opacity-40': meta.active == 0}">
<a @click="slideTo($event, meta.active-1)" href="#" class="{{positionClass}} w-6 h-6 flex-none" :class="{'opacity-40': meta.active == 0}"> <svg class="{{arrowFont}} fill-current rotate-90 w-3 h-3"><use xlink:href="{{'resources/img/sprite.svg'|theme}}#chevron"></use></svg>
<svg class="{{arrowFont}} fill-current w-3 h-3"><use xlink:href="{{'icons/sprite.svg'|media}}#chevron"></use></svg>
</a> </a>
<div x-ref="mobileSlider" class="flex flex-no-wrap w-full overflow-auto snap transition-all" x-on:resize.debounce.window="$refs.mobileSlider.scrollLeft = $refs.mobileSlider.scrollWidth / meta.slides.length * meta.active"> <div x-ref="mobileSlider" class="relative flex flex-no-wrap overflow-hidden snap-x snap-mandatory snap-always scroll-smooth">
<template x-for="(slide, index) in meta.slides"> <template x-for="(slide, index) in meta.slides">
<div class="flex-none w-full"> <div class="flex-none w-full">
<div @click="slideTo($event, index)" href="#" class="{{arrowClass}}"> <div @click="slideTo($event, index)" href="#" class="{{arrowClass}}">
@ -128,22 +125,21 @@
</div> </div>
</template> </template>
</div> </div>
<a @click="slideTo($event, meta.active+1)" href="#" class="{{positionClass}} w-6 h-6 flex-none" :class="{'opacity-40': meta.active == meta.slides.length - 1}"> <a @click.prevent="slideTo($event, meta.active+1)" href="#" class="{{positionClass}} w-7 h-7 flex-none" :class="{'opacity-40': meta.active == meta.slides.length - 1}">
<svg class="{{arrowFont}} fill-current w-3 h-3 transform rotate-180"><use xlink:href="{{'icons/sprite.svg'|media}}#chevron"></use></svg> <svg class="{{arrowFont}} fill-current w-3 h-3 transform -rotate-90"><use xlink:href="{{'resources/img/sprite.svg'|theme}}#chevron"></use></svg>
</a> </a>
</div> </div>
-->
<div class="py-8"> <div class="py-4 xs:py-8">
<div x-ref="slider" class="relative flex flex-no-wrap overflow-hidden snap-x snap-mandatory snap-always scroll-smooth"> <div x-ref="slider" class="relative flex flex-no-wrap overflow-hidden snap-x snap-mandatory snap-always scroll-smooth">
{% set labelClass = "fancy-textinput size-lg dark" %} {% set labelClass = "fancy-textinput size-lg dark" %}
{% set gliderElClass = "w-full flex-none snap-center slider-element px-6" %} {% set gliderElClass = "w-full flex-none snap-center slider-element px-3 xs:px-6" %}
{% set descClass = "text-sm sm_text-base text-gray-800 leading-tight mb-5" %} {% set descClass = "text-sm sm_text-base text-gray-800 leading-tight mb-5" %}
<div class="{{gliderElClass}}"> <div class="{{gliderElClass}}">
<div class="{{descClass}}">Gebe hier deine Funktion an, die du auf der Veranstaltung wahrnehmen willst. Danach benötigen wir ein paar persönliche Daten von dir. </div> <div class="{{descClass}}">Gebe hier deine Funktion an, die du auf der Veranstaltung wahrnehmen willst. Danach benötigen wir ein paar persönliche Daten von dir. </div>
<div class="{{descClass}}"></div> <div class="{{descClass}}"></div>
<div class="grid sm:grid-cols-2 gap-4 mt-6"> <div class="grid grid-cols-2 gap-4 mt-6">
{{ form.select(_context, 'activity', 'Funktion', true, 'activities') }} {{ form.select(_context, 'activity', 'Funktion', true, 'activities') }}
{{ form.select(_context, 'gender', 'Geschlecht', true, 'genders') }} {{ form.select(_context, 'gender', 'Geschlecht', true, 'genders') }}
{{ form.field(_context, 'firstname', 'Vorname', true) }} {{ form.field(_context, 'firstname', 'Vorname', true) }}
@ -180,8 +176,8 @@
<div class="{{gliderElClass}}"> <div class="{{gliderElClass}}">
<div class="{{descClass}}">Fast geschafft! Wenn du sonst noch etwas loswerden willst, kannst du das hier tun.</div> <div class="{{descClass}}">Fast geschafft! Wenn du sonst noch etwas loswerden willst, kannst du das hier tun.</div>
<div class="flex flex-row items-center p-4 bg-red-100 border-2 border-red-400 rounded form-group shadow-sm" x-show="data.agegroup === 'Leiter'"> <div class="flex flex-row items-center p-4 bg-red-100 border-2 border-red-400 rounded form-group shadow-sm relative" x-show="data.agegroup === 'Leiter'">
<div class="flex items-center justify-center w-8 h-8 mr-3 bg-red-500 rounded-full flex-none"> <div class="flex items-center justify-center w-8 h-8 mr-3 bg-red-500 rounded-full flex-none absolute sm:static top-0 -mt-4 sm:-mt-0">
<div class="flex items-center justify-center w-5 h-5 bg-red-100 rounded-full"> <div class="flex items-center justify-center w-5 h-5 bg-red-100 rounded-full">
<svg class="w-5 h-5 text-red-700 border-gray-400 fill-current border-5 fill-current"><use xlink:href="/themes/october-theme/resources/img/sprite.svg#exclamation"></use></svg> <svg class="w-5 h-5 text-red-700 border-gray-400 fill-current border-5 fill-current"><use xlink:href="/themes/october-theme/resources/img/sprite.svg#exclamation"></use></svg>
</div> </div>

6
components/eventform/navigation.htm
View File

@ -1,11 +1,11 @@
<div class="flex flex-col md:flex-row mt-10 justify-start md:justify-evenly"> <div class="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row mt-10 justify-start md:justify-evenly">
{% if not first %} {% if not first %}
<div class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none rounded-lg" @click.prevent="onPrevButtonClick"> <div class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none rounded-lg" @click.prevent="slideTo($event, meta.active - 1)">
Zurück Zurück
</div> </div>
{% endif %} {% endif %}
{% if not last %} {% if not last %}
<div class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none rounded-lg" @click.prevent="onNextButtonClick"> <div class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none rounded-lg" @click.prevent="slideTo($event, meta.active + 1)">
Weiter Weiter
</div> </div>
{% else %} {% else %}