Making header more mobile friendly

getting the fixed and absolute positioned silliness out of the way on small screens
modxcms · Nov 21, 2015 · 4a4ca38 · 4a4ca38
1 parent 39ba702
commit 4a4ca38
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 6 deletions.
diff --git a/_build/templates/default/sass/_buttons.scss b/_build/templates/default/sass/_buttons.scss
@@ -268,6 +268,41 @@ button {
   border-radius: 0 0 5px 5px;
   z-index: 11; /* prevent panel collaps arrows from overlapping */
 
+  @include media($mobile) {
+	  position: relative;
+	  top: auto;
+	  left: auto;
+	  right: auto;
+	  bottom: auto;
+	  width: 100%;
+
+	  table table { // ExtJS is crazy
+		  display:block;
+		  tbody {
+			  display:block;
+			  tr {
+				  display:block;
+				  @include outer-container;
+				  @include display(flex);
+				  @include flex-wrap(wrap);
+				  td {
+				  	display:inline-block;
+					float:left;
+					margin-bottom:1em;
+					@include flex-grow(1);
+					&:first-of-type {
+						@include flex-basis(100%);
+					}
+					.x-btn {
+						margin-left:3px;
+						margin-right:3px;
+					}
+				  }
+			  }
+		  }
+	  }
+  }
+
   .x-toolbar-left {
     width: auto !important;
     zoom: 1;

diff --git a/_build/templates/default/sass/_navbar.scss b/_build/templates/default/sass/_navbar.scss
@@ -22,11 +22,14 @@
 }
 
 #modx-topnav {
+  @extend %outer-container;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
-
+  @include media($mobile) {
+	  float:none;
+  }
   li {
     border-right: 1px solid $navbarBorder;
   }

diff --git a/_build/templates/default/sass/_utility.scss b/_build/templates/default/sass/_utility.scss
@@ -22,6 +22,10 @@
     @include ir;
 }
 
+%outer-container {
+	@include outer-container;
+}
+
 @mixin awesome-font() {
     display: inline-block;
     font-family: FontAwesome;

diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
@@ -229,6 +229,12 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 /* Error container */
 
 #modx-content {
+  @include media($mobile) {
+    position:relative;
+    width:auto !important;
+    top:auto !important;
+    left:auto !important;
+  }
   .modx_error {
     width: 95%;
     margin: 26px 0 0 15px;

diff --git a/manager/assets/modext/core/modx.component.js b/manager/assets/modext/core/modx.component.js
@@ -7,8 +7,8 @@ MODx.Component = function(config) {
     if (this.config.tabs) {
         this._loadTabs();
     }
-    this._loadComponents();
     this._loadActionButtons();
+	this._loadComponents();
     MODx.activePage = this;
 };
 Ext.extend(MODx.Component,Ext.Component,{
@@ -104,7 +104,7 @@ Ext.extend(MODx.Component,Ext.Component,{
         return true;
     }
 });
-Ext.reg('modx-component',MODx.Component);
+
 
 
 MODx.toolbar.ActionButtons = function(config) {
@@ -115,7 +115,7 @@ MODx.toolbar.ActionButtons = function(config) {
         ,id: 'modx-action-buttons'
         ,params: {}
         ,items: []
-        ,renderTo: 'modx-container'
+        ,renderTo: 'modx-action-buttons-container'
     });
     if (config.formpanel) {
         this.setupDirtyButtons(config.formpanel);
@@ -355,3 +355,5 @@ Ext.extend(MODx.toolbar.ActionButtons,Ext.Toolbar,{
     }
 });
 Ext.reg('modx-actionbuttons',MODx.toolbar.ActionButtons);
+
+Ext.reg('modx-component',MODx.Component);
diff --git a/manager/templates/default/css/index.css b/manager/templates/default/css/index.css
diff --git a/manager/templates/default/header.tpl b/manager/templates/default/header.tpl
@@ -88,4 +88,5 @@
         <div id="modAB"></div>
         <div id="modx-leftbar"></div>
         <div id="modx-content">
+			<div id="modx-action-buttons-container"></div>
             <div id="modx-panel-holder"></div>