Skip to content

Commit

Permalink
Navattic page blocks. (#355)
Browse files Browse the repository at this point in the history
* Navattic page blocks.

* Navattic hamburger icons.

* Navattic review comments.

* CSS fixes for navattic page.

* Removal of white line below iframe.

* Navattic page footer issues.
  • Loading branch information
nimithshetty17 authored Nov 17, 2023
1 parent e538dc1 commit 5ab1853
Show file tree
Hide file tree
Showing 10 changed files with 396 additions and 8 deletions.
24 changes: 24 additions & 0 deletions blocks/iframe/iframe.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.section.iframe-container .iframe-wrapper {
padding-bottom: 0;
width: auto;
margin: 0;
max-width: unset;
padding-top: 90px;
}

.section.iframe-container .iframe-wrapper .iframe iframe {
display: block;
}

/* Tablet */
@media only screen and (min-width: 768px) {
.section.iframe-container .iframe-wrapper {
padding-top: var(--spacer-layout-06);
}
}

@media only screen and (min-width: 1200px) {
.section.iframe-container .iframe-wrapper {
padding-top: var(--spacer-layout-06);
}
}
21 changes: 21 additions & 0 deletions blocks/iframe/iframe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { createTag } from '../../scripts/scripts.js';

export default function decorate(block) {
// Fetch the iframe link
const link = block.querySelector('a');
const path = link ? link.getAttribute('href') : '';

// Create the iframe tag
const iframe = createTag('iframe', { class: 'iframe-window', id: 'navattic-iframe' });
iframe.src = path;

// Set the height and width
iframe.width = '100%';
iframe.height = 1200;

// Remove the elements inside iframe block
block.innerHTML = '';

// Append iframe to block
block.appendChild(iframe);
}
116 changes: 115 additions & 1 deletion blocks/solution-footer/solution-footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,64 @@ main .section.solution-footer-container {
color: var(--neutral-white);
}

.solution-footer.navattic > div {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
}

.solution-footer.navattic > div .button-container a {
color: var(--neutral-white);
font-family: var(--sans-serif-font-light);
font-size: var(--font-size-14);
font-style: normal;
font-weight: var(--font-weight-light);
line-height: var(--line-height-160);
letter-spacing: 0.16px;
display: inline;
}

.solution-footer.navattic > div div {
color: var(--neutral-white);
font-family: var(--sans-serif-font-light);
font-size: var(--font-size-14);
font-style: normal;
font-weight: var(--font-weight-light);
line-height: var(--line-height-120);
letter-spacing: 0.16px;
}

.solution-footer.navattic > div .button-container > a.tertiary:not(.has-icon), .solution-footer.navattic > div .button-container > a.tertiary.has-icon::before {
border-bottom: 0;
}

.solution-footer.navattic > div .button-container > a.tertiary:active, .solution-footer.navattic > div .button-container > a.tertiary:hover {
-webkit-text-fill-color: unset;
color: unset;
border-image-source: unset;
}

.solution-footer.navattic > div .button-container > a.tertiary:not(.has-icon):hover {
border-bottom: 1px solid #FFF;
}

.solution-footer.navattic > div > div:first-child {
width: 100%;
padding-bottom: var(--spacer-element-08);
border-bottom: 1px solid var(--neutral-grey-tint140);
}

main .section.solution-footer-container > div:last-child {
padding: var(--spacer-element-08) 0;
}

.solution-footer-container:has(.navattic) {
position: relative;
bottom: 0;
}

/* Block - Solution Footer */
.solution-footer {
position: relative;
Expand All @@ -20,11 +74,25 @@ main .section.solution-footer-container > div:last-child {
line-height: 0;
}

.solution-footer.navattic .icon {
margin-left: unset;
}

.solution-footer.navattic > div div:last-child {
color: var(--neutral-grey-tint100);
margin-top: var(--spacer-element-10);
}

.solution-footer svg {
width: auto;
height: 38px;
}

.solution-footer.navattic > div .button-container > a.button.tertiary span.icon > svg {
height: 38px;
width: 43px;
}

.solution-footer svg #text * {
fill: var(--neutral-white);
}
Expand Down Expand Up @@ -57,6 +125,15 @@ main .section.solution-footer-container > div:last-child {
color: var(--neutral-white);
}

.solution-footer.navattic > div .cookie-consent {
cursor: pointer;
height: 17px;
}

.solution-footer.navattic > div .cookie-consent:hover {
border-bottom: 1px solid #FFF;
}

/* stylelint-disable no-descending-specificity */
.solution-footer ul li a,
.solution-footer ul li a:not(.button):any-link {
Expand Down Expand Up @@ -90,6 +167,19 @@ main .section.solution-footer-container > div:last-child {
align-items: center;
}

.solution-footer.navattic > div {
flex-direction: row;
align-items: center;
}

.solution-footer.navattic > div .button-container a {
font-size: var(--font-size-16);
}

.solution-footer.navattic > div div {
font-size: var(--font-size-16);
}

.solution-footer ul {
display: flex;
justify-content: flex-end;
Expand All @@ -98,6 +188,17 @@ main .section.solution-footer-container > div:last-child {
gap: var(--gap-24);
}

.solution-footer.navattic > div > div:first-child {
flex-grow: 1;
padding-bottom: unset;
border-bottom: unset;
width: unset;
}

.solution-footer.navattic div div:not(.button-container):last-child {
margin-top: unset;
}

.solution-footer .default-content-wrapper {
display: flex;
align-items: center;
Expand All @@ -111,10 +212,23 @@ main .section.solution-footer-container > div:last-child {
.solution-footer .default-content-wrapper ul + p {
position: relative;
}

.solution-footer.navattic > div .button-container > a.button.tertiary span.icon > svg {
height: 48px;
width: 54px;
}

.solution-footer.navattic > div .cookie-consent {
height: unset;
}
}

/* Desktop */
@media (min-width: 1200px) {
@media (min-width: 1200px) {
.solution-footer.navattic > div {
gap: var(--gap-24);
}

main .section.solution-footer-container > div:last-child {
padding: var(--spacer-element-10) 0;
}
Expand Down
14 changes: 13 additions & 1 deletion blocks/solution-footer/solution-footer.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { decorateMain } from '../../scripts/scripts.js';
import { decorateMain, createTag } from '../../scripts/scripts.js';
import { loadBlocks, decorateButtons } from '../../scripts/lib-franklin.js';

/**
Expand Down Expand Up @@ -74,4 +74,16 @@ export default async function decorate(block) {
}
});
}

// Find the navattic footer list
const footerList = block.querySelector('.solution-footer.navattic > div');
if (footerList) {
const cookieConsent = createTag('div', { class: 'cookie-consent' });
cookieConsent.innerText = 'Cookie preferences';

// eslint-disable-next-line no-undef
cookieConsent.addEventListener('click', () => { OneTrust.ToggleInfoDisplay(); });

footerList.insertBefore(cookieConsent, footerList.children[3]);
}
}
Loading

0 comments on commit 5ab1853

Please sign in to comment.