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

improve the styles in middle screen size.

Browse Source
This commit is contained in:
Ben 2025-03-04 23:31:21 +08:00
parent d136f8ac91
commit 5e2092c6d4
5 changed files with 87 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,6 @@
@namespace Oqtane.Themes.BlazorTheme @namespace Oqtane.Themes.BlazorTheme
@inherits ThemeBase @inherits ThemeBase
<div class="breadcrumbs">
<Breadcrumbs />
</div>
<div class="row flex-xl-nowrap gx-0"> <div class="row flex-xl-nowrap gx-0">
<div class="sidebar"> <div class="sidebar">
<nav class="navbar"> <nav class="navbar">
@ -22,6 +17,9 @@
<Login /> <Login />
<ControlPanel LanguageDropdownAlignment="right" /> <ControlPanel LanguageDropdownAlignment="right" />
</div> </div>
<div class="breadcrumbs">
<Breadcrumbs />
</div>
</div> </div>
<div class="container"> <div class="container">
<div class="row px-4"> <div class="row px-4">

59
Oqtane.Client/Themes/Controls/Theme/CookieConsent.razor
View File

@ -12,30 +12,32 @@
@if (_showBanner) @if (_showBanner)
{ {
<input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" /> <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">
@if (PageState.RenderMode == RenderModes.Static) <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" />
}
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="col-md-6 col-xs-6 text-center"> <input type="checkbox" name="cantrack" checked="@_canTrack" value="1" class="form-check-input me-2" />
<a class="btn btn-secondary mb-1 ms-2" href="/privacy" target="_blank">@((MarkupString)Convert.ToString(Localizer["Privacy"]))</a>
</div>
} }
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> </div>
</div> </div>
@ -43,7 +45,7 @@
</form> </form>
<form method="post" @formname="CookieConsentToggleForm" @onsubmit="async () => await ToggleBanner()" data-enhance> <form method="post" @formname="CookieConsentToggleForm" @onsubmit="async () => await ToggleBanner()" data-enhance>
<input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" /> <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
@if(_showBanner) @if (_showBanner)
{ {
<input type="hidden" name="showbanner" value="false" /> <input type="hidden" name="showbanner" value="false" />
<button type="submit" class="btn btn-light text-dark btn-sm position-absolute btn-hide"> <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; public bool ShowPrivacyLink { get; set; } = true;
[SupplyParameterFromForm(FormName = "CookieConsentToggleForm")] [SupplyParameterFromForm(FormName = "CookieConsentToggleForm")]
public string ShowBanner { public string ShowBanner
get => ""; {
get => "";
set set
{ {
_showBanner = bool.Parse(value); _showBanner = bool.Parse(value);
@ -109,7 +112,7 @@
_canTrack = await CookieConsentService.CanTrackAsync(_optout); _canTrack = await CookieConsentService.CanTrackAsync(_optout);
} }
if(!_togglePostback) if (!_togglePostback)
{ {
_showBanner = !_actioned; _showBanner = !_actioned;
} }
@ -118,7 +121,7 @@
private async Task AcceptPolicy() private async Task AcceptPolicy()
{ {
var cookieString = string.Empty; var cookieString = string.Empty;
if(_optout) if (_optout)
{ {
cookieString = _canTrack ? await CookieConsentService.WithdrawConsentCookieAsync() : await CookieConsentService.CreateConsentCookieAsync(); cookieString = _canTrack ? await CookieConsentService.WithdrawConsentCookieAsync() : await CookieConsentService.CreateConsentCookieAsync();
} }
@ -156,7 +159,7 @@
} }
} }
if(PageState.RenderMode == RenderModes.Interactive) if (PageState.RenderMode == RenderModes.Interactive)
{ {
_showBanner = !_showBanner; _showBanner = !_showBanner;
StateHasChanged(); StateHasChanged();

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

@ -56,7 +56,7 @@
private void PerformSearch() private void PerformSearch()
{ {
if (_searchResultsPage != null) if (_searchResultsPage != null && !string.IsNullOrEmpty(_keywords))
{ {
var url = NavigateUrl(_searchResultsPage.Path, $"q={WebUtility.UrlEncode(_keywords)}"); var url = NavigateUrl(_searchResultsPage.Path, $"q={WebUtility.UrlEncode(_keywords)}");
NavigationManager.NavigateTo(url); NavigationManager.NavigateTo(url);

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

@ -30,7 +30,6 @@
.breadcrumbs { .breadcrumbs {
background-color: #e6e6e6; background-color: #e6e6e6;
border-bottom: 1px solid #d6d5d5;
} }
.top-row { .top-row {
@ -120,12 +119,7 @@
.app-logo .navbar-brand { .app-logo .navbar-brand {
color: white; color: white;
} }
@media (max-width: 991.98px) {
@media (max-width: 767.98px) {
.main .top-row {
display: none;
}
.app-search { .app-search {
border-radius: 6px; border-radius: 6px;
} }
@ -141,7 +135,7 @@
.app-search:active, .app-search:hover { .app-search:active, .app-search:hover {
display: block; display: block;
position: fixed; position: absolute;
color: #fff; color: #fff;
top: 0; top: 0;
min-height: 60px; min-height: 60px;
@ -149,6 +143,7 @@
left: 0; left: 0;
z-index: 999; z-index: 999;
border-radius: 0; border-radius: 0;
background-color: #e6e6e6;
} }
.app-search:active .app-form-inline, .app-search:hover .app-form-inline { .app-search:active .app-form-inline, .app-search:hover .app-form-inline {
@ -169,6 +164,11 @@
padding-bottom: 6px; padding-bottom: 6px;
} }
} }
@media (max-width: 767.98px) {
.main .top-row {
display: none;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
app { app {
@ -257,6 +257,7 @@
width: 100%; width: 100%;
left: 0; left: 0;
z-index: 4; z-index: 4;
border-bottom: 1px solid #d6d5d5;
} }
.sidebar { .sidebar {

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

@ -99,7 +99,49 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
color: #ffffff; color: #ffffff;
z-index: 1000; 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) { @media (max-width: 767.98px) {
.app-menu { .app-menu {
@ -130,45 +172,7 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
position: relative; position: relative;
top: 60px; top: 60px;
} }
.app-search { .app-search:active, .app-search:hover{
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; 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;
} }
} }