Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collapsible mobile submenu #662

Merged
5 commits merged into from
Oct 8, 2018
Merged

Collapsible mobile submenu #662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba7cb8e
Imp: add option for mobile collapsible submenus on click
eri-trabiccolo Mar 9, 2018
b17423e
Imp: add front js params meant to allow collapsible submenus in mobiles
eri-trabiccolo Mar 9, 2018
93d4c0a
Imp: implement needed CSS for mobile collapsible submenu on click
eri-trabiccolo Mar 9, 2018
9f7259f
Imp: minor css improvements for the dropdown caret toggler button
eri-trabiccolo Mar 12, 2018
d1aaebd
Imp: remove dropdown toggle button borders
eri-trabiccolo Jul 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 94 additions & 3 deletions assets/front/css/_parts/0_3_common_elements.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,8 +276,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
background: #000;
}
/* END ANOTHER BUTTON */


.hu-dropdown-toggle-wrapper { display: none }



Expand All @@ -293,6 +292,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.nav li > a:after { content: "\f0da"; float: right; opacity: 0.5; }
.nav > li > a:after {content: "\f0d7"; float: none; margin-left: 6px; font-size: 0.875em; line-height: 1.2em; }
.nav li > a:only-child:after {content: ""; margin: 0; }
#footer nav .nav { display: block !important; }
#footer .nav li > a:after { content: "\f0da"; }
#footer .nav > li > a:after { content: "\f0d8"; }
#footer .nav li > a:only-child:after { content: ""; }
Expand Down Expand Up @@ -321,6 +321,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
}
@media only screen and (max-width: 719px) {
#header .nav-container .nav, #footer .nav-container .nav {display: none;}
#footer .nav-container .nav.expanded, #header .nav-container .nav.expanded {display: block;}
.nav { font-weight: 400; }
.nav-container { text-transform: none; }
.nav-toggle, .ham__navbar-toggler, .nav-text, .ham__navbar-toggler-two { display: block; }
Expand All @@ -338,17 +339,20 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.nav li a { line-height: 1.6em; display: block; padding: 8px 13px; }
/*.nav li li a { padding-left: 15px; padding-right: 15px; }*/
/* dropdown arrows */
/* no arrows
.nav li > a:after { content: '\f0d7'; opacity: 0; margin-left: 6px; font-size: 0.6rem; }
.nav > li > a:after { content: '\f0d7'; font-size: 0.6rem; }
.nav li > a:only-child:after { content: ''; }
*/

/* level 1 */
.nav > li { font-size: 0.9375em; }
.nav li > a:hover,
.nav li.current_page_item > a,
.nav li.current-menu-item > a,
.nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
.nav ul { display: block!important;}
.nav ul { display: block }

/*.nav a { padding-left:25px;}*/
.nav ul a { padding-left:37px;}
Expand All @@ -361,4 +365,91 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);

.nav ul li { font-size: 0.85rem; font-weight: 300; }
.nav ul li a { padding-top: 6px; padding-bottom: 6px; }

/*
* Mobile dropdown on click
* colors are defined in 0_4_header.css and 9_0_footer.css
*/
.submenu-click-expand.nav-wrap,
.submenu-click-expand.nav-wrap li,
.submenu-click-expand ul { background: inherit; }

.submenu-click-expand .sub-menu,
.submenu-click-expand .nav li {
position: relative;
}

.submenu-click-expand .page_item_has_children > a,
.submenu-click-expand .menu-item-has-children > a {
padding-right: 44px;
}
.submenu-click-expand .nav li a {
min-height: 37px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.submenu-click-expand .nav > li > a {
min-height: 43px;
}

.hu-dropdown-toggle-wrapper {
position: absolute;
top: 1px;
right: 0;
text-align: center;
line-height: 1;
bottom: 1px;
}

.submenu-click-expand .hu-dropdown-toggle-wrapper {
display: block;
}

.hu-dropdown-toggle {
background: none;
-webkit-appearance: none;
outline: none;
border: none;
padding: 0;
cursor: pointer;
display: block;
height: 45px;
width: 44px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}

li li .hu-dropdown-toggle {
height: 39px;
}

.hu-dropdown-toggle i {
display: block;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
width: 100%;
font-size: 13px;
}

.submenu-click-expand .nav ul { display: none }
.submenu-click-expand .nav ul.expanded { display: block; }
li.expanded > .hu-dropdown-toggle-wrapper .fa-angle-down {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/* \test */
}
11 changes: 8 additions & 3 deletions assets/front/css/_parts/0_4_header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,7 @@ box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
}

.mobile-menu .mobile-search {
width: calc(100% - 28px);
padding: 6px 14px 15px;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 6px 14px 15px;
}
.mobile-menu .mobile-search input.search {
width: 100%
Expand Down Expand Up @@ -377,12 +376,18 @@ box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
=> Applies to mobile menu if set to topnav, main or mobile
*/
@media only screen and (max-width: 719px) {
#header .nav-container .nav li a { color: #fff; color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.06); }
#header .nav-container .nav li a { color: #fff; color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.06); }
#header .hu-dropdown-toggle { color: #fff; color: rgba(255,255,255,0.9); }
/* level 1 */
#header .nav-container .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
#header .nav-container .nav li.current_page_item > a,
#header .nav-container .nav li.current-menu-item > a,
#header .nav-container .nav li.current-post-parent > a { text-decoration: underline; background: rgba(0,0,0,0.15); color: #fff; }

#header .hu-dropdown-toggle:hover
#header .nav-container .nav li.current_page_item > .hu-dropdown-toggle,
#header .nav-container .nav li.current-menu-item > .hu-dropdown-toggle,
#header .nav-container .nav li.current-post-parent > .hu-dropdown-toggle { color: #fff }
}


Expand Down
8 changes: 7 additions & 1 deletion assets/front/css/_parts/9_0_footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,15 @@ box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); }

/* common */
#nav-footer .nav li a { color: #999; color: rgba(0,0,0,0.8); border-top: 1px solid #f2f2f2; }
#nav-footer .hu-dropdown-toggle { color: #999; color: rgba(0,0,0,0.8); }
/* level 1 */
#nav-footer .nav li > a:hover { background: #f2f2f2; color: #444; }
#nav-footer .nav li > a:hover,
#nav-footer .nav li.current_page_item > a,
#nav-footer .nav li.current-menu-item > a,
#nav-footer .nav li.current-post-parent > a { background: #f2f2f2; color: #444; }

#nav-footer .hu-dropdown-toggle:hover,
#nav-footer .nav li.current_page_item > .hu-dropdown-toggle,
#nav-footer .nav li.current-menu-item > .hu-dropdown-toggle,
#nav-footer .nav li.current-post-parent > .hu-dropdown-toggle { color: #444; }
}
19 changes: 18 additions & 1 deletion functions/class-utils-settings-map.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@ function hu_mobiles_sec() {
'section' => 'mobiles_sec',
'type' => 'checkbox',
'notice' => __( "This option is good if you want to display a perfect font-size for your headings on any mobile devices. Note : it might override the css rules previously set in your custom stylesheet." , 'hueman' )
)
),
);
}

Expand Down Expand Up @@ -796,6 +796,17 @@ function hu_header_menus_sec() {
'priority' => '110'
)
),
'mobile-submenu-click' => array(
'default' => hu_user_started_before_version( '3.3.28', '1.0.29' ) ? false : true,
'control' => 'HU_controls',
'label' => sprintf( '%1$s : %2$s', __('Mobile devices', 'hueman' ) , __( 'Expand submenus on click', 'hueman') ),
'section' => 'header_menus_sec',
'type' => 'checkbox',
'ubq_section' => array(
'section' => 'footer_design_sec',
'priority' => '18'
)
),
'mobile-search' => array(
'default' => 1,
'control' => 'HU_controls',
Expand Down Expand Up @@ -1303,6 +1314,7 @@ function hu_footer_design_sec() {
'label' => __("Use a default page menu if no menu has been assigned.", 'hueman'),
'section' => 'footer_design_sec',
'type' => 'checkbox',
'priority' => 15,
'notice' => $nav_section_desc
),
'footer-widgets' => array(
Expand All @@ -1312,6 +1324,7 @@ function hu_footer_design_sec() {
'section' => 'footer_design_sec',
'type' => 'czr_layouts',
'choices' => $this -> hu_get_footer_layout_choices(),
'priority' => 20,
'notice' => __('Recommended number of columns : 3' , 'hueman')
),
'footer-logo' => array(
Expand All @@ -1327,6 +1340,7 @@ function hu_footer_design_sec() {
//to keep the selected cropped size
'dst_width' => false,
'dst_height' => false,
'priority' => 25,
'notice' => __('Upload your custom logo image. Supported formats : .jpg, .png, .gif, svg, svgz' , 'hueman')
),
'color-footer' => array(
Expand All @@ -1337,6 +1351,7 @@ function hu_footer_design_sec() {
'type' => 'color' ,
'sanitize_callback' => 'maybe_hash_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
'priority' => 30,
'transport' => 'postMessage'
),
'copyright' => array(
Expand All @@ -1346,6 +1361,7 @@ function hu_footer_design_sec() {
'type' => 'text',
'section' => 'footer_design_sec',
'sanitize_callback' => array( $this, 'hu_sanitize_html_text_input' ),
'priority' => 35,
'notice' => __( 'Note : Html is allowed.', 'hueman')
),
'credit' => array(
Expand All @@ -1354,6 +1370,7 @@ function hu_footer_design_sec() {
'label' => __( 'Footer credit text', 'hueman'),
'type' => 'checkbox',
'section' => 'footer_design_sec',
'priority' => 40,
'transport' => 'postMessage'
),
);
Expand Down
8 changes: 7 additions & 1 deletion functions/init-front.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1099,6 +1099,8 @@ function hu_scripts() {
'desktop' => hu_normalize_stick_menu_opt( hu_get_option( 'header-desktop-sticky' ) ),
'mobile' => hu_normalize_stick_menu_opt( hu_get_option( 'header-mobile-sticky' ) )
),
'mobileSubmenuExpandOnClick' => esc_attr( hu_get_option( 'mobile-submenu-click' ) ),
'submenuTogglerIcon' => '<i class="fas fa-angle-down"></i>',
'isDevMode' => ( defined('WP_DEBUG') && true === WP_DEBUG ) || ( defined('CZR_DEV') && true === CZR_DEV ),
//AJAX
'ajaxUrl' => add_query_arg(
Expand All @@ -1113,7 +1115,11 @@ function hu_scripts() {
'on' => is_object( $started_on ) ? (array)$started_on : $started_on
),
'isWelcomeNoteOn' => $is_welcome_note_on,
'welcomeContent' => $welcome_note_content
'welcomeContent' => $welcome_note_content,
'i18n' => array(
'collapsibleExpand' => __( 'Expand', 'hueman' ),
'collapsibleCollapse' => __( 'Collapse', 'hueman' )
),
)
)//end of filter
);//wp_localize_script()
Expand Down