Skip to content

Commit

Permalink
mobile styling for section header
Browse files Browse the repository at this point in the history
  • Loading branch information
@kailasnadh790
kailasnadh790 committed Jan 17, 2024
2 parents e283b19 + f03cdde commit c0918fe
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 212 deletions.
3 changes: 2 additions & 1 deletion cigaradvisor/blocks/authorcard/authorcard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ export default async function decorate(block) {
authorWrapperSection.innerHTML += authorContents.join('');
})
.catch((error) => {
console.error('Error fetching author info:', error);
// eslint-disable-next-line no-console
console.log('Error fetching author info:', error);
});
rightDiv.replaceChildren(authorWrapperSection);
block.append(rightDiv);
Expand Down
4 changes: 2 additions & 2 deletions cigaradvisor/blocks/footer/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default async function decorate(block) {
// create section
const section = document.createElement('div');
section.classList.add('nav-section');
if (currentElement.tagName === 'H1') {
if (currentElement.tagName === 'h4') {
section.classList.add('with-heading');
}

Expand All @@ -34,7 +34,7 @@ export default async function decorate(block) {
nextElement = currentElement.nextSibling;
section.appendChild(currentElement);
currentElement = nextElement;
} while (nextElement && nextElement.tagName !== 'H1');
} while (nextElement && nextElement.tagName !== 'h4');

// add section to container
footerContainer.insertBefore(section, currentElement);
Expand Down
163 changes: 69 additions & 94 deletions cigaradvisor/blocks/hero/hero.css
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,110 @@
/* block specific CSS goes here */

main .hero-container>div {
max-width: unset;
}
/** Override global settings **/

main .hero-container {
padding: 0;
margin-bottom: 10%;
}

main .hero.block {
position: relative;
padding: 32px;
min-height: 300px;
text-align: center;
line-height: 1;
letter-spacing: 3px;
color: var(--off-white);
text-shadow: 3px 3px var(--clr-black);
text-wrap: nowrap;
main .hero-container > div {
max-width: unset;
}

main .hero.block>div>div {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/** Hero Stuff **/
main .hero.block {
position: relative;
}

main .hero.block h1 {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
color: white;
main .hero.block.under-nav {
margin-top: -43px;
}

main .hero.block picture {
main .hero.block .hero-image {
z-index: -9999;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
object-fit: cover;
box-sizing: border-box;
height: 100%;
width: 100%;
overflow: clip;
}

main .hero.block img {
main .hero.block .hero-image picture {
display: block;
height: 100%;
width: 100%;
position: relative;
}

main .hero.block .hero-image img {
object-position: center center;
object-fit: cover;
margin-top: 1%;
height: 85%;
height: 100%;
width: 100%;
}

main .hero.block .hero-content {
position: absolute;
top: 25%;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 0 1rem;
padding-top: 80px;
}

main .hero.block h1 {
color: var(--clr-white);
text-shadow: 0 0 1rem var(--clr-black);
text-align: center;
line-height: 1;
letter-spacing: 3px;
text-shadow: 3px 3px var(--clr-black);
}

/* hero search */
main .hero.block .hero-search .search-box{
main .hero.block .hero-search {
display: flex;
justify-content: center;
margin: 30px auto 0;
}

main .hero.block .hero-search{
margin: 20px auto;
width: 100%;
}

main .hero.block .search{
main .hero.block .hero-search form {
display: flex;
width: 70%;
}

main .hero.block .search form {
border-bottom: 4px solid var(--clr-dark-gray);
padding-bottom: 10px;
}

main .hero.block .search form .focused{
transition: 1s;
background-color: var(--light-grey);
/* set form input placeholder text color color: var(--clr-dark-gray); */
main .hero.block .hero-search form input {
flex: 1;
padding-left: 18px;
height: 45px;
width: 100%;
border: none;
font-weight: var(--font-weight-bold);
font-size: var(--body-font-size-l);
line-height: 27px;
transition: background-color 1s;
background-color: transparent;
}

main .hero.block .search form button {
position: relative;
top: 0;
right: 0;
background: 0 0;
main .hero.block .hero-search form input::placeholder {
color: var(--clr-dark-gray);
width: 2.85rem;
padding: 0;
line-height: 2.85rem;
margin: 0;
border: none;
border-radius: 0;
}

/* set form input placeholder text color color: var(--clr-dark-gray); */
main .hero.block .search form input {
color: var(--clr-dark-gray);
main .hero.block .hero-search form input:focus {
border: none;
font-weight: 700;
font-size: 18px;
text-transform: capitalize;
width: 100%;
background: 0 0;
position: relative;
left: 0;
max-width: 100%;
z-index: 1;
transition: background-color 1s;
background-color: var(--light-grey);
}

main .hero.block .search form input::placeholder {
color: var(--clr-dark-gray);
main .hero.block .hero-search form button {
flex: 0 1;
height: 100%;
width: 100%;
background: transparent;
border: none;
}

main .hero.block .search form button::before {
main .hero.block .hero-search form button::before {
position: relative;
width: 2em;
height: 100%;
width: 100%;
font-size: 30px;
content: "\f002";
text-align: center;
Expand All @@ -136,18 +113,16 @@ main .hero.block .search form button::before {
}

@media screen and (min-width: 900px) {
main .hero.block img {
width: 100%;
height: 185%;
max-width: none;
margin-top: -65px;
main .hero.block.under-nav {
margin-top: -70px;
}

main .hero.block .search{
width: 30%;
main .hero.block .hero-content {
padding-top: 200px;
padding-bottom: 100px;
}

main .hero.block .hero-content {
top: 100%;
main .hero.block .hero-search form {
width: 30%;
}
}
30 changes: 30 additions & 0 deletions cigaradvisor/blocks/hero/hero.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { getMetadata } from '../../scripts/aem.js';

function buildSearch() {
const search = document.createElement('div');
search.classList.add('hero-search');
search.innerHTML = `
<form action="/cigaradvisor/" method="get">
<label class="sr-only" for="main-search-term">Search</label>
<input type="text" maxlength="255" placeholder="SEARCH" autocomplete="off" value="">
<button type="submit" value="Submit" title="Submit"></button>
</form>
`;
return search;
}

export default async function decorate(block) {
const style = getMetadata('hero-style');
if (style) {
block.classList.add(style.toLowerCase());
}

const header = block.querySelector('h1');
const image = document.createElement('div');
image.classList.add('hero-image');
image.replaceChildren(block.querySelector('picture'));
const content = document.createElement('div');
content.classList.add('hero-content');
content.append(header, buildSearch());
block.replaceChildren(image, content);
}
48 changes: 14 additions & 34 deletions cigaradvisor/scripts/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,33 +24,16 @@ function buildHeroBlock(main) {
const h1 = main.querySelector('h1');
const picture = main.querySelector('picture');
// eslint-disable-next-line no-bitwise
if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
const section = document.createElement('div');
section.classList.add('section--hero');
const heroContent = document.createElement('div');
heroContent.classList.add('hero-content');
const search = document.createElement('div');
search.classList.add('search');
search.innerHTML = `<form action="/cigaradvisor/" class="hero-search" method="get">
<label class="sr-only" for="main-search-term">Search</label>
<div class="search-box">
<input type="search" class="search__input predictiveSearch" id="main-search-term" maxlength="255" placeholder="SEARCH" name="s" data-url="GetSearchSuggestions" autocomplete="off" value="">
<button type="submit" class="search__submit" value="Submit" title="Submit"></button>
</div>
</form>`;
heroContent.append(h1);
heroContent.append(search);
section.append(buildBlock('hero', { elems: [picture, heroContent] }));
if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)
&& h1.parentElement === picture.closest('div')) {
let section = document.createElement('div');
if (h1.parentElement.childElementCount === 2) {
section = h1.parentElement;
}
const p = picture.parentElement;
section.replaceChildren(buildBlock('hero', { elems: [h1, picture] }));
main.prepend(section);
// on-focus of input, add class to form
const searchInput = main.querySelector('.hero-search input');
searchInput.addEventListener('focus', () => {
searchInput.parentNode.classList.add('focused');
});
// on-blur of input, remove class from form
searchInput.addEventListener('blur', () => {
searchInput.parentNode.classList.remove('focused');
});
p.remove();
}
}

Expand All @@ -59,6 +42,9 @@ function buildHeroBlock(main) {
* @param {HTMLElement} mainEl - The main element to build the article header for.
*/
function buildArticleHeader(mainEl) {
if (!document.querySelector('body.blog-post-template')) {
return;
}
// eslint-disable-next-line no-use-before-define
decorateExternalLink(mainEl);
const paragraphs = mainEl.querySelectorAll('p');
Expand Down Expand Up @@ -150,14 +136,8 @@ async function loadFonts() {
*/
function buildAutoBlocks(main) {
try {
const isHome = document.querySelector('body.homepage');
const isBlogPost = document.querySelector('body.blog-post-template');
if (isHome) {
buildHeroBlock(main);
}
if (isBlogPost) {
buildArticleHeader(main);
}
buildHeroBlock(main);
buildArticleHeader(main);
} catch (error) {
// eslint-disable-next-line no-console
console.error('Auto Blocking failed', error);
Expand Down
Loading

0 comments on commit c0918fe

Please sign in to comment.