Merge pull request #457 from sbwalker/master

more responsive design adjustments
oqtane · May 9, 2020 · 8516e32 · 8516e32
2 parents 552df0c + f6f895b
commit 8516e32
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 12 deletions.
diff --git a/Oqtane.Client/Themes/BlazorTheme/Container.razor b/Oqtane.Client/Themes/BlazorTheme/Container.razor
@@ -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">

diff --git a/Oqtane.Client/Themes/Controls/MenuHorizontal.Razor b/Oqtane.Client/Themes/Controls/MenuHorizontal.Razor
@@ -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">

diff --git a/Oqtane.Client/Themes/Controls/MenuVertical.razor b/Oqtane.Client/Themes/Controls/MenuVertical.razor
@@ -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">

diff --git a/Oqtane.Client/Themes/OqtaneTheme/Container.razor b/Oqtane.Client/Themes/OqtaneTheme/Container.razor
@@ -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">

diff --git a/Oqtane.Client/Themes/OqtaneTheme/Default.razor b/Oqtane.Client/Themes/OqtaneTheme/Default.razor
@@ -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" />

diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
@@ -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;

diff --git a/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css b/Oqtane.Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
@@ -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;
     }
 }