From bf4a4b341fa84bdc85789ea5c3bc6c3131a135d4 Mon Sep 17 00:00:00 2001
From: Philipp Nowinski <philipp@sgalinski.de>
Date: Thu, 14 Dec 2017 18:24:54 +0100
Subject: [PATCH] [FEATURE] rewrite jobs templates

---
 .../Private/Backend/Templates/Index.html      |   3 -
 Resources/Private/Language/de.locallang.xlf   |   4 +
 Resources/Private/Language/locallang.xlf      |   3 +
 Resources/Private/Partials/Filter.html        |  62 ++++---
 Resources/Private/Partials/Job.html           | 163 ++++++++----------
 .../Private/Templates/Joblist/Index.html      |   9 +-
 6 files changed, 123 insertions(+), 121 deletions(-)

diff --git a/Resources/Private/Backend/Templates/Index.html b/Resources/Private/Backend/Templates/Index.html
index c7cd7893..a340ca93 100644
--- a/Resources/Private/Backend/Templates/Index.html
+++ b/Resources/Private/Backend/Templates/Index.html
@@ -23,9 +23,6 @@
 									<f:translate key="backend.noJobsMessage" />
 								</p>
 							</f:if>
-							<p>
-
-							</p>
 							<f:render partial="CreateJob" arguments="{pageUid:pageUid}" />
 						</f:then>
 						<f:else>
diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
index 5fbb43db..c59388c7 100644
--- a/Resources/Private/Language/de.locallang.xlf
+++ b/Resources/Private/Language/de.locallang.xlf
@@ -246,6 +246,10 @@
 			<source>Area</source>
 			<target>Bereich</target>
 		</trans-unit>
+		<trans-unit id="frontend.description" approved="yes">
+			<source>Description</source>
+			<target>Beschreibung</target>
+		</trans-unit>
 		<trans-unit id="frontend.detail.back" approved="yes">
 			<source>Back</source>
 			<target>Zurück</target>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
index 94b71b7b..d165ee98 100644
--- a/Resources/Private/Language/locallang.xlf
+++ b/Resources/Private/Language/locallang.xlf
@@ -186,6 +186,9 @@
 		<trans-unit id="frontend.area">
 			<source>Area</source>
 		</trans-unit>
+		<trans-unit id="frontend.description">
+			<source>Description</source>
+		</trans-unit>
 		<trans-unit id="frontend.detail.back">
 			<source>Back</source>
 		</trans-unit>
diff --git a/Resources/Private/Partials/Filter.html b/Resources/Private/Partials/Filter.html
index 94b32599..4b6338ee 100644
--- a/Resources/Private/Partials/Filter.html
+++ b/Resources/Private/Partials/Filter.html
@@ -1,20 +1,42 @@
-<f:form id="sgjobs-filter" action="index" controller="Joblist" method="get" objectName="filters" object="{filters}">
-	<label for="filter-countries">
-		<f:translate key="frontend.filter.countries" />
-	</label>
-	<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedCountry}" property="filterCountry" optionValueField="value" options="{countries}" id="filter-countries" />
-	<label for="filter-countries">
-		<f:translate key="frontend.filter.locations" />
-	</label>
-	<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedLocation}" property="filterLocation" optionValueField="value" options="{cities}" id="filter-locations" />
-	<label for="filter-companies">
-		<f:translate key="frontend.filter.companies" />
-	</label>
-	<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedCompany}" property="filterCompany" optionValueField="value" options="{companies}" id="filter-companies" />
-	<label for="filter-areas">
-		<f:translate key="frontend.filter.areas" />
-	</label>
-	<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedArea}" property="filterArea" optionValueField="value" options="{areas}" id="filter-areas" />
-	<f:form.hidden value="{limit}" id="filter-limit" />
-	<f:form.hidden id="filter-recordPageId" name="recordPageId" value="{recordPageId}" />
-</f:form>
+<div class="default-content-element">
+	<div class="pia-card">
+		<f:form id="sgjobs-filter" action="index" controller="Joblist" method="get"
+				objectName="filters" object="{filters}">
+			<f:form.hidden value="{limit}" id="filter-limit"/>
+			<f:form.hidden id="filter-recordPageId" name="recordPageId" value="{recordPageId}"/>
+			<div class="pia-filter-bar">
+				<div class="pia-filter-bar-form-control">
+					<label for="filter-countries">
+						<f:translate key="frontend.filter.countries"/>
+					</label>
+					<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedCountry}"
+								   property="filterCountry" optionValueField="value" options="{countries}"
+								   id="filter-countries"/>
+				</div>
+				<div class="pia-filter-bar-form-control">
+					<label for="filter-countries">
+						<f:translate key="frontend.filter.locations"/>
+					</label>
+					<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedLocation}"
+								   property="filterLocation" optionValueField="value" options="{cities}"
+								   id="filter-locations"/>
+				</div>
+				<div class="pia-filter-bar-form-control">
+					<label for="filter-companies">
+						<f:translate key="frontend.filter.companies"/>
+					</label>
+					<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedCompany}"
+								   property="filterCompany" optionValueField="value" options="{companies}"
+								   id="filter-companies"/>
+				</div>
+				<div class="pia-filter-bar-form-control">
+					<label for="filter-areas">
+						<f:translate key="frontend.filter.areas"/>
+					</label>
+					<f:form.select class="sgjobs-select form-control" multiple="0" size="1" value="{selectedArea}"
+								   property="filterArea" optionValueField="value" options="{areas}" id="filter-areas"/>
+				</div>
+			</div>
+		</f:form>
+	</div>
+</div>
diff --git a/Resources/Private/Partials/Job.html b/Resources/Private/Partials/Job.html
index 5bd19031..ee746b83 100644
--- a/Resources/Private/Partials/Job.html
+++ b/Resources/Private/Partials/Job.html
@@ -1,101 +1,76 @@
-<div>
-	<h3>{job.title}</h3>
-	<h4>
-		<f:if condition="{job.alternativeStartDate}">
-			<f:then>
-				{job.alternativeStartDate}
-			</f:then>
-			<f:else>
-				<f:format.date date="{job.startDate}" format="d.m.Y" />
-			</f:else>
-		</f:if>
-		- {job.company.0.city}
-	</h4>
-</div>
+<div class="col-md-6 col-sm-6 col-cs-12">
+	<div class="default-content-element">
+		<article class="pia-card">
+			<div class="pia-card-header">
+				<h2>{job.title}</h2>
+				<h3>
+					<f:for each="{job.company}" as="company">{company.city}</f:for> –
+					<f:if condition="{job.alternativeStartDate}">
+						<f:then>
+							{job.alternativeStartDate}
+						</f:then>
+						<f:else>
+							<f:format.date date="{job.startDate}" format="d.m.Y" />
+						</f:else>
+					</f:if>
+				</h3>
+			</div>
+			<div class="pia-card-body">
+				<h3><f:translate key="frontend.entry_date" /></h3>
+				<p>
+					<f:if condition="{job.alternativeStartDate}">
+						<f:then>
+							{job.alternativeStartDate}
+						</f:then>
+						<f:else>
+							<f:format.date date="{job.startDate}" format="d.m.Y" />
+						</f:else>
+					</f:if>
+				</p>
 
-<div>
-	<table>
-		<tr>
-			<td>
-				<f:translate key="frontend.location" />
-			</td>
-			<td>
-				{job.company.0.country} - {job.company.0.city}
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<f:translate key="frontend.area" />
-			</td>
-			<td>
-				{job.area}
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<f:translate key="frontend.organisation" />
-			</td>
-			<td>
-				{job.company.0.name}
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<f:translate key="frontend.entry_date" />
-			</td>
-			<td>
-				<f:if condition="{job.alternativeStartDate}">
-					<f:then>
-						{job.alternativeStartDate}
-					</f:then>
-					<f:else>
-						<f:format.date date="{job.startDate}" format="d.m.Y" />
-					</f:else>
-				</f:if>
-			</td>
-		</tr>
-	</table>
-</div>
+				<h3><f:translate key="frontend.location" /></h3>
+				<p>
+					{job.company.0.country} - {job.company.0.city}
+				</p>
 
