Skip to content

Commit

Permalink
Header 1st round [TMZ-74](#58)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mserino
mserino authored Nov 12, 2024
1 parent 35f9746 commit 2f8910e
Show file tree
Hide file tree
Showing 7 changed files with 279 additions and 98 deletions.
20 changes: 11 additions & 9 deletions modules/template-parts/assets/js/hello-plus-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,24 +131,26 @@ class elementorHelloPlusHeaderHandler {

toggleSubMenu( event ) {
event.preventDefault();
const subMenu = event.target.nextElementSibling;
const itemTarget = event.target;
const target = event.target;
const isSvg = target.classList.contains( 'ehp-header__submenu-toggle-icon' );
const targetItem = isSvg ? target.parentElement : target;
const subMenu = isSvg ? target.parentElement.nextElementSibling : target.nextElementSibling;
const ariaHidden = subMenu.getAttribute( 'aria-hidden' );

if ( 'true' === ariaHidden ) {
this.openSubMenu( itemTarget, subMenu );
this.openSubMenu( targetItem, subMenu );
} else {
this.closeSubMenu( itemTarget, subMenu );
this.closeSubMenu( targetItem, subMenu );
}
}

openSubMenu( itemTarget, subMenu ) {
itemTarget.setAttribute( 'aria-expanded', 'true' );
openSubMenu( targetItem, subMenu ) {
targetItem.setAttribute( 'aria-expanded', 'true' );
subMenu.setAttribute( 'aria-hidden', 'false' );
}

closeSubMenu( itemTarget, subMenu ) {
itemTarget.setAttribute( 'aria-expanded', 'false' );
closeSubMenu( targetItem, subMenu ) {
targetItem.setAttribute( 'aria-expanded', 'false' );
subMenu.setAttribute( 'aria-hidden', 'true' );
}

Expand Down Expand Up @@ -207,5 +209,5 @@ class elementorHelloPlusHeaderHandler {
}

window.addEventListener( 'elementor/frontend/init', () => {
elementorFrontend.hooks.addAction( 'frontend/element_ready/header.default', () => new elementorHelloPlusHeaderHandler() );
elementorFrontend.hooks.addAction( 'frontend/element_ready/ehp-header.default', () => new elementorHelloPlusHeaderHandler() );
} );
121 changes: 94 additions & 27 deletions modules/template-parts/assets/scss/hello-plus-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
--header-button-icon-size: var(--header-button-primary-icon-size);

--header-toggle-icon-color: #555963;
--header-toggle-icon-color-active: #555963;
--header-toggle-icon-size: 22px;

--header-menu-item-color: #555963;
Expand Down Expand Up @@ -95,6 +96,7 @@

--header-dropdown-text-align: flex-start;
--header-dropdown-divider-color: #E0E1E2;
--header-dropdown-divider-width: 1px;

--header-box-padding-block-start: 16px;
--header-box-padding-block-end: 16px;
Expand All @@ -117,6 +119,10 @@
&.has-behavior-float {
--header-float-offset: 16px;
--header-float-width: 1140px;

&.has-box-border {
border: var(--header-box-border-width) solid var(--header-box-border-color);
}
}

&.has-behavior-onscroll-always,
Expand All @@ -139,30 +145,42 @@
}
}

& .has-shape,
&.has-align-link {

&-center {

.ehp-header__site-link {
grid-area: center;
justify-content: center;
}
}
}

&.has-shape {

&-default {
border-radius: $submenu-shape-default;
}

&-sharp {
border-radius: $corners-shape-sharp;
border-radius: $submenu-shape-sharp;
}

&-rounded {
border-radius: $corners-shape-rounded;
border-radius: $submenu-shape-rounded;
}

&-round {
border-radius: $corners-shape-round;
}

&-default {
border-radius: $corners-shape-default;
border-radius: $submenu-shape-round;
}
}

&__elements-container {
display: flex;
display: grid;
grid-template-areas:
"start center end";
grid-template-columns: repeat(3, 1fr);
flex-grow: 1;
justify-content: space-between;
position: relative;

& > .ehp-header__ctas-container {
Expand All @@ -174,8 +192,6 @@
&__site-link {
align-items: center;
display: flex;
order: var(--header-logo-order);
justify-content: var(--header-logo-order);

img {
width: var(--header-logo-width);
Expand Down Expand Up @@ -209,6 +225,12 @@
transition: $transition;
}

svg {
fill: currentColor;
height: 1em; // height is relative to the font-size
width: 1em; // width is relative to the font-size
}

&.has-border {
border-color: var(--header-button-border-color);
border-style: solid;
Expand Down Expand Up @@ -244,6 +266,25 @@
}
}

&.has-shape {

&-sharp {
border-radius: $corners-shape-sharp;
}

&-rounded {
border-radius: $corners-shape-rounded;
}

&-round {
border-radius: $corners-shape-round;
}

&-default {
border-radius: $corners-shape-default;
}
}

&--secondary {
--header-button-text-color: var(--header-button-secondary-text-color);
--header-button-text-color-hover: var(--header-button-secondary-text-color-hover);
Expand Down Expand Up @@ -285,6 +326,7 @@
cursor: pointer;
display: none;
grid-area: end;
justify-content: flex-end;
order: 3;
padding: 0;

Expand All @@ -299,6 +341,11 @@
width: var(--header-toggle-icon-size);
}

.ehp-header__toggle-icon--close {
color: var(--header-toggle-icon-color-active);
fill: var(--header-toggle-icon-color-active);
}

i {
color: var(--header-toggle-icon-color);
font-size: var(--header-toggle-icon-size);
Expand Down Expand Up @@ -481,16 +528,22 @@

&.scroll-down {
transition: $transition;

.ehp-header__site-link img {
width: var(--header-logo-width-sticky);
transition: $transition;

&.has-behavior-sticky-scale-logo {

.ehp-header__site-link img {
width: var(--header-logo-width-sticky);
transition: $transition;
}
}

.ehp-header__site-title {
font-size: var(--header-title-size-sticky);
font-weight: var(--header-title-weight-sticky);
transition: $transition;
&.has-behavior-sticky-scale-title {

.ehp-header__site-title {
font-size: var(--header-title-size-sticky);
font-weight: var(--header-title-weight-sticky);
transition: $transition;
}
}
}
}
Expand All @@ -517,8 +570,6 @@
left: calc(-1 * var(--header-box-padding-inline-start));
padding-block-start: var(--header-box-padding-block-start);
padding-block-end: var(--header-box-padding-block-end);
padding-inline-start: var(--header-box-padding-inline-start);
padding-inline-end: var(--header-box-padding-inline-end);
position: absolute;
top: calc(100% + var(--header-box-padding-block-end));
width: calc(100% + var(--header-box-padding-inline-start) + var(--header-box-padding-inline-end));
Expand All @@ -542,11 +593,13 @@
align-items: var(--header-dropdown-text-align);
display: flex;
flex-direction: column;
padding-inline-start: var(--header-box-padding-inline-start);
padding-inline-end: var(--header-box-padding-inline-end);

&.has-responsive-divider {

& > .menu-item {
border-bottom: 1px solid var(--header-dropdown-divider-color);
border-bottom: var(--header-dropdown-divider-width) solid var(--header-dropdown-divider-color);
padding-block-end: var(--header-menu-item-spacing);
width: 100%;

Expand All @@ -557,6 +610,15 @@
}
}
}

&__ctas-container.has-responsive-width-default {
padding-inline-start: var(--header-box-padding-inline-start);
padding-inline-end: var(--header-box-padding-inline-end);
}
}

.menu-item {
justify-content: var(--header-dropdown-text-align);
}

.menu-item.menu-item-has-children {
Expand All @@ -569,12 +631,21 @@
& .ehp-header__dropdown-toggle[aria-expanded="true"] {
margin-bottom: var(--header-menu-item-spacing);
}

}
}

@mixin responsive_styles_desktop {

&.has-align-link-start {

.ehp-header__navigation {
justify-content: center;
}
}

.ehp-header {

&__navigation {
align-items: center;
background: none !important; // Override the default background color
Expand All @@ -585,10 +656,6 @@
}
}

&__ghost-element {
display: none;
}

&__dropdown {
padding: 16px 32px;

Expand Down
4 changes: 2 additions & 2 deletions modules/template-parts/classes/render/widget-footer-render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ public function render(): void {
$this->maybe_add_advanced_attributes();

?>
<div <?php $this->widget->print_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<footer <?php $this->widget->print_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<div class="ehp-footer__row">
<?php
$this->render_side_content();
Expand All @@ -50,7 +50,7 @@ public function render(): void {
?>
</div>
<?php $this->render_copyright(); ?>
</div>
</footer>
<?php
}

Expand Down
30 changes: 27 additions & 3 deletions modules/template-parts/classes/render/widget-header-render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ public function render(): void {
$behavior_float = $this->settings['behavior_float'];
$behavior_float_shape = $this->settings['behavior_float_shape'];
$behavior_on_scroll = $this->settings['behavior_onscroll_select'];
$align_logo = $this->settings['style_align_logo'];
$align_title = $this->settings['style_align_title'];
$behavior_scale_logo = $this->settings['behavior_sticky_scale_logo'];
$behavior_scale_title = $this->settings['behavior_sticky_scale_title'];

if ( ! empty( $navigation_breakpoint ) ) {
$layout_classnames .= ' has-navigation-breakpoint-' . $navigation_breakpoint;
Expand All @@ -47,6 +51,14 @@ public function render(): void {
$layout_classnames .= ' has-behavior-float';
}

if ( 'yes' === $behavior_scale_logo ) {
$layout_classnames .= ' has-behavior-sticky-scale-logo';
}

if ( 'yes' === $behavior_scale_title ) {
$layout_classnames .= ' has-behavior-sticky-scale-title';
}

if ( ! empty( $behavior_float_shape ) ) {
$layout_classnames .= ' has-shape-' . $behavior_float_shape;
}
Expand All @@ -55,6 +67,14 @@ public function render(): void {
$layout_classnames .= ' has-behavior-onscroll-' . $behavior_on_scroll;
}

if ( ! empty( $align_logo ) ) {
$layout_classnames .= ' has-align-link-' . $align_logo;
}

if ( ! empty( $align_title ) ) {
$layout_classnames .= ' has-align-link-' . $align_title;
}

$render_attributes = [
'class' => $layout_classnames,
'data-scroll-behavior' => $behavior_on_scroll,
Expand All @@ -66,15 +86,15 @@ public function render(): void {
$this->maybe_add_advanced_attributes();

?>
<div <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
<header <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
<div class="ehp-header__elements-container">
<?php
$this->render_site_link();
$this->render_navigation();
$this->render_ctas_container();
?>
</div>
</div>
</header>
<?php
}

Expand Down Expand Up @@ -190,7 +210,6 @@ public function render_navigation(): void {
'ehp-header__navigation',
] );
?>
<span class="ehp-header__ghost-element"></span>

<nav <?php $this->widget->print_render_attribute_string( 'main-menu' ); ?>>
<?php
Expand Down Expand Up @@ -237,9 +256,14 @@ protected function render_ctas_container() {
$secondary_cta_button_text = $this->settings['secondary_cta_button_text'];
$has_primary_button = ! empty( $primary_cta_button_text );
$has_secondary_button = ! empty( $secondary_cta_button_text );
$responsive_button_width = $this->settings['cta_responsive_width'] ?? '';

$ctas_container_classnames = self::CTAS_CONTAINER_CLASSNAME;

if ( '' !== $responsive_button_width ) {
$ctas_container_classnames .= ' has-responsive-width-' . $responsive_button_width;
}

$this->widget->add_render_attribute( 'ctas-container', [
'class' => $ctas_container_classnames,
] );
Expand Down
Loading

0 comments on commit 2f8910e

Please sign in to comment.