[TASK] Adapt filter layout

Resources/Private/Partials/Bootstrap5/Filter.html

 <div class="default-content-element">
-	<f:form id="sgjobs-filter" action="index" controller="Joblist" method="get"
+	<f:form id="sgjobs-filter" class="text-bg-light p-6 rounded-1" action="index" controller="Joblist" method="get"
 			objectName="filters" object="{filters}">
 		<f:form.hidden value="{limit}" name="filter-limit"/>
 		<f:form.hidden id="filter-recordPageId" name="recordPageIds" value="{recordPageIds}"/>
-        <div class="row default-content-element">
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <label for="filter-countries" class="form-label">
-                    <f:translate key="frontend.filter.countries"/>
-                </label>
-                <f:form.select
-                    class="form-select"
-                    size="1"
-                    value="{selectedCountry}"
-                    property="filterCountry"
-                    optionValueField="value"
-                    options="{countries}"
-                    prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
-                    prependOptionValue="0"
-                    id="filter-countries"/>
-            </div>
-
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <label for="filter-locations" class="form-label">
-                    <f:translate key="frontend.filter.locations"/>
-                </label>
-                <f:form.select
-                    class="form-select"
-                    size="1"
-                    value="{selectedLocation}"
-                    property="filterLocation"
-                    optionValueField="value"
-                    options="{cities}"
-                    prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
-                    prependOptionValue="0"
-                    id="filter-locations"/>
-            </div>
-        </div>
-
-        <div class="row default-content-element">
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <label for="filter-departments" class="form-label">
-                    <f:translate key="frontend.filter.departments"/>
-                </label>
-                <f:form.select
-                    class="form-select"
-                    size="1"
-                    value="{selectedDepartment}"
-                    property="filterDepartment"
-                    optionLabelField="title"
-                    optionValueField="uid"
-                    options="{departments}"
-                    prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
-                    prependOptionValue="0"
-                    id="filter-departments"/>
-            </div>
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <label for="filter-experienceLevels" class="form-label">
-                    <f:translate key="frontend.filter.experienceLevels"/>
-                </label>
-                <f:form.select
-                    class="form-select"
-                    size="1"
-                    value="{selectedExperienceLevel}"
-                    property="filterExperienceLevel"
-                    optionLabelField="title"
-                    optionValueField="uid"
-                    options="{experienceLevels}"
-                    prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
-                    prependOptionValue="0"
-                    id="filter-experienceLevels"/>
-            </div>
-        </div>
-
-        <div class="row default-content-element">
-            <div class="col-md-6 col-sm-6 col-xs-12">
-                <div class="form-check">
-                    <f:form.checkbox
-                        class="form-check-input"
-                        property="filterRemote"
-                        id="filter-remote"
-                        value="remote"
-                        checked="{selectedRemote}"/>
-                    <label class="form-check-label" for="filter-remote">
-                        <f:translate key="frontend.filter.remote"/>
-                    </label>
-                </div>
-            </div>
-        </div>
-
-        <div class="row default-content-element">
-            <div class="col-md-12 col-sm-12 col-xs-12">
-                <f:form.submit class="btn btn-md btn-primary" value="{f:translate(key:'frontend.filter.submit')}"/>
-            </div>
-        </div>
+		<div class="mb-4">
+			<div class="row default-content-element">
+				<div class="col-md-3 col-sm-6 col-xs-12">
+					<label for="filter-countries" class="form-label">
+						<f:translate key="frontend.filter.countries"/>
+					</label>
+					<f:form.select
+						class="form-select"
+						size="1"
+						value="{selectedCountry}"
+						property="filterCountry"
+						optionValueField="value"
+						options="{countries}"
+						prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
+						prependOptionValue="0"
+						id="filter-countries"/>
+				</div>
+				<div class="col-md-3 col-sm-6 col-xs-12">
+					<label for="filter-locations" class="form-label">
+						<f:translate key="frontend.filter.locations"/>
+					</label>
+					<f:form.select
+						class="form-select"
+						size="1"
+						value="{selectedLocation}"
+						property="filterLocation"
+						optionValueField="value"
+						options="{cities}"
+						prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
+						prependOptionValue="0"
+						id="filter-locations"/>
+				</div>
+				<div class="col-md-3 col-sm-6 col-xs-12">
+					<label for="filter-departments" class="form-label">
+						<f:translate key="frontend.filter.departments"/>
+					</label>
+					<f:form.select
+						class="form-select"
+						size="1"
+						value="{selectedDepartment}"
+						property="filterDepartment"
+						optionLabelField="title"
+						optionValueField="uid"
+						options="{departments}"
+						prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
+						prependOptionValue="0"
+						id="filter-departments"/>
+				</div>
+				<div class="col-md-3 col-sm-6 col-xs-12">
+					<label for="filter-experienceLevels" class="form-label">
+						<f:translate key="frontend.filter.experienceLevels"/>
+					</label>
+					<f:form.select
+						class="form-select"
+						size="1"
+						value="{selectedExperienceLevel}"
+						property="filterExperienceLevel"
+						optionLabelField="title"
+						optionValueField="uid"
+						options="{experienceLevels}"
+						prependOptionLabel="{f:translate(key: 'frontend.filter.selections.all')}"
+						prependOptionValue="0"
+						id="filter-experienceLevels"/>
+				</div>
+			</div>
+		</div>
+		<div class="row default-content-element">
+			<div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-end gap-4">
+				<div class="form-check">
+					<f:form.checkbox
+						class="form-check-input"
+						property="filterRemote"
+						id="filter-remote"
+						value="remote"
+						checked="{selectedRemote}"/>
+					<label class="form-check-label" for="filter-remote">
+						<f:translate key="frontend.filter.remote"/>
+					</label>
+				</div>
+				<f:form.submit class="btn btn-md btn-primary" value="{f:translate(key:'frontend.filter.submit')}"/>
+			</div>
+		</div>
 	</f:form>
 </div>

Resources/Private/Templates/Bootstrap5/Joblist/Index.html

+{namespace sg=SGalinski\SgJobs\ViewHelpers}
+
+<f:layout name="Default" />
+<f:section name="main">
+	<f:render partial="JoblistListSchema" arguments="{_all}" />
+
+	<div id="sgjobs-joblist" class="vstack gap-8">
+		<f:render
+			partial="Filter"
+			arguments="{recordPageId: recordPageId, filters: filters, countries: countries, cities: cities, companies: companies, departments: departments, experienceLevels: experienceLevels,
+				functions: functions, selectedCountry: selectedCountry, selectedCompany: selectedCompany,
+				selectedLocation: selectedLocation, selectedDepartment: selectedDepartment,
+				selectedExperienceLevel: selectedExperienceLevel, selectedFunction: selectedFunction, selectedRemote: selectedRemote,
+				limit: limit }"
+		/>
+
+		<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><sg:pageBrowser numberOfPages="{numberOfPages}" /></f:format.raw>
+		</div>
+	</div>
+</f:section>