Issue #3083877 by agami4: Update group page, add styles and script for...

Issue #3083877 by agami4: Update group page, add styles and script for secondary nav on the profile and group pages

assets/css/brand.css

@@ -474,6 +474,11 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
   color: #ffc142;
 }
 
+.socialblue--sky.path-group .cover-wrap .teaser__tag {
+  background-color: #29abe2;
+  color: #fff;
+}
+
 .socialblue--sky .badge-primary {
   background: #29abe2;
 }
@@ -491,6 +496,10 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
   color: #ffc142;
 }
 
+.socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:hover, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a.active, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:focus, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a.is-active {
+  color: #29abe2;
+}
+
 @media (min-width: 900px) {
   .search-take-over .form-text {
     color: #ffffff;

assets/css/cards.css

@@ -69,6 +69,7 @@ body:not(.socialblue--sky) .complementary--content-merged {
           box-shadow: none;
   -webkit-transition: .3s ease-out;
   transition: .3s ease-out;
+  font-size: .875rem;
 }
 
 .socialblue--sky .card__link--arrow:hover, .socialblue--sky .card__link--arrow:active, .socialblue--sky .card__link--arrow:focus {
@@ -298,7 +299,7 @@ body:not(.socialblue--sky) .complementary--content-merged {
 
 .socialblue--sky [class*='statistic-block'] {
   position: relative;
-  padding: 1rem 1.875rem;
+  padding: 1rem 1.875rem 0;
   background: #fafafa;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -322,13 +323,12 @@ body:not(.socialblue--sky) .complementary--content-merged {
 }
 
 .socialblue--sky [class*='statistic-block'] .card__actionbar {
-  padding-left: 0;
-  padding-right: 0;
+  padding: 1.5rem 0;
 }
 
-.socialblue--sky [class*='statistic-block'] > *:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
+.socialblue--sky [class*='statistic-block'] .card__actionbar {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .socialblue--sky [class*='statistic-block'].block-profile-statistic-block {
@@ -502,6 +502,12 @@ body:not(.socialblue--sky) .complementary--content-merged {
 }
 
 @media (max-width: 899px) {
+  .socialblue--sky .complementary--content-merged {
+    margin-bottom: 0;
+  }
+  .socialblue--sky .content-merged .complementary--content-merged {
+    margin-bottom: 0;
+  }
   .socialblue--sky [class*='statistic-block'] {
     margin-bottom: 0;
     border-radius: 0 !important;

assets/css/comment.css

@@ -60,6 +60,11 @@
   text-transform: uppercase;
 }
 
+.socialblue--sky .comment__actions.open .btn-icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
 @media (min-width: 900px) {
   .socialblue--sky [id='section-comments'] .card__block {
     padding-left: 3.75rem;

assets/css/dropdown.css

@@ -13,6 +13,19 @@
   color: #777;
 }
 
+.socialblue--sky .dropdown.open .caret,
+.socialblue--sky .enroll-action-form.open .caret,
+.socialblue--sky .hero-footer__cta .open .caret,
+.socialblue--sky .social-gtranslate-list--desktop.open > a:after {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+.socialblue--sky .social-gtranslate-list--desktop.open > a:after {
+  margin-top: -.4rem;
+  right: auto;
+}
+
 @media (max-width: 599px) {
   .dropdown.has-alert > a:before {
     background-color: #ffc142;

assets/css/hero--sky.css

@@ -335,6 +335,54 @@
 
 .socialblue--sky.path-user .cover-wrap, .socialblue--sky.path-group .cover-wrap {
   max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.socialblue--sky.path-group .cover-wrap {
+  padding: 0 2.25rem;
+}
+
+.socialblue--sky.path-group .cover-wrap .page-title {
+  width: 100%;
+  max-width: 100%;
+  text-align: left;
+}
+
+.socialblue--sky.path-group .cover-wrap h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 32px;
+  text-shadow: none;
+  margin: 0;
+}
+
+.socialblue--sky.path-group .cover-wrap .teaser__tag {
+  display: inline-block;
+  width: auto;
+  padding: 4px 11px;
+  margin-bottom: .875rem;
+  font-size: 14px;
+  color: #fff;
+  border-radius: 2px;
+  text-shadow: none;
+}
+
+.socialblue--sky.path-group .cover-wrap .teaser__tag:hover {
+  color: #fff;
+}
+
+.socialblue--sky.path-group .cover-wrap .hero-footer {
+  padding-top: 0;
+}
+
+.socialblue--sky.path-group .cover-wrap .hero-footer__text {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 100%;
+          flex: 0 0 100%;
+  max-width: 100%;
+  margin: 0;
+  text-align: left;
 }
 
 @media (min-width: 600px) {
@@ -447,6 +495,10 @@
   .socialblue--sky main:not(.is-navbar-secondary) .hero__full .hero-footer__bottom {
     padding-bottom: 20px;
   }
+  .socialblue--sky.path-group .cover-wrap h1 {
+    font-size: 2.25rem;
+    line-height: 1.4;
+  }
 }
 
 @media (max-width: 599px) {
@@ -469,4 +521,9 @@
   .socialblue--sky.path-user .cover-wrap {
     min-height: 160px;
   }
+  .socialblue--sky.path-group .cover-wrap .teaser__tag {
+    padding-left: 7px;
+    padding-right: 7px;
+    font-size: 11px;
+  }
 }

assets/css/navbar.css

@@ -140,9 +140,26 @@
           box-shadow: none;
 }
 
+.socialblue--sky .navbar-secondary .navbar-scrollable {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 44px;
+}
+
+.socialblue--sky .navbar-secondary .navbar-nav {
+  width: 100%;
+  display: table;
+  text-align: center;
+}
+
+.socialblue--sky .navbar-secondary .navbar-nav li {
+  display: table-cell;
+}
+
 .socialblue--sky .navbar-secondary .navbar-nav li a {
-  padding-top: 8px;
-  padding-bottom: 9px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   border: none;
   font-size: .875rem;
   font-weight: 700;
@@ -150,7 +167,7 @@
   opacity: 1;
 }
 
-.socialblue--sky .navbar-secondary .navbar-nav li a:hover, .socialblue--sky .navbar-secondary .navbar-nav li a:active, .socialblue--sky .navbar-secondary .navbar-nav li a:focus {
+.socialblue--sky .navbar-secondary .navbar-nav li a:hover, .socialblue--sky .navbar-secondary .navbar-nav li a:active, .socialblue--sky .navbar-secondary .navbar-nav li a:focus, .socialblue--sky .navbar-secondary .navbar-nav li a.is-active {
   background: transparent;
   color: #fff;
 }
@@ -193,10 +210,71 @@
         -ms-flex-order: 1;
             order: 1;
   }
+  .socialblue--sky .navbar-secondary .navbar-scrollable {
+    border-radius: 0 5px 0 0;
+    overflow: visible;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav li {
+    position: relative;
+  }
   .socialblue--sky .navbar-secondary .navbar-nav li a {
     padding-right: 20px;
     padding-left: 20px;
   }
+  .socialblue--sky .navbar-secondary .navbar-nav .caret {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    border-width: 6px 6px 0;
+    border-top-color: #fff;
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+    cursor: pointer;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .caret.active {
+    -webkit-transform: translateY(-50%) rotate(180deg);
+            transform: translateY(-50%) rotate(180deg);
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .visible-list {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 44px;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    padding: 0 25px;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .visible-list a {
+    display: block;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .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;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li {
+    display: block;
+    text-align: left;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a {
+    display: block;
+    width: 100%;
+    padding: .5rem 2rem;
+    color: #9b9b9b;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:focus {
+    background: transparent;
+  }
 }
 
 @media (max-width: 599px) {
@@ -239,4 +317,32 @@
     color: #4d4d4d;
     background-color: #777;
   }
+  .socialblue--sky .navbar-secondary .navbar-scrollable:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 24px;
+    height: 100%;
+    top: 0;
+    right: 0;
+    z-index: 2;
+  }
+  .socialblue--sky .navbar-secondary .navbar-scrollable .navbar-nav {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
 }

assets/css/preview.css

@@ -981,6 +981,7 @@ body:not(.socialblue--sky) .complementary--content-merged {
           box-shadow: none;
   -webkit-transition: .3s ease-out;
   transition: .3s ease-out;
+  font-size: .875rem;
 }
 
 .socialblue--sky .card__link--arrow:hover, .socialblue--sky .card__link--arrow:active, .socialblue--sky .card__link--arrow:focus {
@@ -1210,7 +1211,7 @@ body:not(.socialblue--sky) .complementary--content-merged {
 
 .socialblue--sky [class*='statistic-block'] {
   position: relative;
-  padding: 1rem 1.875rem;
+  padding: 1rem 1.875rem 0;
   background: #fafafa;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -1234,13 +1235,12 @@ body:not(.socialblue--sky) .complementary--content-merged {
 }
 
 .socialblue--sky [class*='statistic-block'] .card__actionbar {
-  padding-left: 0;
-  padding-right: 0;
+  padding: 1.5rem 0;
 }
 
-.socialblue--sky [class*='statistic-block'] > *:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
+.socialblue--sky [class*='statistic-block'] .card__actionbar {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .socialblue--sky [class*='statistic-block'].block-profile-statistic-block {
@@ -1681,9 +1681,26 @@ html.js .input-group-addon .glyphicon.glyphicon-spin {
           box-shadow: none;
 }
 
+.socialblue--sky .navbar-secondary .navbar-scrollable {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 44px;
+}
+
+.socialblue--sky .navbar-secondary .navbar-nav {
+  width: 100%;
+  display: table;
+  text-align: center;
+}
+
+.socialblue--sky .navbar-secondary .navbar-nav li {
+  display: table-cell;
+}
+
 .socialblue--sky .navbar-secondary .navbar-nav li a {
-  padding-top: 8px;
-  padding-bottom: 9px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   border: none;
   font-size: .875rem;
   font-weight: 700;
@@ -1691,7 +1708,7 @@ html.js .input-group-addon .glyphicon.glyphicon-spin {
   opacity: 1;
 }
 
-.socialblue--sky .navbar-secondary .navbar-nav li a:hover, .socialblue--sky .navbar-secondary .navbar-nav li a:active, .socialblue--sky .navbar-secondary .navbar-nav li a:focus {
+.socialblue--sky .navbar-secondary .navbar-nav li a:hover, .socialblue--sky .navbar-secondary .navbar-nav li a:active, .socialblue--sky .navbar-secondary .navbar-nav li a:focus, .socialblue--sky .navbar-secondary .navbar-nav li a.is-active {
   background: transparent;
   color: #fff;
 }
@@ -1845,6 +1862,11 @@ html.js .input-group-addon .glyphicon.glyphicon-spin {
   text-transform: uppercase;
 }
 
+.socialblue--sky .comment__actions.open .btn-icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
 .cover {
   color: white;
   background-color: #29abe2;
@@ -2437,6 +2459,11 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
   color: #ffc142;
 }
 
+.socialblue--sky.path-group .cover-wrap .teaser__tag {
+  background-color: #29abe2;
+  color: #fff;
+}
+
 .socialblue--sky .badge-primary {
   background: #29abe2;
 }
@@ -2454,6 +2481,10 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
   color: #ffc142;
 }
 
+.socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:hover, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a.active, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:focus, .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a.is-active {
+  color: #29abe2;
+}
+
 @media (min-width: 600px) {
   .socialblue--sky .card__content-merged .content-merged__list {
     -webkit-box-orient: horizontal;
@@ -2571,10 +2602,71 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
         -ms-flex-order: 1;
             order: 1;
   }
+  .socialblue--sky .navbar-secondary .navbar-scrollable {
+    border-radius: 0 5px 0 0;
+    overflow: visible;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav li {
+    position: relative;
+  }
   .socialblue--sky .navbar-secondary .navbar-nav li a {
     padding-right: 20px;
     padding-left: 20px;
   }
+  .socialblue--sky .navbar-secondary .navbar-nav .caret {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    border-width: 6px 6px 0;
+    border-top-color: #fff;
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+    cursor: pointer;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .caret.active {
+    -webkit-transform: translateY(-50%) rotate(180deg);
+            transform: translateY(-50%) rotate(180deg);
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .visible-list {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 44px;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    padding: 0 25px;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .visible-list a {
+    display: block;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .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;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li {
+    display: block;
+    text-align: left;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a {
+    display: block;
+    width: 100%;
+    padding: .5rem 2rem;
+    color: #9b9b9b;
+  }
+  .socialblue--sky .navbar-secondary .navbar-nav .hidden-list li a:focus {
+    background: transparent;
+  }
   .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
     border-bottom: 2px solid #29abe2;
   }
@@ -2623,6 +2715,12 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
 }
 
 @media (max-width: 899px) {
+  .socialblue--sky .complementary--content-merged {
+    margin-bottom: 0;
+  }
+  .socialblue--sky .content-merged .complementary--content-merged {
+    margin-bottom: 0;
+  }
   .socialblue--sky [class*='statistic-block'] {
     margin-bottom: 0;
     border-radius: 0 !important;
@@ -2650,6 +2748,34 @@ html:not(.js) .navbar-default .dropdown:focus > a .navbar-nav__icon, html:not(.j
     color: #4d4d4d;
     background-color: #777;
   }
+  .socialblue--sky .navbar-secondary .navbar-scrollable:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 24px;
+    height: 100%;
+    top: 0;
+    right: 0;
+    z-index: 2;
+  }
+  .socialblue--sky .navbar-secondary .navbar-scrollable .navbar-nav {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
   .socialblue--sky .teaser__tag {
     font-size: .75rem;
   }

assets/js/navbar-secondary--sky.min.js

+!function(o){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i,l){if(o(".layout--with-complementary")){var a=o(".navbar-secondary .navbar-scrollable"),e=a.find(".nav"),n=e.find("li");if(console.log(1),900<=o(window).width())if(console.log(e.width()),console.log(a.width()),e.width()>a.width()){for(var s=0,t=0;t<n.length&&(s+=o(n[t]).width(),!(a.width()-50<=s));++t)o(n[t]).addClass("visible-item");e.each(function(){var i=o(this);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 l=i.find(".hidden-list"),a=i.find(".caret");a.on("click",function(){l.slideToggle(300),o(this).toggleClass("active")}),o(document).on("click",function(i){o(i.target).closest(".navbar-secondary").length||(l.slideUp(300),a.removeClass("active"),i.stopPropagation())})})}else e.css("display","flex")}}}}(jQuery);
\ No newline at end of file

components/02-atoms/cards/cards.scss

@@ -141,6 +141,7 @@ body:not(.socialblue--sky) {
 
   .card__link--arrow {
     @include btn-link__arrow(18px, 18px, 5px, 2px);
+    font-size: .875rem;
   }
 
   section:not(.content-merged) {
@@ -175,6 +176,7 @@ body:not(.socialblue--sky) {
 
   // Content Merged.
   .card__content-merged {
+
     > h4 {
       margin-bottom: 1.25rem;
 
@@ -219,6 +221,12 @@ body:not(.socialblue--sky) {
   }
 
   // Content merged for Sidebar.
+  .complementary--content-merged {
+    @include for-tablet-landscape-down {
+      margin-bottom: 0;
+    }
+  }
+
   .content-merged {
     .region--complementary {
       .card {
@@ -239,6 +247,10 @@ body:not(.socialblue--sky) {
 
     .complementary--content-merged {
       background: #fff;
+
+      @include for-tablet-landscape-down {
+        margin-bottom: 0;
+      }
     }
 
     .region--complementary-top,
@@ -269,7 +281,7 @@ body:not(.socialblue--sky) {
   // Statistic block.
   [class*='statistic-block'] {
     position: relative;
-    padding: 1rem 1.875rem;
+    padding: 1rem 1.875rem 0;
     background: #fafafa;
     box-shadow: none;
 
@@ -306,6 +318,10 @@ body:not(.socialblue--sky) {
       }
     }
 
+    .card__actionbar {
+      padding: 1.5rem 0;
+    }
+
     //.btn-group__chellange {
     //  > div {
     //    display: flex;
@@ -329,11 +345,6 @@ body:not(.socialblue--sky) {
       padding-right: 0;
     }
 
-    > *:last-child {
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-
     &.block-profile-statistic-block {
       padding-top: 0;
 

components/03-molecules/dropdown/dropdown.scss

@@ -32,3 +32,20 @@
     }
   }
 }
+
+// Behaviors arrow on the dropdown menu
+.socialblue--sky {
+  .dropdown.open .caret,
+  .enroll-action-form.open .caret,
+  .hero-footer__cta .open .caret,
+  .social-gtranslate-list--desktop.open > a:after {
+    transform: rotate(180deg);
+  }
+
+  .social-gtranslate-list--desktop.open {
+    > a:after {
+      margin-top: -.4rem;
+      right: auto;
+    }
+  }
+}

components/03-molecules/navigation/navbar/navbar-secondary--sky.js

+(function ($) {
+
+  Drupal.behaviors.navbarSecondaryScrollable = {
+    attach: function (context, settings) {
+
+      if($('.layout--with-complementary')) {
+        var navScroll = $('.navbar-secondary .navbar-scrollable');
+        var navSecondary = navScroll.find('.nav');
+        var items = navSecondary.find('li');
+
+        console.log(1);
+
+        if($(window).width() >= 900) {
+
+          console.log(navSecondary.width());
+          console.log(navScroll.width());
+
+          if (navSecondary.width() > navScroll.width()) {
+            var total = 0;
+
+            for(var i = 0; i < items.length; ++i) {
+              total += $(items[i]).width();
+
+              if((navScroll.width() -50) <= total) {
+                break;
+              }
+              
+              $(items[i]).addClass('visible-item');
+            }
+
+            navSecondary.each(function () {
+              var $this = $(this);
+
+              // 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" />');
+
+              // Add caret.
+              $this.append('<span class="caret"></span>');
+
+              var hiddenList = $this.find('.hidden-list');
+              var cart = $this.find('.caret');
+
+              cart.on('click', function () {
+                hiddenList.slideToggle(300);
+                $(this).toggleClass('active');
+              });
+
+              $(document).on('click', function(event) {
+                if ($(event.target).closest('.navbar-secondary').length) return;
+                hiddenList.slideUp(300);
+                cart.removeClass('active');
+                event.stopPropagation();
+              });
+            });
+          } else {
+            navSecondary.css('display', 'flex');
+          }
+        }
+      }
+
+    }
+
+  };
+
+})(jQuery);

components/03-molecules/navigation/navbar/navbar.scss

@@ -311,11 +311,58 @@
       order: 1;
     }
 
+    .navbar-scrollable {
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+      height: 44px;
+
+      @include for-tablet-landscape-up {
+        border-radius: 0 $border-radius-extrasmall 0 0;
+        overflow: visible;
+      }
+
+      @include for-tablet-landscape-down {
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          width: 24px;
+          height: 100%;
+          top: 0;
+          right: 0;
+          z-index: 2;
+        }
+
+        .navbar-nav {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          user-select: none;
+          overflow-x: scroll;
+          overflow-y: hidden;
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+
     .navbar-nav {
+      width: 100%;
+      display: table;
+      text-align: center;
+
       li {
+        display: table-cell;
+
+        @include for-tablet-landscape-up {
+          position: relative;
+        }
+
         a {
-          padding-top: 8px;
-          padding-bottom: 9px;
+          padding-top: 10px;
+          padding-bottom: 10px;
           border: none;
           font-size: .875rem;
           font-weight: 700;
@@ -329,7 +376,8 @@
 
           &:hover,
           &:active,
-          &:focus {
+          &:focus,
+          &.is-active {
             background: transparent;
             color: #fff;
           }
@@ -341,6 +389,62 @@
           }
         }
       }
+
+      @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;
+
+          &.active {
+            transform: translateY(-50%) rotate(180deg);
+          }
+        }
+
+        .visible-list {
+          display: flex;
+          height: 44px;
+          align-items: center;
+          justify-content: center;
+          padding: 0 25px;
+
+          a {
+            display: block;
+          }
+        }
+
+        .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;
+
+          li {
+            display: block;
+            text-align: left;
+
+            a {
+              display: block;
+              width: 100%;
+              padding: .5rem 2rem;
+              color: #9b9b9b;
+
+              &:focus {
+                background: transparent;
+              }
+            }
+          }
+        }
+      }
     }
   }
 

components/04-organisms/comment/comment.scss

@@ -80,4 +80,10 @@
       margin-right: 1rem;
     }
   }
+
+  .comment__actions.open {
+    .btn-icon {
+      transform: rotate(180deg);
+    }
+  }
 }

components/04-organisms/hero/hero--sky.scss

@@ -466,6 +466,65 @@
   &.path-group {
     .cover-wrap {
       max-width: 1200px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  &.path-group {
+    .cover-wrap {
+      padding: 0 2.25rem;
+
+      .page-title {
+        width: 100%;
+        max-width: 100%;
+        text-align: left;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        line-height: 32px;
+        text-shadow: none;
+        margin: 0;
+
+        @include for-tablet-landscape-up {
+          font-size: 2.25rem;
+          line-height: 1.4;
+        }
+      }
+
+      .teaser__tag {
+        display: inline-block;
+        width: auto;
+        padding: 4px 11px;
+        margin-bottom: .875rem;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 2px;
+        text-shadow: none;
+
+        @include for-tablet-landscape-down {
+          padding-left: 7px;
+          padding-right: 7px;
+          font-size: 11px;
+        }
+
+        &:hover {
+          color: #fff;
+        }
+      }
+
+      .hero-footer {
+        padding-top: 0;
+      }
+
+      .hero-footer__text {
+        flex: 0 0 100%;
+        max-width: 100%;
+        margin: 0;
+        text-align: left;
+      }
     }
   }
 }

components/brand.scss

@@ -584,6 +584,15 @@ html:not(.js) .navbar-default {
     }
   }
 
+  &.path-group {
+    .cover-wrap {
+      .teaser__tag {
+        background-color: $brand-primary;
+        color: #fff;
+      }
+    }
+  }
+
   .badge-primary {
     background: $brand-primary;
   }
@@ -606,4 +615,19 @@ html:not(.js) .navbar-default {
       }
     }
   }
+
+  .navbar-secondary {
+    .navbar-nav {
+      .hidden-list {
+        li a {
+          &:hover,
+          &.active,
+          &:focus,
+          &.is-active {
+            color: $brand-primary;
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

socialblue.info.yml

@@ -10,6 +10,7 @@ core: 8.x
 libraries:
   - socialblue/brand
   - socialblue/site-footer
+  - socialblue/nav-secondary--sky
 
 libraries-extend:
   socialbase/base:

socialblue.libraries.yml

@@ -124,6 +124,10 @@ navbar:
     theme:
       assets/css/navbar.css: {}
 
+nav-secondary--sky:
+  js:
+    assets/js/navbar-secondary--sky.min.js: {}
+
 pagination:
   css:
     theme:

templates/group/group--statistic--sky.html.twig

@@ -33,7 +33,7 @@
 
 {% if group_stream_url %}
   <footer class="card__actionbar">
-    <a href="{{ group_stream_url }}" class="card__link card__link-arrow">
+    <a href="{{ group_stream_url }}" class="card__link card__link--arrow">
       {% trans %}See group stream{% endtrans %}
     </a>
   </footer>