From bdc7357b2215207c79bc304def6304072928706d Mon Sep 17 00:00:00 2001
From: Eniko Tot <eniko.tot@codebrewery.hu>
Date: Thu, 11 Jan 2024 17:11:07 +0100
Subject: [PATCH] [WIP] Refactoring Applyform, fix some spacing and error
messages
---
.../Bootstrap5/Joblist/ApplyForm.html | 118 +++++++++---------
1 file changed, 58 insertions(+), 60 deletions(-)
diff --git a/Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html b/Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html
index 8cc7dbc3..9b74c8c5 100644
--- a/Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html
+++ b/Resources/Private/Templates/Bootstrap5/Joblist/ApplyForm.html
@@ -249,7 +249,7 @@
</f:if>
<div class="row">
<f:if condition="!{job}">
- <div class="col">
+ <div class="col-md">
<f:render section="formLabel" arguments="{label-for: 'company', label-text: 'company'}" />
<f:form.select property="company" multiple="0" size="1" id="apply-company"
class="form-select" options="{companies}" optionLabelField="city" optionValueField="uid"
@@ -258,7 +258,7 @@
<f:render section="formValidation" arguments="{form-field: 'company'}" />
</div>
</f:if>
- <div class="col">
+ <div class="col-md">
<f:render section="formLabel" arguments="{label-for: 'gender', label-text: 'gender'}" />
<f:form.select property="gender" id="apply-gender" class="form-select"
options="{male: '{f:translate(key: \'frontend.apply.gender.male\')}', female: '{f:translate(key: \'frontend.apply.gender.female\')}', other: '{f:translate(key: \'frontend.apply.gender.other\')}'}" />
@@ -267,27 +267,27 @@
</div>
<div class="row">
<f:render section="formTextField"
- arguments="{wrapper-class: 'col', field-id: 'firstName', field-text: 'first_name', required: 'required'}" />
+ arguments="{wrapper-class: 'col-md', field-id: 'firstName', field-text: 'first_name', required: 'required'}" />
<f:render section="formTextField"
- arguments="{wrapper-class: 'col', field-id: 'lastName', field-text: 'last_name', required: 'required'}" />
+ arguments="{wrapper-class: 'col-md', field-id: 'lastName', field-text: 'last_name', required: 'required'}" />
</div>
<div class="row">
<f:render section="formTextField"
- arguments="{wrapper-class: 'col-6', field-id: 'street', field-text: 'street', required: 'required'}" />
+ arguments="{wrapper-class: 'col-md-6', field-id: 'street', field-text: 'street', required: 'required'}" />
<f:render section="formTextField"
- arguments="{wrapper-class: 'col-4', field-id: 'city', field-text: 'city', required: 'required'}" />
+ arguments="{wrapper-class: 'col-md-4', field-id: 'city', field-text: 'city', required: 'required'}" />
<f:render section="formTextField"
- arguments="{wrapper-class: 'col-2', field-id: 'zip', field-text: 'zip', required: 'required'}" />
+ arguments="{wrapper-class: 'col-md-2', field-id: 'zip', field-text: 'zip', required: 'required'}" />
</div>
<div class="row">
- <div class="col">
+ <div class="col-md">
<f:render section="formLabel" arguments="{label-for: 'country', label-text: 'country'}" />
<f:form.countrySelect value="DE" property="country" id="apply-country" class="form-select"
required="required" />
<f:render section="formValidation" arguments="{form-field: 'county'}" />
</div>
- <div class="col">
+ <div class="col-md">
<f:render section="formLabel"
arguments="{label-for: 'nationality', label-text: 'nationality'}" />
<f:form.countrySelect value="DE" property="nationality" id="apply-nationality"
@@ -297,8 +297,8 @@
</div>
<div class="row">
<f:render section="formTextField"
- arguments="{wrapper-class: 'col', field-id: 'education', field-text: 'education', required: 'required'}" />
- <div class="col">
+ arguments="{wrapper-class: 'col-md', field-id: 'education', field-text: 'education', required: 'required'}" />
+ <div class="col-md">
<f:render section="formLabel" arguments="{label-for: 'birthDate', label-text: 'birthDate'}" />
<f:form.textfield type="date" property="birthDate" id="apply-birthDate" class="form-control"
placeholder="{f:translate(key:'frontend.apply.birthDate')}" required="required" />
@@ -307,12 +307,12 @@
</div>
<div class="row">
<f:render section="formTextField"
- arguments="{wrapper-class: 'col', field-id: 'phone', field-text: 'phone', required: 'required'}" />
+ arguments="{wrapper-class: 'col-md', field-id: 'phone', field-text: 'phone', required: 'required'}" />
<f:render section="formTextField"
- arguments="{wrapper-class: 'col', field-id: 'mobile', field-text: 'mobile'}" />
+ arguments="{wrapper-class: 'col-md', field-id: 'mobile', field-text: 'mobile'}" />
</div>
<div class="row">
- <div class="col-6">
+ <div class="col-md-6">
<f:render section="formLabel" arguments="{label-for: 'email', label-text: 'email'}" />
<f:form.textfield type="email" property="email" id="apply-email" class="form-control"
placeholder="{f:translate(key:'frontend.apply.email')}" required="required" />
@@ -320,49 +320,47 @@
</div>
</div>
<div class="row">
- <div class="col">
- <div class="form-group jobs-upload-group">
- <label for="apply-cover-letter" class="form-label filled">
- <f:translate key="frontend.apply.cover_letter" />
- (
- <f:translate key="frontend.apply.allowed_file_extensions" />
- {allowedFileExtensions})
- </label>
- <div class="coverLetter-upload jobs-upload" data-max-file-amount="1"
- data-valid-file-extensions="{settings.fileUpload.fileTypes}"
- data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
- data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
- data-cancel-upload="{f:translate(key: 'frontend.CancelUpload', extensionName: 'sg_jobs')}"
- data-remove-file="{f:translate(key: 'frontend.RemoveFile', extensionName: 'sg_jobs')}"
- data-file-type-error="{f:translate(key: 'frontend.FileType', extensionName: 'sg_jobs')}"
- data-upload-ajax="{sgajax:uri.ajax(extensionName: 'SgJobs', controller: 'Ajax\\Upload', action: 'uploadCoverletter', format: 'json', parameters: '{pageId: storagePid}')}">
- </div>
- <f:if condition="{coverLetter.name}">
- <p class="help-block">
- Aktuell: {coverLetter.name}
- <input type="hidden"
- name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][name]"
- value="{coverLetter.name}" />
- <input type="hidden"
- name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][type]"
- value="{coverLetter.type}" />
- <input type="hidden"
- name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][tmp_name]"
- value="{coverLetter.tmp_name}" />
- <input type="hidden"
- name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][error]"
- value="0" />
- <input type="hidden"
- name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][size]"
- value="{coverLetter.size}" />
- </p>
- </f:if>
- <f:render section="formValidation" arguments="{form-field: 'coverLetter'}" />
+ <div class="col-md form-group jobs-upload-group">
+ <label for="apply-cover-letter" class="form-label filled">
+ <f:translate key="frontend.apply.cover_letter" />
+ (
+ <f:translate key="frontend.apply.allowed_file_extensions" />
+ {allowedFileExtensions})
+ </label>
+ <div class="coverLetter-upload jobs-upload" data-max-file-amount="1"
+ data-valid-file-extensions="{settings.fileUpload.fileTypes}"
+ data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
+ data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
+ data-cancel-upload="{f:translate(key: 'frontend.CancelUpload', extensionName: 'sg_jobs')}"
+ data-remove-file="{f:translate(key: 'frontend.RemoveFile', extensionName: 'sg_jobs')}"
+ data-file-type-error="{f:translate(key: 'frontend.FileType', extensionName: 'sg_jobs')}"
+ data-upload-ajax="{sgajax:uri.ajax(extensionName: 'SgJobs', controller: 'Ajax\\Upload', action: 'uploadCoverletter', format: 'json', parameters: '{pageId: storagePid}')}">
</div>
+ <f:if condition="{coverLetter.name}">
+ <p class="help-block">
+ Aktuell: {coverLetter.name}
+ <input type="hidden"
+ name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][name]"
+ value="{coverLetter.name}" />
+ <input type="hidden"
+ name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][type]"
+ value="{coverLetter.type}" />
+ <input type="hidden"
+ name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][tmp_name]"
+ value="{coverLetter.tmp_name}" />
+ <input type="hidden"
+ name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][error]"
+ value="0" />
+ <input type="hidden"
+ name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][size]"
+ value="{coverLetter.size}" />
+ </p>
+ </f:if>
+ <f:render section="formValidation" arguments="{form-field: 'coverLetter'}" />
</div>
</div>
- <div class="col-xs-12">
- <div class="form-group jobs-upload-group">
+ <div class="row">
+ <div class="col-md form-group jobs-upload-group">
<label for="apply-cv" class="form-label filled">
<f:translate key="frontend.apply.cv" />
(
@@ -404,8 +402,8 @@
</div>
</div>
- <div class="col-xs-12">
- <div class="form-group jobs-upload-group">
+ <div class="row">
+ <div class="col-md form-group jobs-upload-group">
<label for="apply-certificate" class="form-label filled">
<f:translate key="frontend.apply.certificate" />
(
@@ -452,13 +450,13 @@
</div>
<div class="row mb-4">
- <div class="col">
+ <div class="col-md">
<f:render section="formLabel" arguments="{label-for: 'message', label-text: 'message'}" />
<f:form.textarea class="form-control" rows="10" property="message" id="apply-message"
placeholder="{f:translate(key:'frontend.apply.message')}" />
</div>
</div>
- <div class="form-check">
+ <div class="form-check mb-4">
<f:form.checkbox class="form-check-input" id="privacy-policy" property="privacyPolicy" value="1"
additionalAttributes="{required: 'required'}" />
<label class="form-check-label" for="privacy-policy">
@@ -577,9 +575,9 @@
<f:section name="formValidation">
<f:form.validationResults for="applyData.{form-field}">
- <ul class="text-danger pt-2">
+ <ul class="text-danger mb-0">
<f:for each="{validationResults.errors}" as="error">
- <li>{error.message}</li>
+ <li class="pt-2">{error.message}</li>
</f:for>
</ul>
</f:form.validationResults>
--
GitLab