From f6f895b516d1de5a6fa50c8ae94033bb717c27aa Mon Sep 17 00:00:00 2001
From: Shaun Walker <shaun.walker@siliqon.com>
Date: Sat, 9 May 2020 12:16:39 -0400
Subject: [PATCH] more responsive design adjustments

---
 Oqtane.Client/Themes/BlazorTheme/Container.razor         | 4 +++-
 Oqtane.Client/Themes/Controls/MenuHorizontal.Razor       | 8 +++++---
 Oqtane.Client/Themes/Controls/MenuVertical.razor         | 8 +++++---
 Oqtane.Client/Themes/OqtaneTheme/Container.razor         | 4 +++-
 Oqtane.Client/Themes/OqtaneTheme/Default.razor           | 2 +-
 .../wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css   | 6 +++++-
 .../wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css   | 9 +++++++--
 7 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/Oqtane.Client/Themes/BlazorTheme/Container.razor b/Oqtane.Client/Themes/BlazorTheme/Container.razor
index d286aef0..e62bc207 100644
--- 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
index 22728021..8924054f 100644
--- 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
index d53b4aa9..d14573a1 100644
--- 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
index 674486df..b7ea2559 100644
--- 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
index 00d1a2fc..f92823e7 100644
--- 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
index 9089259d..a9e5c15e 100644
--- 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
index 56bbf2dd..693c8e7f 100644
--- 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;
     }
 }
\ No newline at end of file