Merge pull request #4310 from zyhfish/task/fix-searchbox-responsive-issue

Fix #4309: make searchbox responsive.

Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor

@@ -11,13 +11,18 @@
         <nav class="navbar">
             <Logo />
             <Menu Orientation="Vertical" />
-            <Search CssClass="px-3" />
+            <Search CssClass="px-3 d-none d-md-block" />
         </nav>
     </div>
 
     <div class="main g-0">
         <div class="top-row px-4">
-            <div class="ms-auto"><UserProfile /> <Login /> <ControlPanel LanguageDropdownAlignment="right" /></div>
+            <div class="ms-auto">
+                <UserProfile />
+                <Login />
+                <Search CssClass="me-3 text-center bg-primary d-inline-block d-md-none" Position="Top" />
+                <ControlPanel LanguageDropdownAlignment="right" />
+            </div>
         </div>
         <div class="container">
             <div class="row px-4">

Oqtane.Client/Themes/Controls/Theme/Search.razor

@@ -9,7 +9,7 @@
 @if (_searchResultsPage != null)
 {
     <span class="app-search @CssClass">
-        <form method="post" class="app-form-inline" @formname="SearchForm" @onsubmit="@PerformSearch" data-enhance>
+        <form method="post" class="app-form-inline" @formname="@($"{Position}SearchForm")" @onsubmit="@PerformSearch" data-enhance>
             <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
             <input type="text" name="keywords" maxlength="50"
                    class="form-control d-inline-block pe-5 shadow-none"
@@ -32,6 +32,9 @@
     [Parameter]
     public string CssClass { get; set; }
 
+    [Parameter]
+    public string Position { get; set; } = "Main";
+
     [Parameter]
     public string SearchResultPagePath { get; set; } = "search";
 

Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor

@@ -9,7 +9,7 @@
             <div class="controls-group">
                 <UserProfile ShowRegister="@_register" /> 
                 <Login ShowLogin="@_login" /> 
-                <Search CssClass="me-3" /> 
+                <Search CssClass="me-3 text-center bg-primary" />
                 <ControlPanel LanguageDropdownAlignment="right" />
             </div>
         </div>

Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css

@@ -121,6 +121,49 @@
     .main .top-row {
         display: none;
     }
+
+    .app-search {
+        border-radius: 6px;
+    }
+    .app-search input{
+        display: none !important;
+    }
+
+    .app-search input + button{
+        position: initial;
+        color: #fff;
+        padding-top: 7px;
+        padding-bottom: 7px;
+    }
+
+    .app-search:active, .app-search:hover {
+        display: block;
+        position: fixed;
+        top: 0;
+        min-height: 60px;
+        width: 100%;
+        left: 0;
+        z-index: 999;
+        border-radius: 0;
+    }
+
+    .app-search:active .app-form-inline, .app-search:hover .app-form-inline{
+        margin: 10px auto;
+        position: relative;
+        display: block;
+        max-width: 80%;
+    }
+
+    .app-search:active .app-form-inline input, .app-search:hover .app-form-inline input{
+        width: 100%;
+        display: block !important;
+    }
+    .app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button{
+        position: absolute;
+        color: rgb(42, 159, 214);
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
 }
 
 @media (min-width: 768px) {

Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css

@@ -130,4 +130,46 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
         position: relative;
         top: 60px;
     }
+    .app-search {
+        border-radius: 6px;
+    }
+    .app-search input{
+        display: none !important;
+    }
+
+    .app-search input + button{
+        position: initial;
+        color: #fff;
+        padding-top: 7px;
+        padding-bottom: 7px;
+    }
+
+    .app-search:active, .app-search:hover {
+        display: block;
+        position: fixed;
+        top: 0;
+        min-height: 60px;
+        width: 100%;
+        left: 0;
+        z-index: 999;
+        border-radius: 0;
+    }
+
+    .app-search:active .app-form-inline, .app-search:hover .app-form-inline{
+        margin: 10px auto;
+        position: relative;
+        display: block;
+        max-width: 80%;
+    }
+
+    .app-search:active .app-form-inline input, .app-search:hover .app-form-inline input{
+        width: 100%;
+        display: block !important;
+    }
+    .app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button{
+        position: absolute;
+        color: rgb(42, 159, 214);
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
 }