From f99eda14af9c11357dc8c1775542bfb70ae53c06 Mon Sep 17 00:00:00 2001
From: dignajar <dignajar@gmail.com>
Date: Tue, 13 Sep 2016 23:59:12 -0300
Subject: [PATCH] Dashboard responsive

---
 .../admin/themes/default/css/default.css      | 53 +++++++---
 bl-kernel/admin/themes/default/index.php      | 97 +++++++++----------
 bl-kernel/admin/views/dashboard.php           |  2 +-
 bl-kernel/admin/views/edit-page.php           |  7 +-
 bl-kernel/admin/views/edit-post.php           |  6 +-
 bl-kernel/admin/views/new-page.php            |  6 +-
 bl-kernel/admin/views/new-post.php            |  6 +-
 7 files changed, 101 insertions(+), 76 deletions(-)

diff --git a/bl-kernel/admin/themes/default/css/default.css b/bl-kernel/admin/themes/default/css/default.css
index 77540be4..e989b49c 100644
--- a/bl-kernel/admin/themes/default/css/default.css
+++ b/bl-kernel/admin/themes/default/css/default.css
@@ -3,11 +3,11 @@
 ---------------------------------------------------------------- */
 
 .uk-width-1-4 {
-	width: 20% !important;
+	width: 20%;
 }
 
 .uk-width-3-4 {
-	width: 80% !important;
+	width: 80%;
 }
 
 .label-draft,
@@ -58,8 +58,6 @@
 	background-color: #0069BE !important;
 }
 
-
-
 /* CSS defaults
 ---------------------------------------------------------------- */
 body {
@@ -113,15 +111,19 @@ body {
 	font-size: 16px;
 }
 
+.uk-navbar-toggle {
+	margin-top: 10px;
+}
+
 /* VIEW
 ---------------------------------------------------------------- */
 
 #bl-view {
-	margin-right: 20px;
+	padding-right: 10px;
 }
 
 #bl-view .uk-width-2-10 {
-	padding-left: 10px !important;
+
 }
 
 .plugin-incompatible,
@@ -154,7 +156,7 @@ div.dashboard-links {
 	background-color: #fafafa !important;
 	border: 1px solid #f8f8f8;
 	box-shadow: 5px 1px 1px #fdfdfd;
-	margin-bottom: 20px;
+	margin-bottom: 10px;
 	padding: 50px 20px;
 }
 
@@ -175,7 +177,7 @@ div.dashboard-links h4 {
 	font-size: 0.9em !important;
 }
 
-.sidebar-meta .uk-form-label {
+.bl-publish-sidebar .uk-form-label {
 	font-size: 0.9em;
 	text-transform: uppercase;
 }
@@ -204,14 +206,41 @@ button.aslink:hover {
 }
 
 
-/* OLD
+/* RESPONSIVE
 ---------------------------------------------------------------- */
 
-.bl-view {
-	margin-top: 25px;
-	margin-bottom: 25px;
+@media (max-width: 960px) {
+
+	.uk-grid {
+		margin: 0 !important;
+	}
+
+	#bl-container {
+		margin: 0 10px !important;
+	}
+
+	#bl-view {
+		width: 100% !important;
+		padding: 0 !important;
+	}
+
+	.bl-brand {
+		margin: 0 !important;
+	}
+
+	.bl-publish-sidebar {
+		display: none !important;
+	}
+
+	.bl-publish-view {
+		width: 100% !important;
+		padding: 0 !important;
+	}
 }
 
+/* OLD
+---------------------------------------------------------------- */
+
 #logo {
 	background: #f4f4f4;
 	padding:20px 0;
diff --git a/bl-kernel/admin/themes/default/index.php b/bl-kernel/admin/themes/default/index.php
index f87cbfcd..d97d70b4 100644
--- a/bl-kernel/admin/themes/default/index.php
+++ b/bl-kernel/admin/themes/default/index.php
@@ -52,6 +52,7 @@ $(document).ready(function() {
 </div>
 
 <!-- Offcanvas for Mobile -->
+<a href="#offcanvas" class="uk-navbar-toggle uk-hidden-large" data-uk-offcanvas></a>
 <div id="offcanvas" class="uk-offcanvas">
 <div class="uk-offcanvas-bar">
 	<ul class="uk-nav uk-nav-offcanvas">
@@ -86,71 +87,67 @@ $(document).ready(function() {
 
 	<div class="uk-grid uk-grid-small">
 
-		<div class="uk-width-1-4">
-		<div id="bl-sidebar">
+		<div id="bl-sidebar" class="uk-width-1-4 uk-visible-large">
 
-		<ul class="uk-nav">
+			<ul class="uk-nav">
 
-		<li <?php echo ($layout['view']=='dashboard')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'dashboard' ?>"><?php $L->p('Dashboard') ?></a>
-		</li>
-		<li>
-			<a target="_blank"  href="<?php echo HTML_PATH_ROOT ?>"><?php $L->p('Website') ?></a>
-		</li>
+			<li <?php echo ($layout['view']=='dashboard')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'dashboard' ?>"><?php $L->p('Dashboard') ?></a>
+			</li>
+			<li>
+				<a target="_blank"  href="<?php echo HTML_PATH_ROOT ?>"><?php $L->p('Website') ?></a>
+			</li>
 
-		<li class="uk-nav-header"><?php $L->p('Publish') ?></li>
-		<li <?php echo ($layout['view']=='new-post')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-post' ?>"><?php $L->p('New post') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-page' ?>"><?php $L->p('New page') ?></a>
-		</li>
+			<li class="uk-nav-header"><?php $L->p('Publish') ?></li>
+			<li <?php echo ($layout['view']=='new-post')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-post' ?>"><?php $L->p('New post') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-page' ?>"><?php $L->p('New page') ?></a>
+			</li>
 
-		<li class="uk-nav-header">Manage</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'manage-posts' ?>"><?php $L->p('Posts') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'manage-pages' ?>"><?php $L->p('Pages') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'users' ?>"><?php $L->p('Users') ?></a>
-		</li>
+			<li class="uk-nav-header">Manage</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'manage-posts' ?>"><?php $L->p('Posts') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'manage-pages' ?>"><?php $L->p('Pages') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'users' ?>"><?php $L->p('Users') ?></a>
+			</li>
 
-		<li class="uk-nav-header">Settings</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-general' ?>"><?php $L->p('General') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-advanced' ?>"><?php $L->p('Advanced') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-regional' ?>"><?php $L->p('Language and timezone') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'plugins' ?>"><?php $L->p('Plugins') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'themes' ?>"><?php $L->p('Themes') ?></a>
-		</li>
-		<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
-			<a href="<?php echo HTML_PATH_ADMIN_ROOT.'about' ?>"><?php $L->p('About') ?></a>
-		</li>
+			<li class="uk-nav-header">Settings</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-general' ?>"><?php $L->p('General') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-advanced' ?>"><?php $L->p('Advanced') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-regional' ?>"><?php $L->p('Language and timezone') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'plugins' ?>"><?php $L->p('Plugins') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'themes' ?>"><?php $L->p('Themes') ?></a>
+			</li>
+			<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
+				<a href="<?php echo HTML_PATH_ADMIN_ROOT.'about' ?>"><?php $L->p('About') ?></a>
+			</li>
 
-		</ul>
+			</ul>
 
-		</div>
 		</div>
 
-		<div class="uk-width-3-4">
-		<div id="bl-view">
+		<div id="bl-view" class="uk-width-3-4">
 		<?php
 			if( Sanitize::pathFile(PATH_ADMIN_VIEWS, $layout['view'].'.php') ) {
 				include(PATH_ADMIN_VIEWS.$layout['view'].'.php');
 			}
 		?>
 		</div>
-		</div>
 
 </div>
 
diff --git a/bl-kernel/admin/views/dashboard.php b/bl-kernel/admin/views/dashboard.php
index 6fb96a84..238a3c44 100644
--- a/bl-kernel/admin/views/dashboard.php
+++ b/bl-kernel/admin/views/dashboard.php
@@ -57,7 +57,7 @@
 </div>
 </div>
 
-<div id="dashboard-panel" class="uk-grid">
+<div id="dashboard-panel" class="uk-grid uk-grid-small">
 
 	<div class="uk-width-1-3">
 
diff --git a/bl-kernel/admin/views/edit-page.php b/bl-kernel/admin/views/edit-page.php
index 96849953..c74b904b 100644
--- a/bl-kernel/admin/views/edit-page.php
+++ b/bl-kernel/admin/views/edit-page.php
@@ -17,8 +17,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
 	));
 
 // ---- LEFT SIDE ----
-echo '<div class="uk-grid">';
-echo '<div class="uk-width-8-10">';
+echo '<div class="uk-grid uk-grid-medium">';
+echo '<div class="bl-publish-view uk-width-8-10">';
 
 	// Title input
 	HTML::formInputText(array(
@@ -36,7 +36,6 @@ echo '<div class="uk-width-8-10">';
 		'placeholder'=>''
 	));
 
-
 	// Form buttons
 	echo '<div class="uk-form-row uk-margin-bottom">';
 	echo '	<button class="uk-button uk-button-primary" type="submit">'.$L->g('Save').'</button>';
@@ -52,7 +51,7 @@ if(count($_Page->children())===0)
 echo '</div>';
 
 // ---- RIGHT SIDE ----
-echo '<div class="sidebar-meta uk-width-2-10">';
+echo '<div class="bl-publish-sidebar uk-width-2-10">';
 
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
diff --git a/bl-kernel/admin/views/edit-post.php b/bl-kernel/admin/views/edit-post.php
index f591b0f4..529535f3 100644
--- a/bl-kernel/admin/views/edit-post.php
+++ b/bl-kernel/admin/views/edit-post.php
@@ -17,8 +17,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
 	));
 
 // ---- LEFT SIDE ----
