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 @inherits ContainerBase
<div class="container"> <div class="container">
<div class="row px-4"> <div class="row px-4">
<ModuleActions /><h2><ModuleTitle /></h2> <div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" /> <hr class="app-rule" />
</div> </div>
<div class="row px-4"> <div class="row px-4">

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

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

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

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

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

@ -2,7 +2,9 @@
@inherits ContainerBase @inherits ContainerBase
<div class="container"> <div class="container">
<div class="row px-4"> <div class="row px-4">
<ModuleActions /><h2><ModuleTitle /></h2> <div class="d-flex flex-nowrap">
<ModuleActions /><h2><ModuleTitle /></h2>
</div>
<hr class="app-rule" /> <hr class="app-rule" />
</div> </div>
<div class="row px-4"> <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 class="controls-group"><UserProfile /> <Login /> <ControlPanel /></div>
</div> </div>
</nav> </nav>
<div class="container"> <div class="content container">
<PaneLayout /> <PaneLayout />
<div class="row px-4"> <div class="row px-4">
<Pane Name="Admin" /> <Pane Name="Admin" />

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

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

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

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