Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

Commit

Permalink
DOT-3735 : COD theme > Integrate the new design of the footer (#203)
Browse files Browse the repository at this point in the history
## JIRA Ticket

[DOT-3735](https://nextmediama.atlassian.net/browse/DOT-3735)

## QA Steps

-  [ ] `pnpm i`
-  [ ] `pnpm dev`

## Note

Leave empty when you have nothing to say


[DOT-3735]:
https://youcanshop.atlassian.net/browse/DOT-3735?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
  • Loading branch information
bj-anas authored Feb 17, 2023
1 parent 00d6b57 commit 38432d8
Show file tree
Hide file tree
Showing 5 changed files with 320 additions and 232 deletions.
17 changes: 17 additions & 0 deletions assets/accordion.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const accordionHeaders = document.querySelectorAll(".accordion-header");

accordionHeaders.forEach((accordion) => {
accordion.onclick = function () {
this.classList.toggle("active");

let accordionContent = this.nextElementSibling;

if (accordionContent.style.maxHeight) {
//this is if the accordion is open
accordionContent.style.maxHeight = null;
} else {
//if the accordion is currently closed
accordionContent.style.maxHeight = accordionContent.scrollHeight + "px";
}
};
});
120 changes: 82 additions & 38 deletions assets/footer.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
.yc-footer {
background-color: var(--yc-footer-background-color);
color: var(--yc-footer-text-color);
margin-top: 27px;
overflow: hidden;
display: block;
width: 100%;
padding: 5.4rem 0 6rem;
position: relative;
}
.yc-footer .title {
font-weight: 500;
font-size: 1.3rem;
margin-bottom: 1rem;
padding: 40px 0;
}
.yc-footer .columns {
display: flex;
margin-bottom: 1rem;
gap: 1rem;
flex-direction: column;
}
Expand All @@ -26,43 +20,93 @@
flex-direction: row;
}
}
.yc-footer .item,
.yc-footer .description {
font-size: 14px;
margin-bottom: 0.7rem;
opacity: 0.7;
.yc-footer .accordion-item .accordion-header {
display: flex;
justify-content: space-between;
color: inherit;
align-items: center;
column-gap: 12px;
border-bottom: 1px solid #444444;
padding-bottom: 12px;
margin-bottom: 12px;
cursor: pointer;
}
@media (min-width: 768px) {
.yc-footer .accordion-item .accordion-header {
border-color: transparent;
cursor: unset;
}
}
.yc-footer .accordion-item .accordion-header .title {
color: inherit;
font-weight: 700;
font-size: 16px;
line-height: 120%;
}
.yc-footer .accordion-item .accordion-header .arrow {
transform: rotate(180deg);
transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1);
}
@media (min-width: 768px) {
.yc-footer .accordion-item .accordion-header .arrow {
display: none;
}
}
.yc-footer .accordion-item .accordion-header.active .arrow {
transform: unset;
}
.yc-footer .accordion-item .accordion-content {
max-height: 0;
overflow: hidden;
transition: all 300ms ease;
}
@media (min-width: 768px) {
.yc-footer .accordion-item .accordion-content {
max-height: unset;
overflow: unset;
}
}
.yc-footer .accordion-item .accordion-content .item {
display: block;
font-weight: 300;
font-size: 13px;
line-height: 250%;
}
.yc-footer .description {
line-height: 1.8;
@media (min-width: 768px) {
.yc-footer .accordion-item .accordion-content .item {
font-size: 15px;
}
}
.yc-footer a.item:not(.normal):hover {
.yc-footer .accordion-item .accordion-content .item:hover {
text-decoration: underline;
line-height: 1.5;
}
.yc-footer .copyright {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
font-size: 14px;
text-align: center;
background-color: var(--yc-footer-copyright-background);
}
.yc-footer .copyright .container {
height: 80px;
}
.yc-footer .copyright-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
gap: 12px;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
margin-top: 14px;
}
.yc-footer .copyright .container img {
height: 26px;
@media (min-width: 768px) {
.yc-footer .copyright-wrapper {
border-top: 1px solid #444444;
padding-top: 45px;
margin-top: 35px;
}
}
.yc-footer .logo {
margin-bottom: 3rem;
.yc-footer .copyright-wrapper .copyright-title {
font-weight: 600;
font-size: 11px;
line-height: 250%;
}
.yc-footer .logo img {
max-height: 2.5rem;
object-fit: contain;
.yc-footer .copyright-wrapper .social-media-link {
display: block;
width: 20px;
height: 20px;
}
.yc-footer .copyright-wrapper .social-media-link img {
width: 100%;
height: 100%;
}
170 changes: 88 additions & 82 deletions config/settings_data.json
Original file line number Diff line number Diff line change
@@ -1,84 +1,90 @@
{
"current": {
"font_family": "Almarai",
"theme_direction": "rtl",
"primary_color": "#F33520",
"sections": {
"notice-bar": {
"type": "notice-bar",
"settings": {
"notice_bar_content_desktop": "<p>الشحن المجاني متاح لجميع الطلبات<\/p>",
"notice_bar_content_mobile": "<p>الشحن المجاني متاح لجميع الطلبات<\/p>",
"notice_bar_content_font_size_desktop": 13,
"notice_bar_content_font_size_mobile": 12,
"notice_bar_height_desktop": 45,
"notice_bar_height_mobile": 45,
"notice_bar_background_color_desktop": "#F33520FF",
"notice_bar_background_color_mobile": "#E72E25FF"
}
},
"main-navbar": {
"type": "main-navbar",
"blocks": {
"block_gkk8ae6rzniqule": {
"type": "logo",
"settings": {}
},
"block_glpfko4s63fm6kj": {
"type": "menu",
"settings": {}
},
"block_gmrv273jdps9sso": {
"type": "search_and_cart",
"settings": {}
}
},
"order": [
"block_gkk8ae6rzniqule",
"block_glpfko4s63fm6kj",
"block_gmrv273jdps9sso"
],
"settings": {
"cart_badge_color": "#B83375FF",
"navbar_logo": "image-2IqyhOl7b1bbMBEPS5JD0G2MrcW.png",
"navbar_links_color": "#000000FF",
"navbar_background_color": "#FFFFFFFF",
"navbar_height": 85,
"navbar_always_on_top": true
}
},
"main-footer": {
"type": "main-footer",
"blocks": {
"block_e56ztxh3krc44so": {
"type": "column",
"settings": {
"block-title": "نبذة مختصرة عن متجرنا",
"description": "<p>متجرنا متخصص في بيع مجموعة متنوعة من الملابس للرجال والنساء والأطفال.<\/p><p>نحن نقدم مزيجًا من الملابس الرسمية وغير الرسمية ، بدءًا من الجينز والقمصان إلى الفساتين والبدلات.<\/p>"
}
},
"block_ocqzrg651kw4tf8": {
"type": "copyright",
"settings": {
"copyright": "<p>جميع الحقوق محفوظة © 2023<\/p>",
"copyright_additonal_image": "image-1-2KSUTbu7UzFbGW1h5Q1sHk9sYpH.png"
}
}
},
"order": [
"block_e56ztxh3krc44so",
"block_ocqzrg651kw4tf8"
],
"settings": {
"footer_background_color": "#222222FF",
"footer_copyright_background": "#111111FF"
}
}
},
"success_color": "#1EBA54FF",
"error_color": "#DF1E2FFF"
},
"presets": {
"Default": {}
}
"current": {
"font_family": "Almarai",
"theme_direction": "rtl",
"primary_color": "#F33520",
"sections": {
"notice-bar": {
"type": "notice-bar",
"settings": {
"notice_bar_content_desktop": "<p>الشحن المجاني متاح لجميع الطلبات<\/p>",
"notice_bar_content_mobile": "<p>الشحن المجاني متاح لجميع الطلبات<\/p>",
"notice_bar_content_font_size_desktop": 13,
"notice_bar_content_font_size_mobile": 12,
"notice_bar_height_desktop": 45,
"notice_bar_height_mobile": 45,
"notice_bar_background_color_desktop": "#F33520FF",
"notice_bar_background_color_mobile": "#E72E25FF"
}
},
"main-navbar": {
"type": "main-navbar",
"blocks": {
"block_gkk8ae6rzniqule": {
"type": "logo",
"settings": {}
},
"block_glpfko4s63fm6kj": {
"type": "menu",
"settings": {}
},
"block_gmrv273jdps9sso": {
"type": "search_and_cart",
"settings": {}
}
},
"order": [
"block_gkk8ae6rzniqule",
"block_glpfko4s63fm6kj",
"block_gmrv273jdps9sso"
],
"settings": {
"cart_badge_color": "#B83375FF",
"navbar_logo": "image-2IqyhOl7b1bbMBEPS5JD0G2MrcW.png",
"navbar_links_color": "#000000FF",
"navbar_background_color": "#FFFFFFFF",
"navbar_height": 85,
"navbar_always_on_top": true
}
},
"main-footer": {
"type": "main-footer",
"settings": {
"footer_background_color": "#000000",
"mention_and_social_media": true,
"mention": "<p>made with ❤️ by YouCan<\/p>"
},
"blocks": {
"block_social": {
"type": "social-media",
"settings": {
"social_media_icon_image": "InstagramLogo-2Ls7ER18h4Gq3v3Ep9WbRtQJJfx.png"
}
},
"block_nlltx86k7y4b93k": {
"type": "social-media",
"settings": {
"social_media_icon_image": "FacebookLogo-2Ls8VdaIiSBR4QDXchzGWkuNZgk.png"
}
},
"block_o07mmbhyf997iu": {
"type": "social-media",
"settings": {
"social_media_icon_image": "WhatsappLogo-2Ls8YMiusO4JlG2IfHjxpaYXJke.png"
}
}
},
"order": [
"block_social",
"block_nlltx86k7y4b93k",
"block_o07mmbhyf997iu"
]
}
},
"success_color": "#1EBA54FF",
"error_color": "#DF1E2FFF"
},
"presets": {
"Default": {}
}
}
Loading

0 comments on commit 38432d8

Please sign in to comment.