From 842b7b1402c523a61488591b9f55a45e9f98c5b7 Mon Sep 17 00:00:00 2001
From: Ben <zyhfish@163.com>
Date: Wed, 5 Jun 2024 10:27:38 +0800
Subject: [PATCH] Fix #4309: make searchbox responsive.

---
 .../Themes/BlazorTheme/Themes/Default.razor   |  9 +++-
 .../Themes/Controls/Theme/Search.razor        |  5 ++-
 .../Themes/OqtaneTheme/Themes/Default.razor   |  2 +-
 .../Oqtane.Themes.BlazorTheme/Theme.css       | 43 +++++++++++++++++++
 .../Oqtane.Themes.OqtaneTheme/Theme.css       | 42 ++++++++++++++++++
 5 files changed, 97 insertions(+), 4 deletions(-)

diff --git a/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor b/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
index 2e0da4d3..9f3b8cd9 100644
--- a/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
+++ b/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">
diff --git a/Oqtane.Client/Themes/Controls/Theme/Search.razor b/Oqtane.Client/Themes/Controls/Theme/Search.razor
index a782bdaf..54baac45 100644
--- a/Oqtane.Client/Themes/Controls/Theme/Search.razor
+++ b/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";
 
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor b/Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor
index 936c823e..344f5dd9 100644
--- a/Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor
+++ b/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>
diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
index 266adcc8..481fa649 100644
--- a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
+++ b/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) {
diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
index bbb65908..862165b4 100644
--- a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
+++ b/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;
+    }
 }