From 631f541fc2d9d6ba484cfe4a2967f3a19dbe39cd Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 9 Dec 2021 19:06:29 +0100
Subject: [PATCH] Moved css into scss file / mobile UI

---
 com.woltlab.wcf/templates/search.tpl        | 31 +------------
 wcfsetup/install/files/style/ui/search.scss | 48 +++++++++++++++++++++
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/com.woltlab.wcf/templates/search.tpl b/com.woltlab.wcf/templates/search.tpl
index e6c099e43e..61b248f688 100644
--- a/com.woltlab.wcf/templates/search.tpl
+++ b/com.woltlab.wcf/templates/search.tpl
@@ -1,34 +1,5 @@
 {include file='header' __disableAds=true}
 
-<style>
-	.searchBar {
-		display: grid;
-		grid-template-columns: 60% 20% auto;
-		column-gap: 20px;
-	}
-
-	.searchShowMoreFiltersButton {
-		cursor: pointer;
-		user-select: none;
-	}
-
-	.searchFiltersContainer {
-		margin-top: 20px;
-	}
-
-	.searchFilters {
-	    margin-top: 20px;
-	}
-
-	.searchFilters {
-		columns: 2;
-	}
-
-	.searchFilters > :is(div, dl) {
-    	break-inside: avoid-column;
-	}
-</style>
-
 <form id="extendedSearchForm" method="post" action="{link controller='Search'}{if $extended}extended=1{/if}{/link}">
 	<div class="section">
 		<div class="searchBar">
@@ -101,6 +72,8 @@
 					</div>
 				{/if}
 			{/foreach}
+
+			<button class="searchButton button buttonPrimary">{lang}wcf.global.search{/lang}</button>
 		</details>
 	</div>
 </form>
diff --git a/wcfsetup/install/files/style/ui/search.scss b/wcfsetup/install/files/style/ui/search.scss
index 146c11e0fd..85e66c594d 100644
--- a/wcfsetup/install/files/style/ui/search.scss
+++ b/wcfsetup/install/files/style/ui/search.scss
@@ -4,3 +4,51 @@
 	color: rgba(0, 0, 0, 1);
 	padding: 0 2px;
 }
+
+/* search form */
+.searchBar {
+	display: grid;
+	
+	@include screen-md-up {
+		column-gap: 20px;
+		grid-template-columns: 60% 20% auto;
+	}
+
+	@include screen-sm-down {
+		row-gap: 5px;
+	}
+}
+
+.searchShowMoreFiltersButton {
+	cursor: pointer;
+	user-select: none;
+}
+
+.searchFiltersContainer {
+	margin-top: 20px;
+}
+
+.searchFilters {
+    margin-top: 20px;
+}
+
+@include screen-md-up {
+	.searchFilters {
+		columns: 2;
+	}
+
+	.searchFilters > :is(div, dl) {
+		break-inside: avoid-column;
+	}
+
+	.searchFiltersContainer .searchButton {
+		display: none;
+	}
+}
+
+@include screen-sm-down {
+	.searchFiltersContainer .searchButton {
+		margin-top: 20px;
+		width: 100%;
+	}
+}
-- 
2.20.1