mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

Merge pull request 'refactor: update hero section, footer and checkout page's cart summary styles' (#17) from abhisheks/theme-elegance:main into main 

Reviewed-on: brooksbingham/theme-elegance#17
pagebuilder
abhisheks 2023-12-11 12:37:13 +00:00
parent 624d3c9d4f 45bd4a3288
commit 7dbebfb260
11 changed files with 189 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_dev/js/theme.js
View File

@ -124,20 +124,28 @@ $(function () {
root: ".th-accordion", root: ".th-accordion",
item: ".th-accordion-item", item: ".th-accordion-item",
trigger: ".th-accordion-item-trigger", trigger: ".th-accordion-item-trigger",
svg: ".th-accordion-item-trigger-svg",
content: ".th-accordion-item-content", content: ".th-accordion-item-content",
}; };
let selection = null; let selection = null;
let items = this.find(selectors.item); let items = this.find(selectors.item);
let rotateClass = "rotate-90 duration-500";
function collapseAll() { function collapseAll() {
items.each(function () { items.each(function () {
$(this).find(selectors.content).hide(500); $(this).find(selectors.content).hide(500);
$(this).find(selectors.svg).removeClass(rotateClass);
}); });
} }
function close() {
$(selection).find(selectors.content).hide(500);
$(selection).find(selectors.svg).removeClass("rotate-90");
}
function open() { function open() {
collapseAll(); collapseAll();
$(selection).find(selectors.content).show(500); $(selection).find(selectors.content).show(500);
$(selection).find(selectors.svg).addClass(rotateClass);
} }
function isOpen(item) { function isOpen(item) {
@ -152,7 +160,11 @@ $(function () {
.find(selectors.trigger) .find(selectors.trigger)
.on("click", function () { .on("click", function () {
if (selection === self) { if (selection === self) {
selection = null; if (isOpen(selection)) {
close();
} else {
open();
}
} else { } else {
selection = self; selection = self;
if (!isOpen(selection)) { if (!isOpen(selection)) {

74
assets/css/theme.css
View File

@ -1157,6 +1157,10 @@ select {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.cursor-pointer {
cursor: pointer;
}
.list-\[square\] { .list-\[square\] {
list-style-type: square; list-style-type: square;
} }
@ -1229,6 +1233,10 @@ select {
gap: 2rem; gap: 2rem;
} }
.gap-16 {
gap: 4rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) { .space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -1388,6 +1396,22 @@ select {
stroke: #4b5563; stroke: #4b5563;
} }
.stroke-current {
stroke: currentColor;
}
.stroke-inherit {
stroke: inherit;
}
.stroke-gray-500 {
stroke: #6b7280;
}
.stroke-blue-950 {
stroke: #172554;
}
.stroke-\[4px\] { .stroke-\[4px\] {
stroke-width: 4px; stroke-width: 4px;
} }
@ -1400,6 +1424,10 @@ select {
stroke-width: 3px; stroke-width: 3px;
} }
.stroke-2 {
stroke-width: 2;
}
.object-contain { .object-contain {
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
@ -1516,6 +1544,10 @@ select {
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.pl-6 {
padding-left: 1.5rem;
}
.text-left { .text-left {
text-align: left; text-align: left;
} }
@ -1751,6 +1783,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
--tw-ring-color: transparent; --tw-ring-color: transparent;
} }
.last\:hidden:last-child {
display: none;
}
.even\:bg-gray-200:nth-child(even) { .even\:bg-gray-200:nth-child(even) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@ -1766,6 +1802,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
background-color: rgb(30 58 138 / var(--tw-bg-opacity)); background-color: rgb(30 58 138 / var(--tw-bg-opacity));
} }
.hover\:stroke-blue-900:hover {
stroke: #1e3a8a;
}
.hover\:text-blue-900:hover { .hover\:text-blue-900:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity)); color: rgb(30 58 138 / var(--tw-text-opacity));
@ -1846,6 +1886,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
right: 1.5rem; right: 1.5rem;
} }
.max-md\:mt-2 {
margin-top: 0.5rem;
}
.max-md\:hidden { .max-md\:hidden {
display: none; display: none;
} }
@ -1871,12 +1915,28 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.max-md\:pl-6 {
padding-left: 1.5rem;
}
} }
@media not all and (min-width: 640px) { @media not all and (min-width: 640px) {
.max-sm\:hidden {
display: none;
}
.max-sm\:max-w-\[70\%\] { .max-sm\:max-w-\[70\%\] {
max-width: 70%; max-width: 70%;
} }
.max-sm\:max-w-\[90\%\] {
max-width: 90%;
}
.max-sm\:max-w-full {
max-width: 100%;
}
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@ -1993,6 +2053,20 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.md\:font-bold {
font-weight: 700;
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {

16
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

25
modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
View File

@ -23,7 +23,30 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<div id="block_myaccount_infos" class="flex flex-col gap-4"> {*Mobile View*}
<div id="block_myaccount_infos" class=" md:hidden th-accordion">
<div class="flex flex-col gap-4 th-accordion-item">
<div class="title clearfix th-accordion-item-trigger flex items-center gap-2" data-target="#footer_account_list" data-toggle="collapse">
<svg xmlns="http://www.w3.org/2000/svg" class="icon th-accordion-item-trigger-svg icon-tabler stroke-[3px] icon-tabler-chevron-right" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
<span class="font-bold">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
</div>
<ul class="account-list th-accordion-item-content pl-6" id="footer_account_list">
{foreach from=$my_account_urls item=my_account_url}
<li class="flex">
<a href="{$my_account_url.url}" class="text-sm font-normal leading-6" title="{$my_account_url.title}" rel="nofollow">
{$my_account_url["title"]}
</a>
</li>
{/foreach}
<a href="{$logout_url}" class="text-sm font-normal leading-6" title="logout" rel="nofollow">
Sign out
</a>
</ul>
</div>
</div>
{*Desktop View*}
<div id="block_myaccount_infos" class="flex max-md:hidden flex-col gap-4">
<div class="title clearfix" data-target="#footer_account_list" data-toggle="collapse"> <div class="title clearfix" data-target="#footer_account_list" data-toggle="collapse">
<span class="font-bold">{l s='Your account' d='Shop.Theme.Customeraccount'}</span> <span class="font-bold">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
</div> </div>

4
modules/ps_imageslider/views/templates/hook/slider.tpl
View File

@ -32,8 +32,8 @@
<figure class="relative h-auto lg:h-screen bg-gray-50"> <figure class="relative h-auto lg:h-screen bg-gray-50">
<img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}"> <img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}">
{if $slide.title || $slide.description} {if $slide.title || $slide.description}
<figcaption class="caption absolute max-md:w-max left-1/2 md:left-1/2 bottom-0 top-0 right-1/5 flex flex-col justify-center"> <figcaption class="caption absolute left-1/2 md:left-1/2 bottom-0 top-0 right-1/5 flex flex-col justify-center">
<h2 class="text-xl max-sm:max-w-[70%] md:text-2xl lg:text-4xl xl:text-6xl font-bold mb-4">{$slide.title}</h2> <h2 class="max-sm:max-w-full text-2xl md:text-3xl lg:text-4xl xl:text-6xl font-bold mb-4">{$slide.title}</h2>
<div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div> <div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div>
</figcaption> </figcaption>
{/if} {/if}

23
modules/ps_linklist/views/templates/hook/linkblock.tpl
View File

@ -22,9 +22,28 @@
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<div class="flex flex-wrap flex-1 flex-col md:flex-row">
{*Mobile View*}
<div class="flex flex-wrap flex-1 flex-col md:flex-row th-accordion">
{foreach $linkBlocks as $linkBlock} {foreach $linkBlocks as $linkBlock}
<div class="flex flex-col mb-4 md:w-1/3"> <div class="flex md:hidden flex-col mb-4 md:w-1/3 th-accordion-item">
<div class="font-bold flex gap-2 items-center mb-4 th-accordion-item-trigger">
<svg xmlns="http://www.w3.org/2000/svg" class="icon th-accordion-item-trigger-svg icon-tabler stroke-[3px] icon-tabler-chevron-right" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
{$linkBlock.title}
</div>
<ul class="flex flex-col th-accordion-item-content pl-6">
{foreach $linkBlock.links as $link}
<li class="flex">
<a id="{$link.id}-{$linkBlock.id}" class="text-sm font-normal leading-6 {$link.class}" href="{$link.url}" title="{$link.description}" {if !empty($link.target)} target="{$link.target}" {/if}>
{$link.title}
</a>
</li>
{/foreach}
</ul>
</div>
{*Desktop View*}
<div class="flex max-md:hidden flex-col mb-4 md:w-1/3">
<div class="font-bold mb-4"> <div class="font-bold mb-4">
{$linkBlock.title} {$linkBlock.title}
</div> </div>

2
templates/_partials/footer.tpl
View File

@ -29,7 +29,7 @@
</div> </div>
<div class="container mx-auto flex flex-col gap-8"> <div class="container mx-auto flex flex-col gap-8">
<div class="flex flex-col lg:flex-row gap-8"> <div class="flex flex-col lg:flex-row gap-8">
<div class="w-48 flex flex-row justify-center items-center"> <div class="w-48 max-sm:hidden flex flex-row justify-center items-center">
<a class="w-24 h-24" href="{$urls.base_url}"> <a class="w-24 h-24" href="{$urls.base_url}">
<img class="logo w-full aspect-square object-fit" src="{$shop.logo}" alt="{$shop.name}"> <img class="logo w-full aspect-square object-fit" src="{$shop.logo}" alt="{$shop.name}">
</a> </a>

4
templates/checkout/_partials/cart-detailed-product-line.tpl
View File

@ -23,7 +23,7 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<div class="flex flex-1 gap-4 items-center"> <div class="flex max-md:flex-col flex-1 gap-4 items-center">
<div class="w-40 h-40"> <div class="w-40 h-40">
<img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}"> <img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
</div> </div>
@ -44,7 +44,7 @@
</div> </div>
<div class="flex items-center w-max"> <div class="flex items-center w-max">
<input <input
class="js-cart-line-product-quantity px-2 py-1" class="js-cart-line-product-quantity px-2 py-1 w-12"
data-down-url="{$product.down_quantity_url}" data-down-url="{$product.down_quantity_url}"
data-up-url="{$product.up_quantity_url}" data-up-url="{$product.up_quantity_url}"
data-update-url="{$product.update_quantity_url}" data-update-url="{$product.update_quantity_url}"

11
templates/checkout/_partials/cart-summary-product-line.tpl
View File

@ -29,12 +29,15 @@
</a> </a>
</div> </div>
<div class="media-body"> <div class="media-body">
<span class="product-name">{$product.name}</span> <span class="product-name md:text-lg font-medium">{$product.name}</span>
<span class="product-quantity">x{$product.quantity}</span> <div class="flex items-center gap-2 max-md:mt-2">
<span class="product-price float-xs-right">{$product.price}</span> <span class="product-price font-semibold md:font-bold">{$product.price}</span>
<span>x</span>
<span class="product-quantity text-lg font-medium">{$product.quantity}</span>
</div>
{hook h='displayProductPriceBlock' product=$product type="unit_price"} {hook h='displayProductPriceBlock' product=$product type="unit_price"}
{foreach from=$product.attributes key="attribute" item="value"} {foreach from=$product.attributes key="attribute" item="value"}
<div class="product-line-info product-line-info-secondary text-muted"> <div class="hidden product-line-info product-line-info-secondary text-muted">
<span class="label">{$attribute}:</span> <span class="label">{$attribute}:</span>
<span class="value">{$value}</span> <span class="value">{$value}</span>
</div> </div>

36
templates/checkout/_partials/cart-summary-totals.tpl
View File

@ -24,24 +24,6 @@
*} *}
<div class="flex flex-col gap-2 mt-2"> <div class="flex flex-col gap-2 mt-2">
{block name='cart_summary_total'}
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
<div class="flex justify-between font-medium">
<span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
<div class="flex justify-between font-medium">
<span class="label">{$cart.totals.total_including_tax.label}</span>
<span class="value">{$cart.totals.total_including_tax.value}</span>
</div>
{else}
<div class="flex justify-between font-medium">
<span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
{/if}
{/block}
{block name='cart_summary_tax'} {block name='cart_summary_tax'}
{if $cart.subtotals.tax} {if $cart.subtotals.tax}
<div class="flex justify-between font-medium"> <div class="flex justify-between font-medium">
@ -51,4 +33,22 @@
{/if} {/if}
{/block} {/block}
{block name='cart_summary_total'}
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
<div class="flex justify-between font-medium">
<span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
<div class="flex justify-between font-bold text-lg">
<span class="label">{$cart.totals.total_including_tax.label}</span>
<span class="value">{$cart.totals.total_including_tax.value}</span>
</div>
{else}
<div class="flex justify-between font-bold text-lg">
<span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
{/if}
{/block}
</div> </div>

26
templates/checkout/_partials/cart-summary.tpl
View File

@ -23,29 +23,29 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<section id="js-checkout-summary" class="card js-cart" data-refresh-url="{$urls.pages.cart}?ajax=1&action=refresh"> <section id="js-checkout-summary" class="card js-cart" data-refresh-url="{$urls.pages.cart}?ajax=1&action=refresh">
<div class="card-block"> <div class="card-block w-full flex flex-col gap-16 th-accordion">
{block name='hook_checkout_summary_top'} {block name='hook_checkout_summary_top'}
{hook h='displayCheckoutSummaryTop'} {hook h='displayCheckoutSummaryTop'}
{/block} {/block}
{block name='cart_summary_products'} {block name='cart_summary_products'}
<div class="w-full flex item-center justify-center mb-8 uppercase"> <div class="w-full flex item-center justify-center uppercase">
<span class="font-medium text-lg">Cart Summary</span> <span class="font-medium text-lg">Cart Summary</span>
</div> </div>
<div class="cart-summary-products flex items-center gap-2 w-full hidden"> <div class="cart-summary-products th-accordion-item flex flex-col gap-2 w-full">
<span>{$cart.summary_string}</> <div class="w-full flex items-center justify-between ">
<p> <span class="font-bold">{$cart.summary_string}</span>
<a href="#" data-toggle="collapse" class="flex items-center gap-2" data-target="#cart-summary-product-list"> <span data-toggle="collapse" class="th-accordion-item-trigger flex items-center font-medium cursor-pointer hover:text-blue-900 stroke-gray-500 hover:stroke-blue-900" >
{l s='show details' d='Shop.Theme.Actions'} {l s='Show details' d='Shop.Theme.Actions'}
<i class="ti ti-chevron-down"></i> <svg xmlns="http://www.w3.org/2000/svg" class="th-accordion-item-trigger-svg stroke-[3px] stroke-inherit icon icon-tabler icon-tabler-chevron-right" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
</a> </span>
</p> </div>
{block name='cart_summary_product_list'} {block name='cart_summary_product_list'}
<div class="collapse" id="cart-summary-product-list"> <div class="th-accordion-item-content p-4 border border-gray-200" id="cart-summary-product-list">
<ul class="media-list"> <ul class="media-list w-full flex flex-col gap-4 ">
{foreach from=$cart.products item=product} {foreach from=$cart.products item=product}
<li class="media">{include file='checkout/_partials/cart-summary-product-line.tpl' product=$product}</li> <li class="media w-full flex gap-4">{include file='checkout/_partials/cart-summary-product-line.tpl' product=$product}</li>
{/foreach} {/foreach}
</ul> </ul>
</div> </div>