From ade334e2f91131e60cab64f02e37c8823c66eb9c Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sat, 7 Jan 2023 17:42:46 +0100
Subject: [PATCH] Add responsive

---
 assets/eventregistration.js         | 19 ++++--------
 components/eventform/default.htm    | 46 +++++++++++++----------------
 components/eventform/navigation.htm |  6 ++--
 3 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/assets/eventregistration.js b/assets/eventregistration.js
index af07bcf..8fa3a4a 100644
--- a/assets/eventregistration.js
+++ b/assets/eventregistration.js
@@ -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, {
diff --git a/components/eventform/default.htm b/components/eventform/default.htm
index 7a70b44..b5a53ac 100644
--- a/components/eventform/default.htm
+++ b/components/eventform/default.htm
@@ -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>
diff --git a/components/eventform/navigation.htm b/components/eventform/navigation.htm
index 32037a2..c3baa06 100644
--- a/components/eventform/navigation.htm
+++ b/components/eventform/navigation.htm
@@ -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 %}