kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Fix #4309: make searchbox responsive.
This commit is contained in:
Shaun Walker 2024-06-05 07:48:55 -04:00 committed by GitHub
commit a42ab32436
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 97 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Oqtane.Client/Themes/BlazorTheme/Themes/Default.razor
View File

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

5
Oqtane.Client/Themes/Controls/Theme/Search.razor
View File

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

2
Oqtane.Client/Themes/OqtaneTheme/Themes/Default.razor
View File

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

43
Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
View File

@ -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) {

42
Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
View File

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