Skip to content

Commit

Permalink
Feature #1415 - Mobile: Updates to the dashboard admin bar in Mobile -
Browse files Browse the repository at this point in the history 
continued
  • Loading branch information
@junander
junander committed Mar 18, 2015
1 parent 6bb9d42 commit 1b60203
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 40 deletions.
39 changes: 26 additions & 13 deletions wp-content/mu-plugins/css/openlab-toolbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7045,6 +7045,13 @@ button.oplb-bs .close {
.oplb-bs #wpadminbar #wp-toolbar > ul > li {
position: static;
}
.oplb-bs #wpadminbar #wp-toolbar > ul > li.hamburger .ab-item {
padding: 0;
}
.oplb-bs #wpadminbar #wp-toolbar > ul > li.hamburger .ab-item .navbar-toggle {
margin: 0;
padding: 17px 12px;
}
}
.oplb-bs #wpadminbar #wp-toolbar .admin-bar-menu li {
font-size: 14px;
Expand Down Expand Up @@ -7126,7 +7133,11 @@ button.oplb-bs .close {
.oplb-bs #wpadminbar #wp-toolbar .ab-sub-wrapper {
left: 0;
right: 0;
width: 100%;
width: 100% !important;
}
.oplb-bs #wpadminbar #wp-toolbar .ab-sub-wrapper .ab-submenu .ab-item {
padding: 6px 12px;
float: none;
}
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-mobile-centered {
Expand All @@ -7141,18 +7152,18 @@ button.oplb-bs .close {
display: none !important;
}
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger .ab-item,
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger-mol .ab-item {
padding: 8px 12%;
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger .ab-item .navbar-toggle,
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger-mol .ab-item .navbar-toggle {
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-menu-toggle .ab-item {
margin: 0;
float: none;
padding: 0;
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-menu-toggle .ab-item .icon-bar {
background: #ffffff;
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger .icon-bar {
background: #63dfd2;
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger .ab-item .navbar-toggle .icon-bar,
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger-mol .ab-item .navbar-toggle .icon-bar {
background: #ccc;
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-hamburger-mol .icon-bar {
background: #f7e700;
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-openlab > .ab-item {
background: url('images/openlab_admin_bar_logo.png') #ffffff no-repeat 44% 58%;
Expand Down Expand Up @@ -7180,10 +7191,12 @@ button.oplb-bs .close {
width: 170%;
}
@media (max-width: 767px) {
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-openlab {
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-openlab,
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-network-menu-mobile {
border: none;
}
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-openlab > .ab-item {
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-my-openlab > .ab-item,
.oplb-bs #wpadminbar #wp-toolbar #wp-admin-bar-network-menu-mobile > .ab-item {
padding: 7px 0 0;
visibility: hidden;
width: 0;
Expand Down
44 changes: 33 additions & 11 deletions wp-content/mu-plugins/css/openlab-toolbar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,15 @@
}
@media (max-width: @screen-xs-max){
position: static;
&.hamburger{
.ab-item{
padding: 0;
.navbar-toggle{
margin: 0;
padding: 17px 12px;
}
}
}
}
}
}
Expand Down Expand Up @@ -170,7 +179,13 @@
@media (max-width: @screen-xs-max){
left: 0;
right: 0;
width: 100%;
width: 100% !important;
.ab-submenu{
.ab-item{
padding: 6px 12px;
float: none;
}
}
}
}
#wp-admin-bar-mobile-centered{
Expand All @@ -183,19 +198,25 @@
}
}
}
#wp-admin-bar-my-hamburger,
#wp-admin-bar-my-hamburger-mol{
#wp-admin-bar-menu-toggle{
.ab-item{
padding: 8px 12%;
.navbar-toggle{
margin: 0;
float: none;
.icon-bar{
background: #ccc;
}
margin: 0;
padding: 0;
.icon-bar{
background: @white;
}
}
}
#wp-admin-bar-my-hamburger{
.icon-bar{
background: @cyan;
}
}
#wp-admin-bar-my-hamburger-mol{
.icon-bar{
background: @yellow;
}
}
#wp-admin-bar-openlab{
> .ab-item{
background: url('images/openlab_admin_bar_logo.png') #fff no-repeat 44% 58%;
Expand All @@ -221,7 +242,8 @@
width: 170%;
}
}
#wp-admin-bar-my-openlab{
#wp-admin-bar-my-openlab,
#wp-admin-bar-network-menu-mobile{
@media(max-width: @screen-xs-max){
border: none;
> .ab-item{
Expand Down
77 changes: 61 additions & 16 deletions wp-content/mu-plugins/openlab-toolbar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ function __construct() {
//restricting network menu to group sites only
if(get_current_blog_id() !== 1 || is_admin()){
add_action( 'admin_bar_menu', array( $this, 'add_network_menu' ), 1 );
$this->openlab_menu_items('openlab');
add_filter('body_class',array($this,'adminbar_special_body_class'));
add_filter('admin_body_class',array($this,'adminbar_special_admin_body_class'));
}
Expand All @@ -88,11 +89,18 @@ function __construct() {

//for hamburger menu on mobile
add_action('admin_bar_menu',array($this,'openlab_hamburger_menu'),1);
add_action('admin_bar_menu',array($this,'openlab_hamburger_mol_menu'),1);

$this->openlab_menu_items('network-menu-mobile');
// Logged-in only
if ( is_user_logged_in() ) {

//hamburger mol menu
add_action('admin_bar_menu',array($this,'openlab_hamburger_mol_menu'),1);

//remove the default mobile dashboard toggle, we need a custom one for this for styling purposes
remove_action( 'admin_bar_menu', 'wp_admin_bar_sidebar_toggle', 0 );
add_action('admin_bar_menu',array($this,'custom_admin_bar_sidebar_toggle'),0);

add_action( 'admin_bar_menu', array( $this,'add_middle_group_for_mobile'), 200 );
add_action( 'admin_bar_menu', array( $this, 'add_my_openlab_menu' ), 2 );
add_action( 'admin_bar_menu', array( $this, 'add_mobile_mol_link' ), 9999 );
Expand Down Expand Up @@ -144,6 +152,31 @@ function __construct() {
add_action( 'admin_bar_menu', array( $this, 'fix_tabindex' ), 999 );
}
}

/**
* Custom dashboard toggle on mobile
*/
function custom_admin_bar_sidebar_toggle($wp_admin_bar){
if ( is_admin() ) {

$sr_text = __( 'Menu' );

$hamburger = <<<HTML
<button type="button" class="navbar-toggle mobile-toggle">
<span class="sr-only">{$sr_text}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
HTML;

$wp_admin_bar->add_menu( array(
'id' => 'menu-toggle',
'title' => $hamburger,
'href' => '#',
) );
}
}

/**
* Add the main OpenLab menu
Expand All @@ -159,63 +192,67 @@ function add_network_menu( $wp_admin_bar ) {
'class' => 'admin-bar-menu',
)
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
}

function openlab_menu_items($parent){
global $wp_admin_bar;

$wp_admin_bar->add_node( array(
'parent' => $parent,
'id' => 'home',
'title' => 'Home',
'href' => bp_get_root_domain()
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'about',
'title' => 'About',
'href' => trailingslashit( bp_get_root_domain() . '/about' )
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'people',
'title' => 'People',
'href' => trailingslashit( bp_get_root_domain() . '/people' )
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'courses',
'title' => 'Courses',
'href' => trailingslashit( bp_get_root_domain() . '/courses' )
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'projects',
'title' => 'Projects',
'href' => trailingslashit( bp_get_root_domain() . '/projects' )
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'clubs',
'title' => 'Clubs',
'href' => trailingslashit( bp_get_root_domain() . '/clubs' )
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'portfolios',
'title' => 'Portfolios',
'href' => trailingslashit( bp_get_root_domain() . '/portfolios' )
) );

$wp_admin_bar->add_node( array(
'parent' => 'openlab',
'parent' => $parent,
'id' => 'help',
'title' => 'Help',
'href' => trailingslashit( bp_get_root_domain() . '/blog/help/openlab-help' )
) );
}
}

/**
* Adds 'My OpenLab' menu
Expand Down Expand Up @@ -274,7 +311,7 @@ function add_mobile_mol_link($wp_admin_bar){
function openlab_hamburger_menu($wp_admin_bar){

$hamburger = <<<HTML
<button type="button" class="navbar-toggle mobile-toggle direct-toggle" data-target="#main-nav">
<button type="button" class="navbar-toggle mobile-toggle direct-toggle network-menu" data-target="#wp-admin-bar-network-menu-mobile .ab-sub-wrapper">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Expand All @@ -285,7 +322,15 @@ function openlab_hamburger_menu($wp_admin_bar){
'id' => 'my-hamburger',
'title' => $hamburger,
'meta' => array(
'class' => 'visible-xs',
'class' => 'visible-xs hamburger',
),
) );
//
$wp_admin_bar->add_node( array(
'id' => 'network-menu-mobile',
'title' => 'My OpenLab <span class="fa fa-caret-down"></span>',
'meta' => array(
'class' => 'visible-xs mobile-menu',
),
) );

Expand All @@ -308,7 +353,7 @@ function openlab_hamburger_mol_menu($wp_admin_bar){
'id' => 'my-hamburger-mol',
'title' => $hamburger,
'meta' => array(
'class' => 'visible-xs',
'class' => 'visible-xs hamburger',
),
) );

Expand Down

0 comments on commit 1b60203

Please sign in to comment.