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

more responsive design adjustments

Browse Source
This commit is contained in:
Shaun Walker 2020-05-09 12:16:39 -04:00
parent 043f8d07de
commit f6f895b516
7 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Oqtane.Client/Themes/BlazorTheme/Container.razor
View File

@ -2,7 +2,9 @@
@inherits ContainerBase
<div class="container">
<div class="row px-4">
<ModuleActions /><h2><ModuleTitle /></h2>
<div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" />
</div>
<div class="row px-4">

8
Oqtane.Client/Themes/Controls/MenuHorizontal.Razor
View File

@ -3,9 +3,11 @@
@attribute [OqtaneIgnore]
@if (MenuPages.Any())
{
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="app-menu-toggler">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
</span>
<div class="app-menu">
<div class="collapse navbar-collapse" id="Menu">
<ul class="navbar-nav mr-auto">

8
Oqtane.Client/Themes/Controls/MenuVertical.razor
View File

@ -3,9 +3,11 @@
@attribute [OqtaneIgnore]
@if (MenuPages.Any())
{
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="app-menu-toggler">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
</span>
<div class="app-menu">
<div class="collapse navbar-collapse" id="Menu">
<ul class="nav flex-column">

4
Oqtane.Client/Themes/OqtaneTheme/Container.razor
View File

@ -2,7 +2,9 @@
@inherits ContainerBase
<div class="container">
<div class="row px-4">
<ModuleActions /><h2><ModuleTitle /></h2>
<div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" />
</div>
<div class="row px-4">

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

@ -8,7 +8,7 @@
<div class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
</div>
</nav>
<div class="container">
<div class="content container">
<PaneLayout />
<div class="row px-4">
<Pane Name="Admin" />

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

@ -37,6 +37,10 @@
top: -2px;
}
.app-menu {
width: 100%
}
.breadcrumb {
margin-bottom: 0;
}
@ -159,7 +163,7 @@
}
}
@media (max-width: 767px) {
@media (max-width: 767px) {
.breadcrumbs {
position: fixed;
top: 150px;

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

@ -47,6 +47,11 @@ body {
}
@media (max-width: 767px) {
.app-menu {
width: 100%
}
.navbar {
position: fixed;
top: 60px;
@ -67,8 +72,8 @@ body {
margin-right: 25px;
}
.container {
.content {
position: relative;
top: 30px;
top: 60px;
}
}