From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 9 Dec 2021 18:06:29 +0000 (+0100)
Subject: Moved css into scss file / mobile UI
X-Git-Tag: 5.5.0_Alpha_1~262^2~17
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=631f541fc2d9d6ba484cfe4a2967f3a19dbe39cd;p=GitHub%2FWoltLab%2FWCF.git

Moved css into scss file / mobile UI
---

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%;
+	}
+}