Commit 35ece4c0 authored by Agami4's avatar Agami4
Browse files

Issue #3232123 by agami4: Add dropdown behavior for the secondary navigation by default

parent 35622f04
......@@ -15,6 +15,19 @@
height: 44px;
}
.socialblue--sky .navbar-secondary .navbar-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: scroll;
width: 100%;
text-align: center;
}
.socialblue--sky .navbar-secondary .navbar-nav li {
position: relative;
}
.socialblue--sky .navbar-secondary .navbar-nav li a, .socialblue--sky .navbar-secondary .navbar-nav li button {
position: relative;
padding: 10px 20px;
......@@ -46,19 +59,6 @@
border-bottom-color: #fff;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: scroll;
width: 100%;
text-align: center;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav li {
position: relative;
}
@media (min-width: 900px) {
.socialblue--sky .navbar-fixed-top .navbar-nav {
padding-right: 1.625rem;
......@@ -71,28 +71,18 @@
border-radius: 0 5px 0 0;
overflow: hidden;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
border-radius: 5px 5px 0 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
.socialblue--sky .navbar-secondary .navbar-nav {
display: table;
overflow: visible;
}
[dir='rtl'] .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, [dir='rtl'] .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
[dir='rtl'] .socialblue--sky .navbar-secondary .navbar-nav {
padding-right: 0;
padding-left: 40px;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav li {
.socialblue--sky .navbar-secondary .navbar-nav li {
display: table-cell;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret {
.socialblue--sky .navbar-secondary .navbar-nav .caret {
position: absolute;
top: 50%;
right: 15px;
......@@ -102,15 +92,15 @@
transform: translateY(-50%);
cursor: pointer;
}
[dir='rtl'] .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret, [dir='rtl'] .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret {
[dir='rtl'] .socialblue--sky .navbar-secondary .navbar-nav .caret {
right: auto;
left: 15px;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret.active, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret.active {
.socialblue--sky .navbar-secondary .navbar-nav .caret.active {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .visible-list, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .visible-list {
.socialblue--sky .navbar-secondary .navbar-nav .visible-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
......@@ -123,10 +113,10 @@
justify-content: center;
padding: 0 25px;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .visible-list a, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .visible-list a {
.socialblue--sky .navbar-secondary .navbar-nav .visible-list a {
display: block;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list {
.socialblue--sky .navbar-secondary .navbar-nav .hidden-list {
display: none;
position: absolute;
top: 100%;
......@@ -137,24 +127,34 @@
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
[dir='rtl'] .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list, [dir='rtl'] .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list {
[dir='rtl'] .socialblue--sky .navbar-secondary .navbar-nav .hidden-list {
right: auto;
left: 0;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li {
.socialblue--sky .navbar-secondary .navbar-nav .hidden-list li {
display: block;
text-align: left;
}
[dir='rtl'] .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li, [dir='rtl'] .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li {
[dir='rtl'] .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li {
text-align: right;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li a, .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li button, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li a, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li button {
.socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li button {
display: block;
width: 100%;
padding: .5rem 2rem;
color: #9b9b9b;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li a:focus, .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li button:focus, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li a:focus, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .hidden-list li button:focus {
.socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:focus, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li button:focus {
background: transparent;
}
.socialblue--sky.path-user .layout--with-complementary .navbar-secondary, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
border-radius: 5px 5px 0 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(v){f(window).on("load",function(){var l=f(".navbar-secondary .navbar-scrollable",v),i=l.find(".nav",v),s=i.find("li",v),a=l.width(),n=i.width();function e(){f(".layout--with-complementary")&&(900<=f(window).width()?a<n&&i.each(function(){var i=f(this),a=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var n=0;n<s.length&&(a+=f(s[n]).width(),!(l.width()-50<=a));++n)f(s[n]).addClass("visible-item");i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var e=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){e.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(e.slideUp(300),t.removeClass("active"))})}):i.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()}))}e();var t,o,r,d,c=(t=function(){e()},o=250,function(){var i=this,a=arguments,n=r&&!d;clearTimeout(d),d=setTimeout(function(){d=null,r||t.apply(i,a)},o),n&&t.apply(i,a)});window.addEventListener("resize",c)})}}}(jQuery);
\ No newline at end of file
!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(v){f(window).on("load",function(){var l=f(".navbar-secondary .navbar-scrollable",v),i=l.find(".nav",v),s=i.find("li",v),a=l.width(),n=i.width();function e(){900<=f(window).width()?a<n?i.each(function(){var i=f(this),a=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var n=0;n<s.length&&(a+=f(s[n]).width(),!(l.width()-50<=a));++n)f(s[n]).addClass("visible-item");i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var e=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){e.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(e.slideUp(300),t.removeClass("active"))})}):i.css("display","flex"):i.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()})}e();var t,r,o,d,c=(t=function(){e()},r=250,function(){var i=this,a=arguments,n=o&&!d;clearTimeout(d),d=setTimeout(function(){d=null,o||t.apply(i,a)},r),n&&t.apply(i,a)});window.addEventListener("resize",c)})}}}(jQuery);
\ No newline at end of file
......@@ -41,7 +41,28 @@
}
.navbar-nav {
display: flex;
overflow-x: scroll;
width: 100%;
text-align: center;
@include for-tablet-landscape-up {
display: table;
overflow: visible;
[dir='rtl'] & {
padding-right: 0;
padding-left: 40px;
}
}
li {
position: relative;
@include for-tablet-landscape-up {
display: table-cell;
}
a, button {
position: relative;
padding: 10px 20px;
......@@ -77,111 +98,71 @@
}
}
}
}
}
// Secondary navigation on the user/group pages.
&.path-user,
&.path-group {
.layout--with-complementary {
.navbar-secondary {
@include for-tablet-landscape-up {
flex: 0 0 (100%/1.5);
max-width: (100%/1.5);
border-radius: 5px 5px 0 0;
order: 1;
@include for-tablet-landscape-up {
.caret {
position: absolute;
top: 50%;
right: 15px;
border-width: 6px 6px 0;
border-top-color: #fff;
transform: translateY(-50%);
cursor: pointer;
[dir='rtl'] & {
right: auto;
left: 15px;
}
&.active {
transform: translateY(-50%) rotate(180deg);
}
}
.navbar-nav {
.visible-list {
display: flex;
overflow-x: scroll;
width: 100%;
text-align: center;
@include for-tablet-landscape-up {
display: table;
overflow: visible;
height: 44px;
align-items: center;
justify-content: center;
padding: 0 25px;
[dir='rtl'] & {
padding-right: 0;
padding-left: 40px;
}
a {
display: block;
}
}
li {
position: relative;
@include for-tablet-landscape-up {
display: table-cell;
}
.hidden-list {
display: none;
position: absolute;
top: 100%;
right: 0;
padding: .5rem 0 .75rem;
background: #fff;
z-index: 10;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
[dir='rtl'] & {
right: auto;
left: 0;
}
@include for-tablet-landscape-up {
.caret {
position: absolute;
top: 50%;
right: 15px;
border-width: 6px 6px 0;
border-top-color: #fff;
transform: translateY(-50%);
cursor: pointer;
[dir='rtl'] & {
right: auto;
left: 15px;
}
&.active {
transform: translateY(-50%) rotate(180deg);
}
}
.visible-list {
display: flex;
height: 44px;
align-items: center;
justify-content: center;
padding: 0 25px;
li {
display: block;
text-align: left;
a {
display: block;
}
[dir='rtl'] & {
text-align: right;
}
.hidden-list {
display: none;
position: absolute;
top: 100%;
right: 0;
padding: .5rem 0 .75rem;
background: #fff;
z-index: 10;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
[dir='rtl'] & {
right: auto;
left: 0;
}
li {
display: block;
text-align: left;
[dir='rtl'] & {
text-align: right;
}
a, button {
display: block;
width: 100%;
padding: .5rem 2rem;
color: #9b9b9b;
a, button {
display: block;
width: 100%;
padding: .5rem 2rem;
color: #9b9b9b;
&:focus {
background: transparent;
}
}
&:focus {
background: transparent;
}
}
}
......@@ -189,4 +170,19 @@
}
}
}
// Secondary navigation on the user/group pages.
&.path-user,
&.path-group {
.layout--with-complementary {
.navbar-secondary {
@include for-tablet-landscape-up {
flex: 0 0 (100%/1.5);
max-width: (100%/1.5);
border-radius: 5px 5px 0 0;
order: 1;
}
}
}
}
}
......@@ -32,78 +32,77 @@
// Secondary navigation behaviour,
function secondaryNavBehaviour() {
if($('.layout--with-complementary')) {
if($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
if($(window).width() >= 900) {
if (navSecondaryWidth > navScrollWidth) {
navSecondary.each(function () {
var $this = $(this);
var total = 0;
// Add `visible-item` class to the list items which displayed in the current secondary
// navigation width
items.removeClass('visible-item');
$this.find('.caret').remove();
navSecondary.each(function () {
var $this = $(this);
var total = 0;
if(items.parent().is('div')) {
items.unwrap();
}
// Add `visible-item` class to the list items which displayed in the current secondary
// navigation width
items.removeClass('visible-item');
$this.find('.caret').remove();
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
if(items.parent().is('div')) {
items.unwrap();
}
if((navScroll.width() - 50) <= total) {
break;
}
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
$(items[i]).addClass('visible-item');
if((navScroll.width() - 50) <= total) {
break;
}
// Create wrapper for visible items.
$this.find('li.visible-item')
.wrapAll('<div class="visible-list"></div>');
// Create wrapper for hidden items.
$this.find('li:not(.visible-item)')
.wrapAll('<div class="hidden-list card" />');
$(items[i]).addClass('visible-item');
}
// Add caret.
$this.append('<span class="caret"></span>');
// Create wrapper for visible items.
$this.find('li.visible-item')
.wrapAll('<div class="visible-list"></div>');
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
// Create wrapper for hidden items.
$this.find('li:not(.visible-item)')
.wrapAll('<div class="hidden-list card" />');
cart.on('click', function () {
hiddenList.slideToggle(300);
$(this).toggleClass('active');
});
// Add caret.
$this.append('<span class="caret"></span>');
$(document).on('click', function(event) {
event.stopPropagation();
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300);
cart.removeClass('active');
});
cart.on('click', function () {
hiddenList.slideToggle(300);
$(this).toggleClass('active');
});
}
}
else {
navSecondary.each(function () {
var $this = $(this);
// Unwrap list items.
// Remove extra classes/elements.
items.removeClass('visible-item');
$this.find('.caret').remove();
$(document).on('click', function(event) {
event.stopPropagation();
if(items.parent().is('div')) {
items.unwrap();
}
if ($(event.target).closest('.navbar-secondary').length) return;
hiddenList.slideUp(300);
cart.removeClass('active');
});
});
} else {
navSecondary.css('display', 'flex');
}
}
else {
navSecondary.each(function () {
var $this = $(this);
// Unwrap list items.
// Remove extra classes/elements.
items.removeClass('visible-item');
$this.find('.caret').remove();
if(items.parent().is('div')) {
items.unwrap();
}
});
}
}
secondaryNavBehaviour();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment