From 5e2092c6d4affa6be9db02acc8516542d8a34a63 Mon Sep 17 00:00:00 2001
From: Ben <zyhfish@163.com>
Date: Tue, 4 Mar 2025 23:31:21 +0800
Subject: [PATCH] improve the styles in middle screen size.

---
 .../Themes/BlazorTheme/Themes/Default.razor   |  8 +-
 .../Themes/Controls/Theme/CookieConsent.razor | 59 ++++++-------
 .../Themes/Controls/Theme/Search.razor        |  2 +-
 .../Oqtane.Themes.BlazorTheme/Theme.css       | 17 ++--
 .../Oqtane.Themes.OqtaneTheme/Theme.css       | 82 ++++++++++---------
 5 files changed, 87 insertions(+), 81 deletions(-)

diff --git a/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor b/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
index 0dcf974a..1622c5e7 100644
--- a/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
+++ b/Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
@@ -1,11 +1,6 @@
 @namespace Oqtane.Themes.BlazorTheme
 @inherits ThemeBase
 
-
-<div class="breadcrumbs">
-    <Breadcrumbs />
-</div>
-
 <div class="row flex-xl-nowrap gx-0">
     <div class="sidebar">
         <nav class="navbar">
@@ -22,6 +17,9 @@
                 <Login />
                 <ControlPanel LanguageDropdownAlignment="right" />
             </div>
+            <div class="breadcrumbs">
+                <Breadcrumbs />
+            </div>
         </div>
         <div class="container">
             <div class="row px-4">
