implement responsive mobile category sidebar and custom styling for shop page
This commit is contained in:
Alaguraj0361
parent
ec7ce9d480
commit
e5c24097e8
@ -20,9 +20,19 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#wrapwrap,
|
||||
#wrap {
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.oe_website_sale {
|
||||
background-color: #ffffff !important;
|
||||
padding: 80px 30px !important;
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
/* Sidebar Navigation */
|
||||
#products_grid_before {
|
||||
@ -467,19 +477,34 @@
|
||||
|
||||
/* Mobile Layout Tweaks */
|
||||
@media (max-width: 767px) {
|
||||
padding: 30px 12px !important;
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.o_wsale_products_main_row {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Products Pager Header (Search, Sort, View) */
|
||||
/* Products Pager Header (Search on Top, Categories Left, Sort Right) */
|
||||
.products_pager {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0 !important;
|
||||
@ -493,21 +518,70 @@
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Sorting and View Switcher under search */
|
||||
/* Action Row under search: Categories on Left, Sort on Right */
|
||||
.justify-content-end,
|
||||
.d-flex:not(.o_wsale_search) {
|
||||
order: 2 !important;
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
gap: 5px;
|
||||
gap: 10px;
|
||||
|
||||
.o_sortby_dropdown {
|
||||
.mobile-cat-bar-btn {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.btn-group.o_wsale_apply_grid {
|
||||
margin-left: 0 !important;
|
||||
|
||||
.o_sortby_dropdown {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.btn-group.o_wsale_apply_grid,
|
||||
.o_wsale_apply_grid {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Categories Bar Button (Bottom-left of Search) */
|
||||
.mobile-cat-bar-btn {
|
||||
background: #ffb800 !important;
|
||||
color: #0e1317 !important;
|
||||
border: 1px solid #ffb800 !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: 0.85rem !important;
|
||||
padding: 8px 14px !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 3px 10px rgba(255, 184, 0, 0.25) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 6px !important;
|
||||
letter-spacing: 0.3px;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.cat-active-pill {
|
||||
background: #0e1317;
|
||||
color: #ffb800;
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 7px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
max-width: 110px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
background: #e5a500 !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 5px 14px rgba(255, 184, 0, 0.35) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -526,7 +600,167 @@
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
z-index: 1 !important;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
/* Backdrop for Mobile Categories Drawer */
|
||||
.mobile-category-backdrop {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
background: rgba(14, 19, 23, 0.7) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
-webkit-backdrop-filter: blur(4px) !important;
|
||||
z-index: 9999998 !important;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
||||
&.show {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fixed Full-Height Mobile Drawer */
|
||||
.mobile-category-offcanvas {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 300px !important;
|
||||
max-width: 85vw !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
background: #ffffff !important;
|
||||
z-index: 9999999 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important;
|
||||
transform: translateX(-100%) !important;
|
||||
transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important;
|
||||
visibility: hidden;
|
||||
overflow: hidden !important;
|
||||
|
||||
&.show {
|
||||
transform: translateX(0) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.drawer-header-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #ffb800;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
font-weight: 800 !important;
|
||||
font-size: 1.05rem !important;
|
||||
color: #0e1317 !important;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-close-drawer {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: #f4f4f4;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #ffb800;
|
||||
border-color: #ffb800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
padding: 20px 16px;
|
||||
overflow-y: auto !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
flex: 1 1 auto;
|
||||
height: calc(100vh - 65px) !important;
|
||||
max-height: calc(100dvh - 65px) !important;
|
||||
|
||||
.category-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.category-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
background: #fbfbfb;
|
||||
border: 1px solid #eeeeee;
|
||||
color: #222222;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
object-fit: contain;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #222222;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fff8e7;
|
||||
border-color: #ffb800;
|
||||
color: #000000;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #ffb800 !important;
|
||||
border-color: #ffb800 !important;
|
||||
color: #000000 !important;
|
||||
font-weight: 900 !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35) !important;
|
||||
|
||||
span {
|
||||
color: #000000 !important;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Product Grid (2 products per row) */
|
||||
@ -538,20 +772,24 @@
|
||||
padding: 0 !important;
|
||||
|
||||
.o_wsale_products_grid_table_wrapper {
|
||||
overflow: visible !important;
|
||||
overflow: hidden !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
table {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
tbody {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
width: 100% !important;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
max-width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
tr {
|
||||
@ -559,6 +797,7 @@
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
td {
|
||||
@ -566,7 +805,8 @@
|
||||
width: 50% !important;
|
||||
max-width: 50% !important;
|
||||
flex: 0 0 50% !important;
|
||||
padding: 5px !important; /* Tight padding to fit 2 items */
|
||||
padding: 4px !important; /* Tight padding to fit 2 items */
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -813,3 +1053,27 @@
|
||||
color: #000000 !important;
|
||||
box-shadow: 0 6px 20px rgba(254, 205, 79, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Global Highest Z-Index for Mobile Categories Drawer */
|
||||
.mobile-category-offcanvas {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 300px !important;
|
||||
max-width: 85vw !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
background: #ffffff !important;
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
|
||||
.mobile-category-backdrop {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
z-index: 9999998 !important;
|
||||
}
|
||||
|
||||
@ -11,6 +11,8 @@ p, li, .lead, .hero-desc, .blog-excerpt {
|
||||
/* Header Navigation Styles */
|
||||
header {
|
||||
border: none !important;
|
||||
z-index: 1050 !important;
|
||||
position: relative;
|
||||
|
||||
/* Main Nav (Black/Charcoal by default, absolute transparent on homepage) */
|
||||
.o_header_main_nav {
|
||||
|
||||
@ -6,22 +6,135 @@
|
||||
<!-- Sidebar Reconstruction with Dynamic Data -->
|
||||
<xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
|
||||
<aside id="products_grid_before" class="col-lg-3">
|
||||
<!-- Mobile Category Toggle Header -->
|
||||
<div class="d-flex d-md-none justify-content-between align-items-center mb-3 p-3 bg-white rounded shadow-sm border mobile-cat-toggle">
|
||||
<span class="fs-6 fw-bold text-dark text-uppercase m-0">Categories</span>
|
||||
<button class="btn btn-sm btn-light border" type="button" data-bs-toggle="collapse" data-bs-target="#mobileCategoryCollapse" aria-expanded="false" aria-controls="mobileCategoryCollapse">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<!-- Mobile Full-Height Sidebar Drawer & Backdrop -->
|
||||
<div class="mobile-category-backdrop d-md-none" id="mobileCategoryBackdrop" style="position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; background: rgba(14, 19, 23, 0.7) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 999998 !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none;"></div>
|
||||
<div class="mobile-category-offcanvas d-md-none" id="mobileCategoryOffcanvas" aria-label="Categories Drawer" style="position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 300px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; background: #ffffff !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important; transform: translateX(-100%) !important; transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.32s ease !important; visibility: hidden; overflow: hidden !important;">
|
||||
<div class="offcanvas-header d-flex align-items-center justify-content-between border-bottom py-3 px-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="drawer-header-icon">
|
||||
<i class="fa fa-cutlery text-dark"></i>
|
||||
</div>
|
||||
<h5 class="offcanvas-title fw-bold text-dark m-0" style="font-size: 1.05rem; letter-spacing: 0.5px;">MENU CATEGORIES</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close-drawer btn btn-sm btn-light border rounded-circle d-flex align-items-center justify-content-center" id="btnCloseMobileCategoryDrawer" aria-label="Close">
|
||||
<i class="fa fa-times text-dark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-3">
|
||||
<form class="js_attributes" method="get">
|
||||
<input type="hidden" name="search" t-att-value="search"/>
|
||||
<input type="hidden" name="sort" t-att-value="sort"/>
|
||||
|
||||
<div class="food-sidebar-section mb-4">
|
||||
<ul class="category-list">
|
||||
<li class="category-item">
|
||||
<a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
|
||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
|
||||
<span>All Products</span>
|
||||
</a>
|
||||
</li>
|
||||
<t t-set="all_root_categories" t-value="categories or request.env['product.public.category'].search([('parent_id', '=', False)])"/>
|
||||
<t t-if="not all_root_categories">
|
||||
<t t-set="all_root_categories" t-value="request.env['product.public.category'].search([])"/>
|
||||
</t>
|
||||
<t t-foreach="all_root_categories" t-as="c">
|
||||
<li class="category-item">
|
||||
<a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if category and c.id == category.id else ''}">
|
||||
<t t-if="c.image_128">
|
||||
<img t-att-src="website.image_url(c, 'image_128')"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
|
||||
</t>
|
||||
<span t-field="c.name"/>
|
||||
</a>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Attributes (Dynamic - Sizes, etc.) -->
|
||||
<t t-foreach="attributes" t-as="a">
|
||||
<div class="food-sidebar-section border-top pt-3">
|
||||
<div class="section-title" t-field="a.name"/>
|
||||
<ul class="list-unstyled">
|
||||
<t t-foreach="a.value_ids" t-as="v">
|
||||
<li class="mb-2 d-flex align-items-center gap-2">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
|
||||
<span class="small fw-bold text-muted" t-field="v.name"/>
|
||||
</div>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mobileCategoryCollapse" class="collapse d-md-block">
|
||||
<!-- Category Drawer Interaction Script -->
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
function initCategoryDrawer() {
|
||||
var openBtn = document.getElementById('btnOpenMobileCategoryDrawer');
|
||||
var closeBtn = document.getElementById('btnCloseMobileCategoryDrawer');
|
||||
var drawer = document.getElementById('mobileCategoryOffcanvas');
|
||||
var backdrop = document.getElementById('mobileCategoryBackdrop');
|
||||
if (!drawer || !backdrop) return;
|
||||
|
||||
// Move drawer and backdrop to document.body to break free from any parent stacking contexts
|
||||
if (drawer.parentElement !== document.body) {
|
||||
document.body.appendChild(drawer);
|
||||
}
|
||||
if (backdrop.parentElement !== document.body) {
|
||||
document.body.appendChild(backdrop);
|
||||
}
|
||||
|
||||
function openDrawer(e) {
|
||||
if (e) { e.preventDefault(); e.stopPropagation(); }
|
||||
drawer.classList.add('show');
|
||||
backdrop.classList.add('show');
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeDrawer(e) {
|
||||
if (e) { e.preventDefault(); e.stopPropagation(); }
|
||||
drawer.classList.remove('show');
|
||||
backdrop.classList.remove('show');
|
||||
document.body.style.overflow = '';
|
||||
document.documentElement.style.overflow = '';
|
||||
}
|
||||
|
||||
if (openBtn) {
|
||||
openBtn.onclick = openDrawer;
|
||||
}
|
||||
if (closeBtn) {
|
||||
closeBtn.onclick = closeDrawer;
|
||||
}
|
||||
if (backdrop) {
|
||||
backdrop.onclick = closeDrawer;
|
||||
}
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initCategoryDrawer);
|
||||
} else {
|
||||
initCategoryDrawer();
|
||||
}
|
||||
window.addEventListener('load', initCategoryDrawer);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Desktop Sidebar Content -->
|
||||
<div class="d-none d-md-block">
|
||||
<form class="js_attributes" method="get">
|
||||
<input type="hidden" name="search" t-att-value="search"/>
|
||||
<input type="hidden" name="sort" t-att-value="sort"/>
|
||||
|
||||
<!-- Categories (Dynamic from Configuration) -->
|
||||
<div class="food-sidebar-section">
|
||||
<div class="section-title d-none d-md-flex">Categories</div>
|
||||
<div class="section-title">Categories</div>
|
||||
<ul class="category-list">
|
||||
<li class="category-item">
|
||||
<a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
|
||||
@ -65,8 +178,8 @@
|
||||
</form>
|
||||
|
||||
<!-- New Arrivals (Using subset of current products to avoid crash) -->
|
||||
<div class="food-sidebar-section d-none d-md-block">
|
||||
<div class="section-title d-none d-md-flex">New Arrival</div>
|
||||
<div class="food-sidebar-section">
|
||||
<div class="section-title">New Arrival</div>
|
||||
<div class="arrival-list">
|
||||
<t t-set="new_arrivals" t-value="products[:3] if products else []"/>
|
||||
<t t-foreach="new_arrivals" t-as="arrival">
|
||||
@ -128,6 +241,18 @@
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
<!-- Replace Grid/List buttons with Categories button in Products Pager -->
|
||||
<template id="Shivasakthi_products_pager_categories" inherit_id="website_sale.products_pager" name="Shivasakthi Products Pager Categories" priority="50">
|
||||
<xpath expr="//*[contains(@class, 'products_pager')]//*[contains(@class, 'o_sortby_dropdown') or contains(@class, 'o_wsale_apply_grid')][1]" position="before">
|
||||
<button class="btn mobile-cat-bar-btn d-md-none" id="btnOpenMobileCategoryDrawer" type="button" aria-label="Open Categories">
|
||||
<i class="fa fa-th-large"></i>
|
||||
<span>Categories</span>
|
||||
<t t-if="category">
|
||||
<span class="cat-active-pill"><t t-esc="category.name"/></span>
|
||||
</t>
|
||||
</button>
|
||||
</xpath>
|
||||
</template>
|
||||
</data>
|
||||
</odoo>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user