Moved css into scss file / mobile UI

diff --git a/com.woltlab.wcf/templates/search.tpl b/com.woltlab.wcf/templates/search.tpl
index e6c099e43e21799179202e921aae6d154eca439b..61b248f6885e4e36d0206c5cbde2032e988edfbf 100644 (file)
--- 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 146c11e0fd048e9f6e497ac71e558ce4bbe6aa8d..85e66c594d7162e1b7f5553f2f102d5065cc8a4f 100644 (file)
--- 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%;
+       }
+}