[TASK] Css for filter

Resources/Private/Partials/Filter.html

-<f:form id="sgnews-filter" method="get" objectName="newsFilter">
-	<label for="filter-categories">
-		<f:translate key="frontend.filter.category" />
-	</label>
-	<f:form.select class="sgnews-select form-control" multiple="0" size="1" value="{selectedCategory.uid}"
-		property="category" optionLabelField="title" optionValueField="uid" options="{categories}"
-		id="filter-categories" prependOptionLabel="" prependOptionValue=""/>
-	<label for="filter-tags">
-		<f:translate key="frontend.filter.tag" />
-	</label>
-	<f:form.select class="sgnews-select form-control" multiple="0" size="1" value="{selectedTag.uid}"
-		property="tag" optionValueField="uid" options="{tags}" id="filter-tags"
-		optionLabelField="title" prependOptionLabel="" prependOptionValue=""/>
+<f:form id="tx-sgnews-filter" method="get" objectName="newsFilter">
+	<div class="tx-sgnews-filter-bar">
+		<div class="tx-sgnews-filter-bar-form-control">
+			<label for="filter-categories">
+				<f:translate key="frontend.filter.category" />
+			</label>
+			<f:form.select class="tx-sgnews-select form-control" multiple="0" size="1" value="{selectedCategory.uid}"
+				property="category" optionLabelField="title" optionValueField="uid" options="{categories}"
+				id="filter-categories" prependOptionLabel="" prependOptionValue="" />
+		</div>
+		<div class="tx-sgnews-filter-bar-form-control">
+			<label for="filter-tags">
+				<f:translate key="frontend.filter.tag" />
+			</label>
+			<f:form.select class="tx-sgnews-select form-control" multiple="0" size="1" value="{selectedTag.uid}"
+				property="tag" optionValueField="uid" options="{tags}" id="filter-tags"
+				optionLabelField="title" prependOptionLabel="" prependOptionValue="" />
+		</div>
+	</div>
 </f:form>

Resources/Private/Templates/Overview/OverviewWithoutCategories.html

@@ -7,7 +7,6 @@
 		<f:render partial="Filter" arguments="{controller: 'OverviewController', action: 'overview', categories: categories,
 				tags: tags, selectedTag: selectedTag, selectedCategory: selectedCategory}" />
 	</div>
-	<br />
 	<div class="tx-sgnews-overview">
 		<f:if condition="{newsMetaData}">
 			<f:then>

Resources/Public/Sass/styles.scss

@@ -358,3 +358,20 @@
 		}
 	}
 }
+
+.tx-sgnews-filter-bar {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	margin: 25px 0px 25px 0px;
+
+	.form-control {
+		display: inline-block;
+		width: 200px;
+		margin-right: 20px;
+	}
+
+	label {
+		margin-right: 15px;
+	}
+}

Resources/Public/Scripts/CategoryFilter.js

@@ -35,7 +35,7 @@ export default class CategoryFilter {
 	 * Kicks things off
 	 */
 	constructor() {
-		$('#sgnews-newslist').on('change', '.sgnews-select', this._filterNewslist);
+		$('#tx-sgnews-newslist').on('change', '.tx-sgnews-select', this._filterNewslist);
 	}
 
 	/**
@@ -44,6 +44,6 @@ export default class CategoryFilter {
 	 * @private
 	 */
 	_filterNewslist() {
-		$('#sgnews-filter').submit();
+		$('#tx-sgnews-filter').submit();
 	}
 }