diff --git a/Oqtane.Client/Themes/Controls/Theme/CookieConsent.razor b/Oqtane.Client/Themes/Controls/Theme/CookieConsent.razor
index 92b862f0..db39b44f 100644
--- a/Oqtane.Client/Themes/Controls/Theme/CookieConsent.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/CookieConsent.razor
@@ -12,30 +12,32 @@
             @if (_showBanner)
             {
                 <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
-                <div class="container-fluid d-flex">
-                    <div class="col-10">
-                        @if (PageState.RenderMode == RenderModes.Static)
-                        {
-                            <input type="checkbox" name="cantrack" checked="@_canTrack" value="1" class="form-check-input me-2" />
-                        }
-                        else
-                        {
-                            <input type="checkbox" name="cantrack" @bind="@_canTrack" value="1" class="form-check-input me-2" />
-                        }
-                        @((MarkupString)Convert.ToString(Localizer["ConsentNotice"]))
-                    </div>
-                    <div class="col-2">
-                        <div class="row">
-                            <div class="col-md-6 col-xs-6 text-center">
-                                <button class="btn btn-primary mb-1" type="submit">@((MarkupString)Convert.ToString(Localizer["Confirm"]))</button>
-                            </div>
-                            @if (ShowPrivacyLink)
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-9 col-xl-10">
+                            @if (PageState.RenderMode == RenderModes.Static)
                             {
-                                <div class="col-md-6 col-xs-6 text-center">
-                                    <a class="btn btn-secondary mb-1 ms-2" href="/privacy" target="_blank">@((MarkupString)Convert.ToString(Localizer["Privacy"]))</a>
-                                </div>
-
+                                <input type="checkbox" name="cantrack" checked="@_canTrack" value="1" class="form-check-input me-2" />
                             }
+                            else
+                            {
+                                <input type="checkbox" name="cantrack" @bind="@_canTrack" value="1" class="form-check-input me-2" />
+                            }
+                            @((MarkupString)Convert.ToString(Localizer["ConsentNotice"]))
+                        </div>
+                        <div class="col-3 col-xl-2">
+                            <div class="row">
+                                <div class="col-md-6 col-xs-6 text-center">
+                                    <button class="btn btn-primary mb-1 px-0 w-100" type="submit">@((MarkupString)Convert.ToString(Localizer["Confirm"]))</button>
+                                </div>
+                                @if (ShowPrivacyLink)
+                                {
+                                    <div class="col-md-6 col-xs-6 text-center">
+                                        <a class="btn btn-secondary mb-1 px-0 w-100" href="/privacy" target="_blank">@((MarkupString)Convert.ToString(Localizer["Privacy"]))</a>
+                                    </div>
+
+                                }
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -43,7 +45,7 @@
         </form>
         <form method="post" @formname="CookieConsentToggleForm" @onsubmit="async () => await ToggleBanner()" data-enhance>
             <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
-            @if(_showBanner)
+            @if (_showBanner)
             {
                 <input type="hidden" name="showbanner" value="false" />
                 <button type="submit" class="btn btn-light text-dark btn-sm position-absolute btn-hide">
@@ -77,8 +79,9 @@
     public bool ShowPrivacyLink { get; set; } = true;
 
     [SupplyParameterFromForm(FormName = "CookieConsentToggleForm")]
-    public string ShowBanner { 
-        get => ""; 
+    public string ShowBanner
+    {
+        get => "";
         set
         {
             _showBanner = bool.Parse(value);
@@ -109,7 +112,7 @@
             _canTrack = await CookieConsentService.CanTrackAsync(_optout);
         }
 
-        if(!_togglePostback)
+        if (!_togglePostback)
         {
             _showBanner = !_actioned;
         }
@@ -118,7 +121,7 @@
     private async Task AcceptPolicy()
     {
         var cookieString = string.Empty;
-        if(_optout)
+        if (_optout)
         {
             cookieString = _canTrack ? await CookieConsentService.WithdrawConsentCookieAsync() : await CookieConsentService.CreateConsentCookieAsync();
         }
@@ -156,7 +159,7 @@
             }
         }
 
-        if(PageState.RenderMode == RenderModes.Interactive)
+        if (PageState.RenderMode == RenderModes.Interactive)
         {
             _showBanner = !_showBanner;
             StateHasChanged();
diff --git a/Oqtane.Client/Themes/Controls/Theme/Search.razor b/Oqtane.Client/Themes/Controls/Theme/Search.razor
index ccb4b327..922796ec 100644
--- a/Oqtane.Client/Themes/Controls/Theme/Search.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/Search.razor
@@ -56,7 +56,7 @@
 
     private void PerformSearch()
     {
-        if (_searchResultsPage != null)
+        if (_searchResultsPage != null && !string.IsNullOrEmpty(_keywords))
         {
             var url = NavigateUrl(_searchResultsPage.Path, $"q={WebUtility.UrlEncode(_keywords)}");
             NavigationManager.NavigateTo(url);
diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
index 99020c83..911362c5 100644
--- a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
+++ b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
@@ -30,7 +30,6 @@
 
 .breadcrumbs {
     background-color: #e6e6e6;
-    border-bottom: 1px solid #d6d5d5;
 }
 
 .top-row {
@@ -120,12 +119,7 @@
 .app-logo .navbar-brand {
     color: white;
 }
-
-@media (max-width: 767.98px) {
-    .main .top-row {
-        display: none;
-    }
-
+@media (max-width: 991.98px) {
     .app-search {
         border-radius: 6px;
     }
@@ -141,7 +135,7 @@
 
     .app-search:active, .app-search:hover {
         display: block;
-        position: fixed;
+        position: absolute;
         color: #fff;
         top: 0;
         min-height: 60px;
@@ -149,6 +143,7 @@
         left: 0;
         z-index: 999;
         border-radius: 0;
+        background-color: #e6e6e6;
     }
 
     .app-search:active .app-form-inline, .app-search:hover .app-form-inline {
@@ -169,6 +164,11 @@
         padding-bottom: 6px;
     }
 }
+@media (max-width: 767.98px) {
+    .main .top-row {
+        display: none;
+    }
+}
 
 @media (min-width: 768px) {
     app {
@@ -257,6 +257,7 @@
         width: 100%;
         left: 0;
         z-index: 4;
+        border-bottom: 1px solid #d6d5d5;
     }
 
     .sidebar {
diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
index 6bb1aacb..c40b7140 100644
--- a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
+++ b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
@@ -99,7 +99,49 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
     color: #ffffff;
     z-index: 1000;
 }
+@media (max-width: 991.98px) {
+    .app-search {
+        border-radius: 6px;
+    }
+    .app-search input{
+        display: none !important;
+    }
 
+    .app-search input + button {
+        position: initial;
+        padding-top: 7px;
+        padding-bottom: 7px;
+    }
+
+    .app-search:active, .app-search:hover {
+        display: block;
+        position: fixed;
+        top: 0;
+        min-height: 96px;
+        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 (max-width: 767.98px) {
 
     .app-menu {
@@ -130,45 +172,7 @@ 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;
-        padding-top: 7px;
-        padding-bottom: 7px;
-    }
-
-    .app-search:active, .app-search:hover {
-        display: block;
-        position: fixed;
-        top: 0;
+    .app-search:active, .app-search:hover{
         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;
     }
 }