Dashboard responsive

This commit is contained in:
dignajar 2016-09-13 23:59:12 -03:00
parent e14c57fbc2
commit f99eda14af
7 changed files with 101 additions and 76 deletions

View File

@ -3,11 +3,11 @@
---------------------------------------------------------------- */ ---------------------------------------------------------------- */
.uk-width-1-4 { .uk-width-1-4 {
width: 20% !important; width: 20%;
} }
.uk-width-3-4 { .uk-width-3-4 {
width: 80% !important; width: 80%;
} }
.label-draft, .label-draft,
@ -58,8 +58,6 @@
background-color: #0069BE !important; background-color: #0069BE !important;
} }
/* CSS defaults /* CSS defaults
---------------------------------------------------------------- */ ---------------------------------------------------------------- */
body { body {
@ -113,15 +111,19 @@ body {
font-size: 16px; font-size: 16px;
} }
.uk-navbar-toggle {
margin-top: 10px;
}
/* VIEW /* VIEW
---------------------------------------------------------------- */ ---------------------------------------------------------------- */
#bl-view { #bl-view {
margin-right: 20px; padding-right: 10px;
} }
#bl-view .uk-width-2-10 { #bl-view .uk-width-2-10 {
padding-left: 10px !important;
} }
.plugin-incompatible, .plugin-incompatible,
@ -154,7 +156,7 @@ div.dashboard-links {
background-color: #fafafa !important; background-color: #fafafa !important;
border: 1px solid #f8f8f8; border: 1px solid #f8f8f8;
box-shadow: 5px 1px 1px #fdfdfd; box-shadow: 5px 1px 1px #fdfdfd;
margin-bottom: 20px; margin-bottom: 10px;
padding: 50px 20px; padding: 50px 20px;
} }
@ -175,7 +177,7 @@ div.dashboard-links h4 {
font-size: 0.9em !important; font-size: 0.9em !important;
} }
.sidebar-meta .uk-form-label { .bl-publish-sidebar .uk-form-label {
font-size: 0.9em; font-size: 0.9em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -204,14 +206,41 @@ button.aslink:hover {
} }
/* OLD /* RESPONSIVE
---------------------------------------------------------------- */ ---------------------------------------------------------------- */
.bl-view { @media (max-width: 960px) {
margin-top: 25px;
margin-bottom: 25px; .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 { #logo {
background: #f4f4f4; background: #f4f4f4;
padding:20px 0; padding:20px 0;

View File

@ -52,6 +52,7 @@ $(document).ready(function() {
</div> </div>
<!-- Offcanvas for Mobile --> <!-- Offcanvas for Mobile -->
<a href="#offcanvas" class="uk-navbar-toggle uk-hidden-large" data-uk-offcanvas></a>
<div id="offcanvas" class="uk-offcanvas"> <div id="offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas"> <ul class="uk-nav uk-nav-offcanvas">
@ -86,71 +87,67 @@ $(document).ready(function() {
<div class="uk-grid uk-grid-small"> <div class="uk-grid uk-grid-small">
<div class="uk-width-1-4"> <div id="bl-sidebar" class="uk-width-1-4 uk-visible-large">
<div id="bl-sidebar">
<ul class="uk-nav"> <ul class="uk-nav">
<li <?php echo ($layout['view']=='dashboard')?'class="uk-active"':'' ?>> <li <?php echo ($layout['view']=='dashboard')?'class="uk-active"':'' ?>>
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'dashboard' ?>"><?php $L->p('Dashboard') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'dashboard' ?>"><?php $L->p('Dashboard') ?></a>
</li> </li>
<li> <li>
<a target="_blank" href="<?php echo HTML_PATH_ROOT ?>"><?php $L->p('Website') ?></a> <a target="_blank" href="<?php echo HTML_PATH_ROOT ?>"><?php $L->p('Website') ?></a>
</li> </li>
<li class="uk-nav-header"><?php $L->p('Publish') ?></li> <li class="uk-nav-header"><?php $L->p('Publish') ?></li>
<li <?php echo ($layout['view']=='new-post')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-post' ?>"><?php $L->p('New post') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'new-page' ?>"><?php $L->p('New page') ?></a>
</li> </li>
<li class="uk-nav-header">Manage</li> <li class="uk-nav-header">Manage</li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'manage-posts' ?>"><?php $L->p('Posts') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'manage-pages' ?>"><?php $L->p('Pages') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'users' ?>"><?php $L->p('Users') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'users' ?>"><?php $L->p('Users') ?></a>
</li> </li>
<li class="uk-nav-header">Settings</li> <li class="uk-nav-header">Settings</li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-general' ?>"><?php $L->p('General') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-advanced' ?>"><?php $L->p('Advanced') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <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> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'settings-regional' ?>"><?php $L->p('Language and timezone') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'plugins' ?>"><?php $L->p('Plugins') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'plugins' ?>"><?php $L->p('Plugins') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'themes' ?>"><?php $L->p('Themes') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'themes' ?>"><?php $L->p('Themes') ?></a>
</li> </li>
<li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>> <li <?php echo ($layout['view']=='new-page')?'class="uk-active"':'' ?>>
<a href="<?php echo HTML_PATH_ADMIN_ROOT.'about' ?>"><?php $L->p('About') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT.'about' ?>"><?php $L->p('About') ?></a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div class="uk-width-3-4"> <div id="bl-view" class="uk-width-3-4">
<div id="bl-view">
<?php <?php
if( Sanitize::pathFile(PATH_ADMIN_VIEWS, $layout['view'].'.php') ) { if( Sanitize::pathFile(PATH_ADMIN_VIEWS, $layout['view'].'.php') ) {
include(PATH_ADMIN_VIEWS.$layout['view'].'.php'); include(PATH_ADMIN_VIEWS.$layout['view'].'.php');
} }
?> ?>
</div> </div>
</div>
</div> </div>

View File

@ -57,7 +57,7 @@
</div> </div>
</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"> <div class="uk-width-1-3">

View File

@ -17,8 +17,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
)); ));
// ---- LEFT SIDE ---- // ---- LEFT SIDE ----
echo '<div class="uk-grid">'; echo '<div class="uk-grid uk-grid-medium">';
echo '<div class="uk-width-8-10">'; echo '<div class="bl-publish-view uk-width-8-10">';
// Title input // Title input
HTML::formInputText(array( HTML::formInputText(array(
@ -36,7 +36,6 @@ echo '<div class="uk-width-8-10">';
'placeholder'=>'' 'placeholder'=>''
)); ));
// Form buttons // Form buttons
echo '<div class="uk-form-row uk-margin-bottom">'; echo '<div class="uk-form-row uk-margin-bottom">';
echo ' <button class="uk-button uk-button-primary" type="submit">'.$L->g('Save').'</button>'; 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>'; echo '</div>';
// ---- RIGHT SIDE ---- // ---- 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 // Tabs, general and advanced mode
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">'; echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';

View File

@ -17,8 +17,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
)); ));
// ---- LEFT SIDE ---- // ---- LEFT SIDE ----
echo '<div class="uk-grid">'; echo '<div class="uk-grid uk-grid-medium">';
echo '<div class="uk-width-8-10">'; echo '<div class="bl-publish-view uk-width-8-10">';
// Title input // Title input
HTML::formInputText(array( HTML::formInputText(array(
@ -46,7 +46,7 @@ echo '<div class="uk-width-8-10">';
echo '</div>'; echo '</div>';
// ---- RIGHT SIDE ---- // ---- 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 // Tabs, general and advanced mode
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">'; echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';

View File

@ -11,8 +11,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
)); ));
// ---- LEFT SIDE ---- // ---- LEFT SIDE ----
echo '<div class="uk-grid">'; echo '<div class="uk-grid uk-grid-medium">';
echo '<div class="uk-width-8-10">'; echo '<div class="bl-publish-view uk-width-8-10">';
// Title input // Title input
HTML::formInputText(array( HTML::formInputText(array(
@ -39,7 +39,7 @@ echo '<div class="uk-width-8-10">';
echo '</div>'; echo '</div>';
// ---- RIGHT SIDE ---- // ---- 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 // Tabs, general and advanced mode
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">'; echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';

View File

@ -11,8 +11,8 @@ HTML::formOpen(array('class'=>'uk-form-stacked'));
)); ));
// ---- LEFT SIDE ---- // ---- LEFT SIDE ----
echo '<div class="uk-grid">'; echo '<div class="uk-grid uk-grid-medium">';
echo '<div class="uk-width-8-10">'; echo '<div class="bl-publish-view uk-width-8-10">';
// Title input // Title input
HTML::formInputText(array( HTML::formInputText(array(
@ -39,7 +39,7 @@ echo '<div class="uk-width-8-10">';
echo '</div>'; echo '</div>';
// ---- RIGHT SIDE ---- // ---- 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 // Tabs, general and advanced mode
echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">'; echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';