Skip to content
Snippets Groups Projects
Commit 39cca458 authored by Serhii Myronets's avatar Serhii Myronets
Browse files

Issue #3083877 by agami4: Update hero for the group pages, complementary... 

Issue #3083877 by agami4: Update hero for the group pages, complementary merged block, secondaty nav
parent c3df5d63
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 153 additions and 348 deletions
assets/css/brand--sky.css
+ 8
− 0
View file @ 39cca458
......@@ -6,6 +6,10 @@
color: #29abe2;
}
.socialblue--sky.path-group .cover-wrap .teaser__tag {
background: #29abe2;
}
.socialblue--sky .site-footer {
background: #fff;
color: #29abe2;
......@@ -47,3 +51,7 @@
.socialblue--sky .paragraph--featured .field--name-field-featured-link a:hover:before, .socialblue--sky .paragraph--featured .field--name-field-featured-link a:active:before, .socialblue--sky .paragraph--featured .field--name-field-featured-link a:focus:before {
background: #ffc142;
}
.socialblue--sky .phase.phase-active:before {
background-color: #29abe2;
}
assets/css/cards--sky.css
+ 59
− 38
View file @ 39cca458
......@@ -57,40 +57,35 @@
background: #fff;
}
.socialblue--sky .content-merged--sky .region--complementary-top > .card,
.socialblue--sky .content-merged--sky .region--complementary-bottom > .card {
position: relative;
.socialblue--sky .content-merged--sky .region--complementary-top > *:not(.views-exposed-form),
.socialblue--sky .content-merged--sky .region--complementary-top .off-canvas-xs-only,
.socialblue--sky .content-merged--sky .region--complementary-bottom > *:not(.views-exposed-form),
.socialblue--sky .content-merged--sky .region--complementary-bottom .off-canvas-xs-only {
-webkit-box-shadow: none;
box-shadow: none;
}
.socialblue--sky .content-merged--sky .region--complementary-top > .card:after,
.socialblue--sky .content-merged--sky .region--complementary-bottom > .card:after {
content: '';
position: absolute;
left: 1.5rem;
right: 1.5rem;
height: 2px;
margin: 0 auto;
background: #fafafa;
z-index: 1;
.socialblue--sky .content-merged--sky .region--complementary-top > *:not(.views-exposed-form),
.socialblue--sky .content-merged--sky .region--complementary-bottom > *:not(.views-exposed-form) {
position: relative;
}
.socialblue--sky .content-merged--sky .region--complementary-top > *:not(.views-exposed-form):after,
.socialblue--sky .content-merged--sky .region--complementary-bottom > *:not(.views-exposed-form):after {
top: 100%;
}
.socialblue--sky .content-merged--sky .region--complementary-top > .card:last-child:after,
.socialblue--sky .content-merged--sky .region--complementary-bottom > .card:last-child:after {
.socialblue--sky .content-merged--sky .region--complementary-top > *:not(.views-exposed-form):last-child:after,
.socialblue--sky .content-merged--sky .region--complementary-bottom > *:not(.views-exposed-form):last-child:after {
display: none;
}
.socialblue--sky .content-merged--sky .region--complementary-top > *:not(.views-exposed-form).block-group-add-idea-block,
.socialblue--sky .content-merged--sky .region--complementary-bottom > *:not(.views-exposed-form).block-group-add-idea-block {
padding: 20px;
}
.socialblue--sky .content-merged--sky .region--complementary-top + .region--complementary-bottom > .card:first-child:before {
content: '';
position: absolute;
left: 1.5rem;
right: 1.5rem;
height: 2px;
margin: 0 auto;
background: #fafafa;
z-index: 1;
bottom: 100%;
}
......@@ -100,43 +95,51 @@
box-shadow: none;
}
.socialblue--sky [class*='statistic-block'] {
.socialblue--sky .block-profile-statistic-block,
.socialblue--sky .block-group-statistic-block {
position: relative;
padding: 1rem 1.875rem 0;
background: #fafafa;
}
.socialblue--sky [class*='statistic-block'] .hero-footer__cta {
.socialblue--sky .block-profile-statistic-block .hero-footer__cta,
.socialblue--sky .block-group-statistic-block .hero-footer__cta {
position: static;
padding: 0 0 1.25rem;
margin: 0;
}
.socialblue--sky [class*='statistic-block'] .hero-footer__cta > * {
.socialblue--sky .block-profile-statistic-block .hero-footer__cta > *,
.socialblue--sky .block-group-statistic-block .hero-footer__cta > * {
width: 100%;
}
.socialblue--sky [class*='statistic-block'] .hero-footer__cta .btn {
.socialblue--sky .block-profile-statistic-block .hero-footer__cta .btn,
.socialblue--sky .block-group-statistic-block .hero-footer__cta .btn {
width: 100%;
font-weight: 700;
text-transform: uppercase;
border-width: 2px;
}
.socialblue--sky [class*='statistic-block'] .card__actionbar {
.socialblue--sky .block-profile-statistic-block .card__actionbar,
.socialblue--sky .block-group-statistic-block .card__actionbar {
padding: 1.5rem 0;
}
.socialblue--sky [class*='statistic-block'] .card__actionbar {
.socialblue--sky .block-profile-statistic-block .card__actionbar,
.socialblue--sky .block-group-statistic-block .card__actionbar {
padding-left: 0;
padding-right: 0;
}
.socialblue--sky [class*='statistic-block'].block-profile-statistic-block {
.socialblue--sky .block-profile-statistic-block.block-profile-statistic-block,
.socialblue--sky .block-group-statistic-block.block-profile-statistic-block {
padding-top: 0;
}
.socialblue--sky [class*='statistic-block'].block-profile-statistic-block .card__info-user .hero-avatar {
.socialblue--sky .block-profile-statistic-block.block-profile-statistic-block .card__info-user .hero-avatar,
.socialblue--sky .block-group-statistic-block.block-profile-statistic-block .card__info-user .hero-avatar {
border-color: #fafafa;
}
......@@ -252,10 +255,12 @@
max-width: 120px;
margin: 0;
}
.socialblue--sky [class*='statistic-block'] {
.socialblue--sky .block-profile-statistic-block,
.socialblue--sky .block-group-statistic-block {
padding: 2.5rem 2.25rem 0;
}
.socialblue--sky [class*='statistic-block'] .hero-footer__cta {
.socialblue--sky .block-profile-statistic-block .hero-footer__cta,
.socialblue--sky .block-group-statistic-block .hero-footer__cta {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
......@@ -283,16 +288,28 @@
.socialblue--sky .card--content-merged > h4 {
font-size: 1.5rem;
}
.socialblue--sky .content-merged--sky .region--complementary-top > .card:after,
.socialblue--sky .content-merged--sky .region--complementary-bottom > .card:after {
.socialblue--sky .content-merged--sky .region--complementary-top > *:not(.views-exposed-form):after,
.socialblue--sky .content-merged--sky .region--complementary-bottom > *:not(.views-exposed-form):after {
max-width: 280px;
content: '';
position: absolute;
left: 1.875rem;
right: 1.875rem;
max-width: 280px;
height: 2px;
margin: 0 auto;
background: #fafafa;
z-index: 1;
}
.socialblue--sky .content-merged--sky .region--complementary-top + .region--complementary-bottom > .card:first-child:before {
max-width: 280px;
content: '';
position: absolute;
left: 1.875rem;
right: 1.875rem;
max-width: 280px;
height: 2px;
margin: 0 auto;
background: #fafafa;
z-index: 1;
}
}
......@@ -305,11 +322,15 @@
@media (max-width: 899px) {
.socialblue--sky .content-merged--sky--complementary {
margin-bottom: 0;
border-radius: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.socialblue--sky .content-merged--sky .content-merged--sky--complementary {
margin-bottom: 0;
}
.socialblue--sky [class*='statistic-block'] {
.socialblue--sky .block-profile-statistic-block,
.socialblue--sky .block-group-statistic-block {
margin-bottom: 0;
border-radius: 0 !important;
-webkit-box-shadow: none;
......
assets/css/hero--sky.css
+ 4
− 8
View file @ 39cca458
......@@ -395,12 +395,13 @@
.socialblue--sky.path-group .cover-wrap .teaser__tag {
display: inline-block;
width: auto;
padding: 4px 11px;
margin-bottom: .875rem;
font-size: 14px;
padding: 1px 11px;
margin-bottom: 0;
font-size: .75rem;
color: #fff;
border-radius: 2px;
text-shadow: none;
text-transform: inherit;
}
.socialblue--sky.path-group .cover-wrap .teaser__tag:hover {
......@@ -562,9 +563,4 @@
.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/layout--sky.css
+ 5
− 3
View file @ 39cca458
.socialblue--sky .layout--with-complementary.sidebar-left > .region--complementary {
z-index: 10;
}
.socialblue--sky.path-user .region--hero, .socialblue--sky.path-group .region--hero {
max-width: 100%;
}
......@@ -23,9 +27,7 @@
order: 1;
}
.socialblue--sky .region--secondary-navigation {
-webkit-box-flex: 0;
-ms-flex: 0 0 1200px;
flex: 0 0 1200px;
width: 100%;
}
.socialblue--sky.path-user .layout--with-complementary .region--secondary-navigation, .socialblue--sky.path-group .layout--with-complementary .region--secondary-navigation {
display: -webkit-box;
......
assets/css/layout.css deleted 100644 → 0
+ 0
− 234
View file @ c3df5d63
.container, .region--content-top,
.region--content-bottom,
.region--hero,
.region--secondary-navigation {
position: relative;
margin-left: auto;
margin-right: auto;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.main-container {
overflow: hidden;
min-height: 100%;
min-height: calc(100vh - 50px);
padding-top: 50px;
padding-bottom: 100px;
position: relative;
width: 100%;
}
.region--title {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.region--content,
.region--content-bottom,
.region--sidebar-first,
.region--sidebar-second {
margin-top: 1rem;
}
.layout--with-complementary > .region--content {
padding-left: 1em;
padding-right: 1em;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.region--complementary {
padding-left: 1em;
padding-right: 1em;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.layout--with-two-columns .region--content,
.layout--with-two-columns .region--sidebar-first,
.layout--with-two-columns .region--sidebar-second {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding-left: 1em;
padding-right: 1em;
}
.layout--with-three-columns .region--content,
.layout--with-three-columns .region--sidebar-first,
.layout--with-three-columns .region--sidebar-second {
padding-left: 1em;
padding-right: 1em;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.region--complementary-bottom {
display: none;
}
.socialblue--sky.path-user .region--hero, .socialblue--sky.path-group .region--hero {
max-width: 100%;
}
.socialblue--sky.path-user .layout--with-complementary, .socialblue--sky.path-group .layout--with-complementary {
z-index: 2;
}
.socialblue--sky.path-user .region--complementary, .socialblue--sky.path-group .region--complementary {
position: relative;
top: 1px;
}
.socialblue--sky.path-user .region--secondary-navigation, .socialblue--sky.path-group .region--secondary-navigation {
position: relative;
z-index: 3;
}
@media (min-width: 900px) {
.container, .region--content-top,
.region--content-bottom,
.region--hero,
.region--secondary-navigation {
max-width: 1200px;
}
.region--title {
margin-top: 1rem;
}
.layout--with-complementary > .region--content {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.region--complementary {
margin-top: 1rem;
-webkit-box-flex: 0;
-ms-flex: 0 1 33.33333%;
flex: 0 1 33.33333%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
max-width: 33.33333%;
}
.layout--with-two-columns .region--content,
.layout--with-two-columns .region--sidebar-first,
.layout--with-two-columns .region--sidebar-second {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.layout--with-three-columns .region--content,
.layout--with-three-columns .region--sidebar-first,
.layout--with-three-columns .region--sidebar-second {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%;
}
.region--complementary-bottom {
display: block;
}
.region--complementary-top {
margin-top: 0;
}
.socialblue--sky .layout--with-complementary.sidebar-left > .region--complementary {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.socialblue--sky .region--secondary-navigation {
-webkit-box-flex: 0;
-ms-flex: 0 0 1200px;
flex: 0 0 1200px;
}
.socialblue--sky.path-user .layout--with-complementary .region--secondary-navigation, .socialblue--sky.path-group .layout--with-complementary .region--secondary-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin: -44px 0 0;
padding-left: 2rem;
padding-right: 1rem;
}
.socialblue--sky.path-user .region--complementary, .socialblue--sky.path-group .region--complementary {
top: -60px;
}
}
@media (min-width: 1200px) {
.layout--with-complementary > .region--content {
padding-left: 0;
}
.region--complementary {
padding-right: 0;
}
.layout--with-two-columns .region--content {
padding-left: 0;
}
.layout--with-two-columns .region--sidebar-first,
.layout--with-two-columns .region--sidebar-second {
padding-right: 0;
}
.layout--with-three-columns .region--content {
padding-left: 0;
}
.layout--with-three-columns .region--sidebar-second {
padding-right: 0;
}
.socialblue--sky .layout--with-complementary.sidebar-left > .region--complementary {
padding-right: 1rem;
padding-left: 0;
}
.socialblue--sky .layout--with-complementary.sidebar-left > .region--content {
padding-left: 1rem;
padding-right: 0;
}
.socialblue--sky.path-user .layout--with-complementary .region--secondary-navigation, .socialblue--sky.path-group .layout--with-complementary .region--secondary-navigation {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 0;
}
}
@media (max-width: 899px) {
.socialblue--sky.path-user .region--secondary-navigation, .socialblue--sky.path-group .region--secondary-navigation {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.socialblue--sky.path-user .region--complementary, .socialblue--sky.path-group .region--complementary {
padding-left: 0;
padding-right: 0;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.socialblue--sky.path-user .region--content, .socialblue--sky.path-group .region--content {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
assets/css/navbar--sky.css
+ 1
− 0
View file @ 39cca458
......@@ -19,6 +19,7 @@
.socialblue--sky .navbar-secondary .navbar-nav li a {
padding-top: 9px;
padding-bottom: 8px;
padding: 9px 20px 8px;
opacity: 1;
border-bottom-width: 3px;
}
......
assets/js/navbar-secondary--sky.min.js
+ 1
− 1
View file @ 39cca458
!function(d){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i,a){if(d(".layout--with-complementary")){var l=d(".navbar-secondary .navbar-scrollable"),e=l.find(".nav"),n=e.find("li");if(900<=d(window).width())if(e.width()>l.width()){for(var t=0,s=0;s<n.length&&(t+=d(n[s]).width(),!(l.width()-50<=t));++s)d(n[s]).addClass("visible-item");e.each(function(){var i=d(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 a=i.find(".hidden-list"),l=i.find(".caret");l.on("click",function(){a.slideToggle(300),d(this).toggleClass("active")}),d(document).on("click",function(i){d(i.target).closest(".navbar-secondary").length||(a.slideUp(300),l.removeClass("active"),i.stopPropagation())})})}else e.css("display","flex")}}}}(jQuery);
\ No newline at end of file
!function(t){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i,a){t(window).on("load",function(){if(t(".layout--with-complementary")){var i=t(".navbar-secondary .navbar-scrollable"),a=i.find(".nav"),l=a.find("li");if(900<=t(window).width())if(a.width()>i.width()){for(var n=0,e=0;e<l.length&&(n+=t(l[e]).width(),!(i.width()-50<=n));++e)t(l[e]).addClass("visible-item");a.each(function(){var i=t(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 a=i.find(".hidden-list"),l=i.find(".caret");l.on("click",function(){a.slideToggle(300),t(this).toggleClass("active")}),t(document).on("click",function(i){t(i.target).closest(".navbar-secondary").length||(a.slideUp(300),l.removeClass("active"),i.stopPropagation())})})}else a.css("display","flex")}})}}}(jQuery);
\ No newline at end of file
components/00-config/mixins/_card--sky.scss
+ 7
− 10
View file @ 39cca458
......@@ -4,18 +4,15 @@
// and disabled options for all link buttons of the card
@mixin separate-line {
content: '';
position: absolute;
left: 1.5rem;
right: 1.5rem;
height: 2px;
margin: 0 auto;
background: #fafafa;
z-index: 1;
@include for-tablet-landscape-up {
max-width: 280px;
content: '';
position: absolute;
left: 1.875rem;
right: 1.875rem;
max-width: 280px;
height: 2px;
margin: 0 auto;
background: #fafafa;
z-index: 1;
}
}
components/02-atoms/cards/cards--sky.scss
+ 12
− 3
View file @ 39cca458
......@@ -26,7 +26,6 @@
// Content Merged.
.card--content-merged {
> h4 {
margin-bottom: 1.25rem;
......@@ -74,6 +73,8 @@
.content-merged--sky--complementary {
@include for-tablet-landscape-down {
margin-bottom: 0;
border-radius: 0 !important;
box-shadow: none;
}
}
......@@ -105,9 +106,13 @@
.region--complementary-top,
.region--complementary-bottom {
> .card {
position: relative;
> *:not(.views-exposed-form),
.off-canvas-xs-only {
box-shadow: none;
}
> *:not(.views-exposed-form) {
position: relative;
&:after {
@include separate-line;
......@@ -117,6 +122,10 @@
&:last-child:after {
display: none;
}
&.block-group-add-idea-block {
padding: 20px;
}
}
}
......
components/03-molecules/navigation/navbar/navbar--sky.scss
+ 1
− 2
View file @ 39cca458
......@@ -66,8 +66,7 @@
.navbar-nav {
li {
a {
padding-top: 9px;
padding-bottom: 8px;
padding: 9px 20px 8px;
opacity: 1;
border-bottom-width: 3px;
......
components/03-molecules/navigation/navbar/navbar-secondary--sky.js
+ 40
− 39
View file @ 39cca458
......@@ -3,60 +3,61 @@
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');
$(window).on('load', function () {
if($('.layout--with-complementary')) {
var navScroll = $('.navbar-secondary .navbar-scrollable');
var navSecondary = navScroll.find('.nav');
var items = navSecondary.find('li');
if($(window).width() >= 900) {
if($(window).width() >= 900) {
if (navSecondary.width() > navScroll.width()) {
var total = 0;
if (navSecondary.width() > navScroll.width()) {
var total = 0;
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
for(var i = 0; i < items.length; ++i) {
total += $(items[i]).width();
if((navScroll.width() -50) <= total) {
break;
}
if((navScroll.width() -50) <= total) {
break;
$(items[i]).addClass('visible-item');
}
$(items[i]).addClass('visible-item');
}
navSecondary.each(function () {
var $this = $(this);
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 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" />');
// 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>');
// Add caret.
$this.append('<span class="caret"></span>');
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
var hiddenList = $this.find('.hidden-list');
var cart = $this.find('.caret');
cart.on('click', function () {
hiddenList.slideToggle(300);
$(this).toggleClass('active');
});
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();
$(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');
} else {
navSecondary.css('display', 'flex');
}
}
}
}
});
}
......
components/04-organisms/hero/hero--sky.scss
+ 4
− 9
View file @ 39cca458
......@@ -530,18 +530,13 @@
.teaser__tag {
display: inline-block;
width: auto;
padding: 4px 11px;
margin-bottom: .875rem;
font-size: 14px;
padding: 1px 11px;
margin-bottom: 0;
font-size: .75rem;
color: #fff;
border-radius: 2px;
text-shadow: none;
@include for-tablet-landscape-down {
padding-left: 7px;
padding-right: 7px;
font-size: 11px;
}
text-transform: inherit;
&:hover {
color: #fff;
......
components/05-templates/layout/layout--sky.scss
+ 3
− 1
View file @ 39cca458
......@@ -3,6 +3,8 @@
.socialblue--sky {
.layout--with-complementary.sidebar-left {
> .region--complementary {
z-index: 10;
@include for-tablet-landscape-up {
order: 1;
}
......@@ -22,7 +24,7 @@
}
.region--secondary-navigation {
@include for-tablet-landscape-up {
flex: 0 0 1200px;
width: 100%;
}
}
......
components/brand--sky.scss
+ 8
− 0
View file @ 39cca458
......@@ -11,6 +11,10 @@
color: $brand-primary;
}
&.path-group .cover-wrap .teaser__tag {
background: $brand-primary;
}
.site-footer {
background: #fff;
color: $brand-primary;
......@@ -68,4 +72,8 @@
}
}
}
.phase.phase-active:before {
background-color: $brand-primary;
}
}
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