-echo '<div class="uk-grid">';
-echo '<div class="uk-width-8-10">';
+echo '<div class="uk-grid uk-grid-medium">';
+echo '<div class="bl-publish-view uk-width-8-10">';
 
 	// Title input
 	HTML::formInputText(array(
@@ -46,7 +46,7 @@ echo '<div class="uk-width-8-10">';
 echo '</div>';
 
 // ---- RIGHT SIDE ----
-echo '<div class="sidebar-meta uk-width-2-10">';
+echo '<div class="bl-publish-sidebar uk-width-2-10">';
 
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
diff --git a/bl-kernel/admin/views/new-page.php b/bl-kernel/admin/views/new-page.php
index ccab4dba..0a51ba62 100644
--- a/bl-kernel/admin/views/new-page.php
+++ b/bl-kernel/admin/views/new-page.php
@@ -11,8 +11,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
 	));
 
 // ---- LEFT SIDE ----
-echo '<div class="uk-grid">';
-echo '<div class="uk-width-8-10">';
+echo '<div class="uk-grid uk-grid-medium">';
+echo '<div class="bl-publish-view uk-width-8-10">';
 
 	// Title input
 	HTML::formInputText(array(
@@ -39,7 +39,7 @@ echo '<div class="uk-width-8-10">';
 echo '</div>';
 
 // ---- RIGHT SIDE ----
-echo '<div class="sidebar-meta uk-width-2-10">';
+echo '<div class="bl-publish-sidebar uk-width-2-10">';
 
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
diff --git a/bl-kernel/admin/views/new-post.php b/bl-kernel/admin/views/new-post.php
index 96b42c24..adda0498 100644
--- a/bl-kernel/admin/views/new-post.php
+++ b/bl-kernel/admin/views/new-post.php
@@ -11,8 +11,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
 	));
 
 // ---- LEFT SIDE ----
-echo '<div class="uk-grid">';
-echo '<div class="uk-width-8-10">';
+echo '<div class="uk-grid uk-grid-medium">';
+echo '<div class="bl-publish-view uk-width-8-10">';
 
 	// Title input
 	HTML::formInputText(array(
@@ -39,7 +39,7 @@ echo '<div class="uk-width-8-10">';
 echo '</div>';
 
 // ---- RIGHT SIDE ----
-echo '<div class="sidebar-meta uk-width-2-10">';
+echo '<div class="bl-publish-sidebar uk-width-2-10">';
 
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';