Merge pull request #5138 from zyhfish/task/improve-middle-screen-view

improve the styles in middle screen size.

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">

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

@@ -12,8 +12,9 @@
             @if (_showBanner)
             {
                 <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
-                <div class="container-fluid d-flex">
+                <div class="container-fluid">
-                    <div class="col-10">
+                    <div class="row">
+                        <div class="col-9 col-xl-10">
                             @if (PageState.RenderMode == RenderModes.Static)
                             {
                                 <input type="checkbox" name="cantrack" checked="@_canTrack" value="1" class="form-check-input me-2" />
@@ -24,21 +25,22 @@
                             }
                             @((MarkupString)Convert.ToString(Localizer["ConsentNotice"]))
                         </div>
-                    <div class="col-2">
+                        <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" type="submit">@((MarkupString)Convert.ToString(Localizer["Confirm"]))</button>
+                                    <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 ms-2" href="/privacy" target="_blank">@((MarkupString)Convert.ToString(Localizer["Privacy"]))</a>
+                                        <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>
             }
         </form>
         <form method="post" @formname="CookieConsentToggleForm" @onsubmit="async () => await ToggleBanner()" data-enhance>
@@ -77,7 +79,8 @@
     public bool ShowPrivacyLink { get; set; } = true;
 
     [SupplyParameterFromForm(FormName = "CookieConsentToggleForm")]
-    public string ShowBanner { 
+    public string ShowBanner
+    {
         get => "";
         set
         {

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);

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: 991.98px) {
-@media (max-width: 767.98px) {
-    .main .top-row {
-        display: none;
-    }
-
     .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 {

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