diff --git a/CHANGELOG.md b/CHANGELOG.md index 013a78897054365380f3ebb0a81947c9fa1209e4..582772cf148925d3706eec22966261eacad0fc60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Increased z-index of scrolling menu to appear above sections in all cases - Fixed Preview List Date/Topic/Format pattern fields to always appear inline - Added margins in date field of News Display pattern +- Modified Hero Frame subtitle to hold 100% of height ## [2.7.0] - 09/03/2020 diff --git a/patterns/molecules/header-block/css/header-component.css b/patterns/molecules/header-block/css/header-component.css index 43fc73882e189311a00935f857d9507c8f50d4e6..c6bad16e78d76637bff5226e2fc76a3ca3bfc36e 100644 --- a/patterns/molecules/header-block/css/header-component.css +++ b/patterns/molecules/header-block/css/header-component.css @@ -97,9 +97,9 @@ .cern-component-header-blocks .component-header__carousel .header-block__video { min-height: 100%; } .cern-component-header-blocks .component-header__carousel .header-block__title { - position: absolute; + position: relative; z-index: 10; - padding: 5% 10%; + padding: 0 10%; right: 0; left: 0; margin: 120px auto 0; @@ -225,7 +225,7 @@ right: 0; left: 0; margin: auto; - bottom: 30px; } + bottom: 15px; } body.has-header.toolbar-fixed .cern-component-header-blocks.component-header { height: calc(100vh - 39px); } @@ -247,49 +247,53 @@ body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .cern-comp body.has-header.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header { height: calc(100vh - 39px); } -body.has-header.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 39px); } -body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 78px); } -body.has-header.cern-toolbar .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 40px); } -@media only screen and (max-width: 767px) { - body.has-header.cern-toolbar.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); } } -body.has-header.cern-toolbar.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); } -body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); } -body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 118px); } -body.has-header.no-admin-toolbar .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 39px) !important; } - -body.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header { +body.has-header.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 39px) / 2); min-height: calc((100vh - 39px) / 2); } -body.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { +body.has-header.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 39px); } +body.has-header.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 39px) / 2); min-height: calc((100vh - 39px) / 2); } -body.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header { +body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 78px); } +body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 78px) / 2); min-height: calc((100vh - 78px) / 2); } -body.cern-toolbar .is_half_height .cern-component-header-blocks.component-header { +body.has-header.cern-toolbar .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 40px); } +body.has-header.cern-toolbar .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 40px) / 2); min-height: calc((100vh - 40px) / 2); } + body.has-header.cern-toolbar .is_half_height .cern-component-header-blocks.component-header .header-block__title { + height: 30vh; } @media only screen and (max-width: 767px) { - body.cern-toolbar.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { + body.has-header.cern-toolbar.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 79px); } + body.has-header.cern-toolbar.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 79px) / 2); min-height: calc((100vh - 79px) / 2); } } -body.cern-toolbar.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header { +body.has-header.cern-toolbar.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 79px); } +body.has-header.cern-toolbar.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 79px) / 2); min-height: calc((100vh - 79px) / 2); } -body.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { +body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 79px); } +body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 79px) / 2); min-height: calc((100vh - 79px) / 2); } -body.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header { +body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 118px); } + body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header .header-block__title { + height: 65vh; } +body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 118px) / 2); min-height: calc((100vh - 118px) / 2); } + body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header .header-block__title { + height: 30vh; } +body.has-header.no-admin-toolbar .is_full_height .cern-component-header-blocks.component-header { + height: calc(100vh - 39px) !important; } @media only screen and (max-width: 991px) and (min-width: 767px) { .cern-component-header-blocks { @@ -338,7 +342,8 @@ body.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern top: -1px; border: 1px solid; } .cern-component-header-blocks .component-header__scroll { - transform: scale(0.7, 0.7); } + transform: scale(0.7, 0.7); + bottom: 5px !important; } body:not(.has-header) .cern-component-header-blocks .component-header__carousel .header-block__title { margin: 35px auto 0; } } diff --git a/patterns/molecules/header-block/sass/header-component.scss b/patterns/molecules/header-block/sass/header-component.scss index 579a81aaeba744a7ad7ab9c6461d8212da524ab2..b189e8745fefd6d763528385a3d2320eeea0e09e 100644 --- a/patterns/molecules/header-block/sass/header-component.scss +++ b/patterns/molecules/header-block/sass/header-component.scss @@ -131,10 +131,10 @@ } &__title { - position: absolute; + position: relative; z-index: 10; // // max-width: 80%; - padding: 5% 10%; + padding: 0 10%; right: 0; left: 0; margin: 120px auto 0; @@ -198,6 +198,7 @@ &__subhead { color: white; // text-align: center; + hr { width: 135px; border-top-width: 2px; @@ -290,7 +291,7 @@ right: 0; left: 0; margin: auto; - bottom: 30px; + bottom: 15px; } } @@ -382,6 +383,8 @@ body { } // min height if is_full_height +// toolbar-vertical => mobile +// toolbar-tray-open => admin toolbar is expanded body { &.has-header { &.toolbar-fixed { @@ -394,8 +397,20 @@ body { } } } + + // 39px + .is_half_height { + .cern-component-header-blocks { + &.component-header { + //height: calc(50vh - 39px); + height: calc((100vh - 39px) / 2); + min-height: calc((100vh - 39px) / 2); + } + } + } } + // user logged in and admin toolbar is mobile &.toolbar-fixed.toolbar-vertical { // 39px @@ -406,6 +421,19 @@ body { } } } + + // 39px + .is_half_height { + .cern-component-header-blocks { + &.component-header { + //height: calc(50vh - 39px); + height: calc((100vh - 39px) / 2); + min-height: calc((100vh - 39px) / 2); + } + } + } + + } &.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open { @@ -418,8 +446,20 @@ body { } } } + + // 78px + .is_half_height { + .cern-component-header-blocks { + &.component-header { + //height: calc(50vh - 78px); + height: calc((100vh - 78px) / 2); + min-height: calc((100vh - 78px) / 2); + } + } + } } + // user not logged in &.cern-toolbar { // 40px @@ -430,6 +470,21 @@ body { } } } + + // 40px + .is_half_height { + .cern-component-header-blocks { + &.component-header { + //height: calc(50vh - 40px); + height: calc((100vh - 40px) / 2); + min-height: calc((100vh - 40px) / 2); + + .header-block__title{ + height: 30vh; + } + } + } + } } &.cern-toolbar.toolbar-vertical { @@ -443,22 +498,22 @@ body { } } } - } - } - &.cern-toolbar.toolbar-fixed { - - // 79px - .is_full_height { - .cern-component-header-blocks { - &.component-header { - height: calc(100vh - 79px); + // 79px + .is_half_height { + .cern-component-header-blocks { + &.component-header { + //height: calc(50vh - 79px); + height: calc((100vh - 79px) / 2); + min-height: calc((100vh - 79px) / 2); + } } } } + } - &.cern-toolbar.toolbar-fixed.toolbar-vertical { + &.cern-toolbar.toolbar-fixed { // 79px .is_full_height { @@ -468,96 +523,29 @@ body { } } } - } - &.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open { - - // 118px - .is_full_height { + // 79px + .is_half_height { .cern-component-header-blocks { &.component-header { - height: calc(100vh - 118px); + //height: calc(50vh - 79px); + height: calc((100vh - 79px) / 2); + min-height: calc((100vh - 79px) / 2); } } } } - &.no-admin-toolbar { + &.cern-toolbar.toolbar-fixed.toolbar-vertical { - // 39px + // 79px .is_full_height { .cern-component-header-blocks { &.component-header { - height: calc(100vh - 39px) !important; + height: calc(100vh - 79px); } } } - } - } -} - -// min height if is_half_height -body { - - //&.has-header { - &.toolbar-fixed { - - // 39px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 39px); - height: calc((100vh - 39px) / 2); - min-height: calc((100vh - 39px) / 2); - } - } - } - } - - &.toolbar-fixed.toolbar-vertical { - - // 39px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 39px); - height: calc((100vh - 39px) / 2); - min-height: calc((100vh - 39px) / 2); - } - } - } - } - - &.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open { - - // 78px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 78px); - height: calc((100vh - 78px) / 2); - min-height: calc((100vh - 78px) / 2); - } - } - } - } - - &.cern-toolbar { - - // 40px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 40px); - height: calc((100vh - 40px) / 2); - min-height: calc((100vh - 40px) / 2); - } - } - } - } - - &.cern-toolbar.toolbar-vertical { - @media only screen and (max-width: 767px) { // 79px .is_half_height { @@ -570,51 +558,52 @@ body { } } } - } - &.cern-toolbar.toolbar-fixed { + // user logged in and Admin toolbar is open + &.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open { - // 79px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 79px); - height: calc((100vh - 79px) / 2); - min-height: calc((100vh - 79px) / 2); + // 118px + .is_full_height { + .cern-component-header-blocks { + &.component-header { + height: calc(100vh - 118px); + + .header-block__title{ + height: 65vh; + } + } } } - } - } - &.cern-toolbar.toolbar-fixed.toolbar-vertical { + // 118px + .is_half_height { + .cern-component-header-blocks { + &.component-header { + //height: calc(50vh - 118px); + height: calc((100vh - 118px) / 2); + min-height: calc((100vh - 118px) / 2); - // 79px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 79px); - height: calc((100vh - 79px) / 2); - min-height: calc((100vh - 79px) / 2); + .header-block__title{ + height: 30vh; + } + } } } + } - } - &.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open { + &.no-admin-toolbar { - // 118px - .is_half_height { - .cern-component-header-blocks { - &.component-header { - //height: calc(50vh - 118px); - height: calc((100vh - 118px) / 2); - min-height: calc((100vh - 118px) / 2); + // 39px + .is_full_height { + .cern-component-header-blocks { + &.component-header { + height: calc(100vh - 39px) !important; + } } } } } - - // } } @media only screen and (max-width: 991px) and (min-width: 767px) { @@ -684,6 +673,7 @@ body { .component-header__scroll { transform: scale(0.7, 0.7); + bottom: 5px !important; } }