-<div>
-	<f:translate key="frontend.task" />
-	<f:format.raw>
-		{job.task}
-	</f:format.raw>
-</div>
+				<h3><f:translate key="frontend.area" /></h3>
+				<p>{job.area}</p>
 
-<div>
-	<f:translate key="frontend.qualification" />
-	<f:format.raw>
-		{job.qualification}
-	</f:format.raw>
-</div>
+				<h3><f:translate key="frontend.organisation" /></h3>
+				<p>{job.company.0.name}</p>
 
-<div>
-	<f:link.action pageUid="{settings.applyPage}" controller="Joblist" action="applyForm"
-		pluginName="JobApplication" arguments="{uid: job.uid}">
-		<f:translate key="frontend.applyNow" />
-	</f:link.action>
-</div>
+				<h3><f:translate key="frontend.task" /></h3>
+				<f:format.html parseFuncTSPath="lib.parseFunc_RTE">{job.task}</f:format.html>
 
-<div>
-	<h3><f:translate key="frontend.email" /></h3>
-	<p>
-		{job.contact.0.email}
-	</p>
-</div>
+				<h3><f:translate key="frontend.qualification" /></h3>
+				<f:format.html parseFuncTSPath="lib.parseFunc_RTE">{job.qualification}</f:format.html>
+
+				<h3><f:translate key="frontend.description" /></h3>
+				<f:format.html parseFuncTSPath="lib.parseFunc_RTE">{job.description}</f:format.html>
+
+				<h3><f:translate key="frontend.email" /></h3>
+				<p>
+					<f:for each="{job.contact}" as="contact">{contact.email}</f:for>
+				</p>
 
-<div>
-	<h3><f:translate key="frontend.apply_by_mail" /></h3>
-	{job.company.0.name}
-	<br />
-	{job.contact.0.firstName} {job.contact.0.lastName}
-	<br />
-	{job.company.0.street}
-	<br />
-	{job.company.0.city}
-	<br />
-	{job.contact.0.email}
-	<br />
-	{job.contact.0.phone}
+				<h3><f:translate key="frontend.apply_by_mail" /></h3>
+				<p>
+					<f:for each="{job.company}" as="company">{company.name}</f:for><br>
+					{job.contact.0.firstName} {job.contact.0.lastName}<br>
+					<f:for each="{job.company}" as="company">{company.street}</f:for><br>
+					<f:for each="{job.company}" as="company">{company.city}</f:for><br>
+					<f:for each="{job.contact}" as="contact">
+						{contact.email}<br>
+						{contact.phone}
+					</f:for>
+				</p>
+			</div>
+			<div class="pia-card-footer">
+				<f:link.action class="cta-link" pageUid="{settings.applyPage}" controller="Joblist" action="applyForm"
+							   pluginName="JobApplication" arguments="{uid: job.uid}">
+					<f:translate key="frontend.applyNow" />
+				</f:link.action>
+			</div>
+		</article>
+	</div>
 </div>
diff --git a/Resources/Private/Templates/Joblist/Index.html b/Resources/Private/Templates/Joblist/Index.html
index d562c7a8..cee04559 100644
--- a/Resources/Private/Templates/Joblist/Index.html
+++ b/Resources/Private/Templates/Joblist/Index.html
@@ -9,10 +9,11 @@
 				 selectedLocation: selectedLocation, selectedArea: selectedArea, selectedFunction: selectedFunction, limit: limit}"
 		/>
 
-		<f:for each="{jobs}" as="job">
-			<f:render partial="Job" arguments="{job: job}" />
-			<hr>
-		</f:for>
+		<div class="row default-content-element equal-height-columns stretch-first-child">
+			<f:for each="{jobs}" as="job">
+				<f:render partial="Job" arguments="{job: job}" />
+			</f:for>
+		</div>
 
 		<div id="sgjobs-pagination">
 			<f:format.raw>
-- 
GitLab