Add responsive
This commit is contained in:
philipp lang
parent
8171500682
commit
ade334e2f9
|
|
@ -23,7 +23,7 @@ export default function (toasted) {
|
|||
gender: 'Weiblich',
|
||||
email: 'philipp@aaa.de',
|
||||
birthday: '1991-06-20',
|
||||
agegroup: '',
|
||||
agegroup: 'Leiter',
|
||||
group: '',
|
||||
agegroup_leader: '',
|
||||
emergency_phone: '',
|
||||
|
|
@ -35,7 +35,7 @@ export default function (toasted) {
|
|||
meta: {
|
||||
submitRequest: null,
|
||||
errorFields: [],
|
||||
active: 0,
|
||||
active: 2,
|
||||
slides: [
|
||||
'Persönliches',
|
||||
'Veranstaltung',
|
||||
|
|
@ -88,25 +88,18 @@ export default function (toasted) {
|
|||
if (e !== null) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if (index < 0 || index > this.meta.slides.length-1) {
|
||||
return;
|
||||
}
|
||||
this.scrollForm(this.$refs.form);
|
||||
this.meta.active = 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) {
|
||||
var margin = window.getComputedStyle(el).marginTop.replace('px', '');
|
||||
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() {
|
||||
var _self = this;
|
||||
var promise = fetch(window.location.href, {
|
||||
|
|
|
|||
|
|
@ -4,33 +4,33 @@
|
|||
|
||||
{% 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">
|
||||
<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
|
||||
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>
|
||||
{% endmacro %}
|
||||
{% 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">
|
||||
<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>
|
||||
<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>
|
||||
{% endmacro %}
|
||||
{% 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}}">
|
||||
<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>
|
||||
<template x-for="model in meta.{{options}}">
|
||||
<option :selected="data.{{name}} === model.id" :value="model.id" x-text="model.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
<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>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
class="text-gray-600 text-sm"
|
||||
>{{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}}">
|
||||
<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}`" />
|
||||
|
|
@ -71,13 +71,13 @@
|
|||
class="text-gray-600 flex text-sm"
|
||||
>{{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}}">
|
||||
<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}`" />
|
||||
<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="pl-8" x-text="option.name"></span>
|
||||
<span class="pl-8 text-sm sm:text-base" x-text="option.name"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -99,10 +99,9 @@
|
|||
<form x-ref="form" @submit.prevent="submit" class="my-6" novalidate>
|
||||
<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 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" %}
|
||||
|
||||
<!--
|
||||
<div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
|
||||
<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 }">
|
||||
|
|
@ -111,14 +110,12 @@
|
|||
</a>
|
||||
</template>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="flex items-center px-6 overflow-auto overflow-hidden rounded-t-lg sm:hidden bg-primary-700">
|
||||
<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 w-3 h-3"><use xlink:href="{{'icons/sprite.svg'|media}}#chevron"></use></svg>
|
||||
<div class="flex items-center justify-between px-4 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}">
|
||||
<svg class="{{arrowFont}} fill-current rotate-90 w-3 h-3"><use xlink:href="{{'resources/img/sprite.svg'|theme}}#chevron"></use></svg>
|
||||
</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">
|
||||
<div class="flex-none w-full">
|
||||
<div @click="slideTo($event, index)" href="#" class="{{arrowClass}}">
|
||||
|
|
@ -128,22 +125,21 @@
|
|||
</div>
|
||||
</template>
|
||||
</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}">
|
||||
<svg class="{{arrowFont}} fill-current w-3 h-3 transform rotate-180"><use xlink:href="{{'icons/sprite.svg'|media}}#chevron"></use></svg>
|
||||
<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-90"><use xlink:href="{{'resources/img/sprite.svg'|theme}}#chevron"></use></svg>
|
||||
</a>
|
||||
</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">
|
||||
{% 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" %}
|
||||
|
||||
<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}}"></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, 'gender', 'Geschlecht', true, 'genders') }}
|
||||
{{ form.field(_context, 'firstname', 'Vorname', true) }}
|
||||
|
|
@ -180,8 +176,8 @@
|
|||
|
||||
<div class="{{gliderElClass}}">
|
||||
<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 items-center justify-center w-8 h-8 mr-3 bg-red-500 rounded-full flex-none">
|
||||
<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 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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<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
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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
|
||||
</div>
|
||||
{% else %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue