Skip to content

Commit

Permalink
Merge 7e4357c into f3ab8c3
Browse files Browse the repository at this point in the history
  • Loading branch information
@agitator
agitator committed Jun 16, 2017
2 parents f3ab8c3 + 7e4357c commit 7684a5a
Show file tree
Hide file tree
Showing 20 changed files with 417 additions and 100 deletions.
6 changes: 5 additions & 1 deletion CHANGES.rst
View file
Expand Up @@ -5,12 +5,16 @@ Changelog
3.0.2 (unreleased)
------------------

- Mobile navigation with expandable/collapsable submenu levels.
Resource registration cleanup
[agitator]

- To set global section active tab, use ``selected_portal_tab`` instead simple url comparison.
Fixes the ``Home`` tab always set active.
Fixes: #31.
[thet]

- Fix AttributeError during upgrade.
- Fix AttributeError during upgrade.
[abosio]


Expand Down
2 changes: 1 addition & 1 deletion DEVELOP.rst
View file
Expand Up @@ -9,5 +9,5 @@ To udpate/generate css from less, use the following snippet

::

lessc --modify-var="plone-link-color=#007bb1" --source-map=webcouturier.dropdownmenu-compiled.css.map dropdown.less webcouturier.dropdownmenu-compiled.css
lessc --modify-var="plone-link-color=#007bb1" --source-map=dropdownmenu-compiled.css.map dropdown.less dropdownmenu-compiled.css

9 changes: 5 additions & 4 deletions src/webcouturier/dropdownmenu/browser/dropdown_recurse.pt
View file
Expand Up @@ -20,12 +20,12 @@
use_remote_url node/useRemoteUrl | nothing;
show_children node/show_children;
children node/children;
class_has_dd python:children and ' hasDropDown' or '';
class_dropdown python:children and ' dropdown-submenu' or '';
class_has_dd python:children and ' hasDropDown' or None;
class_dropdown python:children and ' dropdown-submenu' or None;
class_position python:'menu-position-{0}'.format(repeat.node.number);
class_selected python:' selected active' if item_url in context.absolute_url() else '';
class_selected python:' selected active' if item_url in context.absolute_url() else None;
class_state string: state-${node/normalized_review_state};
class_clickable python:' noClick' if not enable_parent_clickable and children else '';"
class_clickable python:' noClick' if not enable_parent_clickable and children else None;"
class="${class_position}${class_dropdown}${class_selected}">
<a class="clearfix${class_state}${class_has_dd}${class_clickable}"
title="${node/Description}"
Expand All @@ -37,6 +37,7 @@
class="submenu_image clearfix" />
<span class="submenu_description"
tal:condition="python:enable_desc and node['Description']">${node/Description}</span>
<span tal:condition="children" class="opener"><span class="caret"></span></span>
</a>

<ul tal:condition="python: len(children) > 0 and show_children"
Expand Down
4 changes: 2 additions & 2 deletions src/webcouturier/dropdownmenu/browser/dropdown_sections.pt
View file
Expand Up @@ -43,7 +43,7 @@
class="dropdown-toggle${review_state}${class_clickable}"
role="button"
aria-haspopup="true"
aria-expanded="false">${tab/name}<span class="caret"></span></a>
aria-expanded="false">${tab/name} <span class="opener"><span class="caret"></span></span></a>
<a
tal:condition="not:subitems"
href="${href}"
Expand All @@ -52,7 +52,7 @@
class="no-dropdown${review_state}${class_clickable}">${tab/name}</a>

<tal:block tal:condition="subitems">
<ul class="submenu dropdown-menu">
<ul class="submenu dropdown-menu navTreeLevel0">
<tal:subitems tal:replace="structure subitems">
<tal:comment replace="nothing">Submenu</tal:comment>
</tal:subitems>
Expand Down
43 changes: 31 additions & 12 deletions src/webcouturier/dropdownmenu/browser/static/dropdown.js
View file
@@ -1,17 +1,36 @@
/* The following line defines global variables defined elsewhere. */
/*globals $, jQuery*/
/* globals $, jQuery, window */

jQuery(function ($) {
$('#portal-globalnav .noClick').click(function (e) {
e.preventDefault();
});
/* do not include jquery multiple times */
if (window.jQuery){
define('jquery', [], function(){
return window.jQuery;
});
}

require([
'jquery'
], function($){
'use strict';

jQuery(function ($) {
$('#portal-globalnav .noClick').click(function (e) {
e.preventDefault();
});

$('ul.nav li.dropdown').hover(function() {
$(this).closest('.dropdown-menu').stop(true, true).show();
$(this).addClass('open');
}, function() {
$(this).closest('.dropdown-menu').stop(true, true).hide();
$(this).removeClass('open');
// $('ul.nav li.dropdown').hover(function() {
// $(this).closest('.dropdown-menu').stop(true, true).show();
// $(this).addClass('open');
// }, function() {
// $(this).closest('.dropdown-menu').stop(true, true).hide();
// $(this).removeClass('open');
// });
$('ul.nav li.dropdown .opener').click(function(e) {
e.preventDefault();
$(this).toggleClass('menu-open');
$(this).parent().next('.dropdown-menu').toggleClass('menu-open');
;
});
});
});

});
154 changes: 146 additions & 8 deletions src/webcouturier/dropdownmenu/browser/static/dropdown.less
View file
@@ -1,5 +1,21 @@
//** Width of the `border` for generating carets that indicate dropdowns.
@plone-caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@plone-caret-width-large: 5px;
@plone-font-size-base: 16px;

// a { outline: 1px dotted white; margin: 0.25em; }
.plone-navbar-nav li {
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: (@plone-font-size-base * .25) dashed;
border-right: (@plone-font-size-base * .25) solid transparent;
border-left: (@plone-font-size-base * .25) solid transparent;
}
&:hover > .submenu {
display: block;
}
Expand All @@ -20,42 +36,164 @@
padding-bottom: 0;
position: absolute;
z-index: 9999;
.opener {
background: transparent;
float: right;
text-align: right;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: bottom;
border-left: (@plone-font-size-base * .25) dashed;
border-bottom: (@plone-font-size-base * .25) solid transparent;
border-top: (@plone-font-size-base * .25) solid transparent;
}
}
a {
color: white;
display: block;
line-height: 20px;
min-width: 14em;
padding: 15px 10px 15px 12px;
padding: 10px 15px 10px 15px;
position: relative;
&:hover {
background-color: #9abdd6;
text-decoration: none;
}
&:before {
margin-right: 10px;
// margin-right: 10px;
}
.submenu_image {
float: right;
}
}
// .dropdown-submenu a.hasDropDown {
// &:after {
// content: "▸";
// display: inline-block;
// position: absolute;
// right: 0;
// }
// }
li {
position: relative;
float: left;
width: 100%;
&:hover ul {
top: 0;
left: 100%;
left: -100%;
width: 100%
}
}
}
}

@media (max-width: 768px) {
.plone-navbar-nav li {
.submenu {
display: none;
.plone-navbar-collapse.in {
.opener {
background: transparent;
border: 1px solid white;
border-radius: (@plone-font-size-base * .25);
float: right;
text-align: center;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
margin-bottom: 0.2em;
vertical-align: bottom;
border-top: 0.5em dashed;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0;
}
}
.menu-open { display: block!important; }
.plone-navbar-nav {
margin: 0 -15px 0;
}
li {
&:hover > .submenu {
display: none;
}
.submenu {
.opener {
background: transparent;
border: 1px solid white;
border-radius: (@plone-font-size-base * .25);
float: right;
text-align: center;
width: @plone-font-size-base * 2;
height: @plone-font-size-base * 2;
margin-top: -(@plone-font-size-base * 0.4);
margin-right: -(@plone-font-size-base * 0.7);
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0;
margin-bottom: 0.2em;
vertical-align: bottom;
border-top: 0.5em dashed;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0;
}
}
// display: block;
position: relative;
a {
&:hover {
// background-color: unset;
}
}
li {
float: none;
&:hover ul {
top: unset;
left: unset;
}
}
}
.opener.menu-open {
> .caret {
border-top: 0;
border-right: 0.5em solid transparent;
border-left: 0.5em solid transparent;
border-bottom: 0.5em dashed;
}
}
.navTreeLevel0 .submenu_title {
padding-left: 0.5em;
}
.navTreeLevel1 .submenu_title {
padding-left: 1em;
}
.navTreeLevel2 .submenu_title {
padding-left: 1.5em;
}
.navTreeLevel3 .submenu_title {
padding-left: 2em;
}
}
&:hover > .submenu {
display: none;
.plone-navbar-nav li {
.submenu {
// display: none;
}
&:hover > .submenu {
display: unset;
}
}
}
}

0 comments on commit 7684a5a

Please sign in to comment.