diff --git a/Resources/Private/Backend/Templates/Index.html b/Resources/Private/Backend/Templates/Index.html
index c7cd7893594c9517bbe1821fee97065952a71720..a340ca9369052c25a3f8f185964380b564f2d260 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 5fbb43db5ec7b894a99d3f758459769c79f83b55..c59388c769f643148ecdb0e5cfdfe2eb47c02200 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 94b71b7b17a03dd24588d69c7c694ac33478719a..d165ee98248b935a0d9613bbda67cb4571b7f68a 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 94b32599b8a8917a3f8fd976095a25af54e82ff9..4b6338eec1f6a0f26c166c85a43c3d73db5c4200 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 5bd1903190d0127bb6254a1988a62df7e3c5c81f..ee746b83939a3fcf3fadff5f4fcaf84ea76b7286 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 d562c7a87317b2164f68d4e1d1d24fcf48f4cc9d..cee045593e8a2c950afa4754df68a75e01ff2338 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>