EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize forms migration to tailwindcss

Browse Source
This commit is contained in:
Björn Fromme
2020-09-29 15:32:11 +02:00
parent 79a1195526
commit b514d9b23d
4 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+6
View File
@@ -69,6 +69,12 @@
@import "employee"; @import "employee";
} }
@layer components {
.has-validation-error .form-input {
@apply text-red-500 border-red-500;
}
}
@layer utilities { @layer utilities {
.-translate-xy-1\/2 { .-translate-xy-1\/2 {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Field/Field.html
+8
View File
@@ -5,6 +5,14 @@
<span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-gray-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span> <span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-gray-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
</f:if> </f:if>
{elementContent -> f:format.raw()} {elementContent -> f:format.raw()}
<f:if condition="{validationResults.flattenedErrors}">
<div class="text-red-500 mt-2" role="alert">
<f:for each="{validationResults.errors}" as="error">
<f:format.htmlspecialchars>{formvh:translateElementError(element: element, error: error)}</f:format.htmlspecialchars>
<br />
</f:for>
</div>
</f:if>
</label> </label>
</f:form.validationResults> </f:form.validationResults>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/FullForm.html
+22 -22
View File
@@ -12,55 +12,55 @@
pageUid="{settings.defaultAjaxUid}" pageUid="{settings.defaultAjaxUid}"
additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}"> additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
<f:form.hidden property="pageUrl"/> <f:form.hidden property="pageUrl"/>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.name }">
<span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span> <span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="name"/> <f:form.textfield class="form-input mt-1 block w-full" property="name"/>
<div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div> <div class="text-red-500 mt-2" v-show="formErrors.name" v-html="formErrors.name"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.firstName }">
<span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span> <span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/> <f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
<div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div> <div class="text-red-500 mt-2" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.gender }">
<span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span> <span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/> <f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
<div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div> <div class="text-red-500 mt-2" v-show="formErrors.gender" v-html="formErrors.gender"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.company }">
<span :class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span> <span :class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="company"/> <f:form.textfield class="form-input mt-1 block w-full" property="company"/>
<div class="text-red-500" v-show="formErrors.company" v-html="formErrors.company"></div> <div class="text-red-500 mt-2" v-show="formErrors.company" v-html="formErrors.company"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.email }">
<span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span> <span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="email"/> <f:form.textfield class="form-input mt-1 block w-full" property="email"/>
<div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div> <div class="text-red-500 mt-2" v-show="formErrors.email" v-html="formErrors.email"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.phone }">
<span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span> <span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/> <f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
<div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div> <div class="text-red-500 mt-2" v-show="formErrors.phone" v-html="formErrors.phone"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.period }">
<span :class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span> <span :class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
<f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/> <f:form.textfield class="form-input mt-1 block w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
<div class="text-red-500" v-show="formErrors.period" v-html="formErrors.period"></div> <div class="text-red-500 mt-2" v-show="formErrors.period" v-html="formErrors.period"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.duration }">
<span :class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span> <span :class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
<f:form.textfield class="form-input mt-1 block w-full" placeholder="Tage inkl. An- & Abreisetag"/> <f:form.textfield class="form-input mt-1 block w-full" placeholder="Tage inkl. An- & Abreisetag"/>
<div class="text-red-500" v-show="formErrors.duration" v-html="formErrors.duration"></div> <div class="text-red-500 mt-2" v-show="formErrors.duration" v-html="formErrors.duration"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.pax }">
<span :class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span> <span :class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
<f:form.textfield class="form-input mt-1 block w-full" placeholder="ab 25 Personen"/> <f:form.textfield class="form-input mt-1 block w-full" placeholder="ab 25 Personen"/>
<div class="text-red-500" v-show="formErrors.pax" v-html="formErrors.pax"></div> <div class="text-red-500 mt-2" v-show="formErrors.pax" v-html="formErrors.pax"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.age }">
<span :class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span> <span :class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
<f:form.textfield class="form-input mt-1 block w-full"/> <f:form.textfield class="form-input mt-1 block w-full"/>
<div class="text-red-500" v-show="formErrors.age" v-html="formErrors.age"></div> <div class="text-red-500 mt-2" v-show="formErrors.age" v-html="formErrors.age"></div>
</label> </label>
<div class="mb-4"> <div class="mb-4">
<label class="inline-flex items-center"> <label class="inline-flex items-center">
@@ -68,13 +68,13 @@
<span class="ml-2">Kinder (ja/nein)</span> <span class="ml-2">Kinder (ja/nein)</span>
</label> </label>
</div> </div>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.inquiry }">
<span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span> <span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="form-textarea mt-1 block w-full" <f:form.textarea class="form-textarea mt-1 block w-full"
property="inquiry" property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm" placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/> cols="30" rows="5"/>
<div class="text-red-500" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div> <div class="text-red-500 mt-2" v-show="formErrors.inquiry" v-html="formErrors.inquiry"></div>
</label> </label>
<div class="mb-4"> <div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}" Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/SimpleForm.html
+6 -6
View File
@@ -12,32 +12,32 @@
pageUid="{settings.defaultAjaxUid}" pageUid="{settings.defaultAjaxUid}"
additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}"> additionalAttributes="{'v-show': '!success', '@submit.prevent': 'submitForm()'}">
<f:form.hidden property="pageUrl"/> <f:form.hidden property="pageUrl"/>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.gender }">
<span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span> <span :class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/> <f:form.select class="form-select mt-1 block w-full" property="gender" options="{m: 'M', w: 'W', d: 'D'}"/>
<div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div> <div class="text-red-500" v-show="formErrors.gender" v-html="formErrors.gender"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.name }">
<span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span> <span :class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="name"/> <f:form.textfield class="form-input mt-1 block w-full" property="name"/>
<div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div> <div class="text-red-500" v-show="formErrors.name" v-html="formErrors.name"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.firstName }">
<span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span> <span :class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="firstName"/> <f:form.textfield class="form-input mt-1 block w-full" property="firstName"/>
<div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div> <div class="text-red-500" v-show="formErrors.firstName" v-html="formErrors.firstName"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.email }">
<span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span> <span :class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="email"/> <f:form.textfield class="form-input mt-1 block w-full" property="email"/>
<div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div> <div class="text-red-500" v-show="formErrors.email" v-html="formErrors.email"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.phone }">
<span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span> <span :class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="form-input mt-1 block w-full" property="phone"/> <f:form.textfield class="form-input mt-1 block w-full" property="phone"/>
<div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div> <div class="text-red-500" v-show="formErrors.phone" v-html="formErrors.phone"></div>
</label> </label>
<label class="block mb-4"> <label class="block mb-4" :class="{ 'has-validation-error': formErrors.inquiry }">
<span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span> <span :class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="form-textarea mt-1 block w-full" <f:form.textarea class="form-textarea mt-1 block w-full"
property="inquiry" property="inquiry"