shop page responsive updated
This commit is contained in:
parent
edb23c42dd
commit
ec7ce9d480
@ -224,7 +224,6 @@
|
||||
flex: 0 0 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin-bottom: 20px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.oe_website_sale #products_grid,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 587 KiB After Width: | Height: | Size: 833 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 587 KiB |
@ -22,13 +22,11 @@
|
||||
|
||||
.oe_website_sale {
|
||||
background-color: #ffffff !important;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
padding: 80px 30px !important;
|
||||
|
||||
/* Sidebar Navigation */
|
||||
#products_grid_before {
|
||||
background: transparent !important;
|
||||
padding-right: 30px !important;
|
||||
|
||||
.food-sidebar-section {
|
||||
margin-bottom: 40px;
|
||||
@ -446,6 +444,166 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Layout Tweaks (991px to 768px) */
|
||||
@media (max-width: 991px) {
|
||||
.o_wsale_products_main_row {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#products_grid_before {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#products_grid {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Layout Tweaks */
|
||||
@media (max-width: 767px) {
|
||||
.o_wsale_products_main_row {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
/* Products Pager Header (Search, Sort, View) */
|
||||
.products_pager {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Search on Top */
|
||||
.o_wsale_products_searchbar_form,
|
||||
.search-query,
|
||||
.o_wsale_search {
|
||||
order: 1 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Sorting and View Switcher under search */
|
||||
.justify-content-end,
|
||||
.d-flex:not(.o_wsale_search) {
|
||||
order: 2 !important;
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
width: 100% !important;
|
||||
gap: 5px;
|
||||
|
||||
.o_sortby_dropdown {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.btn-group.o_wsale_apply_grid {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide Category Tabs on Mobile */
|
||||
.o_wsale_filmstrip_container,
|
||||
.o_wsale_filmstip_container,
|
||||
.o_wsale_filmstrip_wrapper,
|
||||
#wsale_products_categories_collapse,
|
||||
.products_categories.nav-pills {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Category Header/Toggle */
|
||||
#products_grid_before {
|
||||
order: 3 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Product Grid (2 products per row) */
|
||||
#products_grid {
|
||||
order: 4 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.o_wsale_products_grid_table_wrapper {
|
||||
overflow: visible !important;
|
||||
|
||||
table {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
|
||||
tbody {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
width: 100% !important;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
flex-direction: row !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
td {
|
||||
display: block !important;
|
||||
width: 50% !important;
|
||||
max-width: 50% !important;
|
||||
flex: 0 0 50% !important;
|
||||
padding: 5px !important; /* Tight padding to fit 2 items */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Adjust internal product layout for tight mobile space */
|
||||
.oe_product {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.oe_product_image {
|
||||
height: 120px !important; /* Smaller image to fit in 3-col layout on mobile */
|
||||
}
|
||||
|
||||
.o_wsale_product_information {
|
||||
padding: 8px !important;
|
||||
|
||||
.o_wsale_products_item_title a {
|
||||
font-size: 0.75rem !important;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.price-row span {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.btn-add-to-cart-overlay {
|
||||
padding: 5px !important;
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Pagination */
|
||||
.products_pager {
|
||||
margin-top: 60px;
|
||||
|
||||
@ -161,7 +161,7 @@ header {
|
||||
|
||||
.category-item {
|
||||
flex: 0 0 280px;
|
||||
width: 280px;
|
||||
// width: 280px;
|
||||
margin-right: 20px; /* Using margin instead of gap so jQuery outerWidth(true) includes the spacing */
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
@ -3098,8 +3098,8 @@ body.o_edit_mode {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
color: #ffb800 !important;
|
||||
text-decoration: none !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.social-box-dark:hover {
|
||||
@ -3194,3 +3194,61 @@ section h2.display-4, section h2.display-5, section h2.testi-main-title, section
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
header .o_header_main_nav .navbar-toggler,
|
||||
header .o_header_main_nav .navbar-toggler .navbar-toggler-icon {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SHOP HEADER - MOBILE/TABLET <= 767px
|
||||
Search on top, controls underneath
|
||||
========================================= */
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.products_header {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
/* Search bar - full width top row */
|
||||
.products_header .o_searchbar_form {
|
||||
order: 1 !important;
|
||||
width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
margin: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.products_header .o_searchbar_form .input-group {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Controls - second row */
|
||||
.products_header .o_wsale_apply_layout {
|
||||
order: 2 !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
.products_header > button {
|
||||
order: 3 !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
/* Sort dropdown, if enabled */
|
||||
.products_header .o_sortby_dropdown {
|
||||
order: 2 !important;
|
||||
}
|
||||
|
||||
/* Search input height */
|
||||
.products_header .oe_search_box {
|
||||
min-height: 44px !important;
|
||||
}
|
||||
|
||||
.products_header .oe_search_button {
|
||||
min-width: 44px !important;
|
||||
}
|
||||
}
|
||||
@ -22,7 +22,7 @@
|
||||
<!-- Section 1: Where Flavor Meets Festivity -->
|
||||
<section class="s_about_flavor_festivity pt-5 pb-5 bg-white">
|
||||
<div class="container pt-5 pb-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="row align-items-center flex-column-reverse flex-lg-row">
|
||||
<div class="col-lg-6 mb-5 mb-lg-0 text-center">
|
||||
<img src="/dine360_theme_shivasakthi/static/src/img/about_v2/vada.png" alt="Vada Dish" class="img-fluid floating-img"/>
|
||||
</div>
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Right Form (Cream Background) -->
|
||||
<div class="col-lg-6" style="background-color: #F6F4EB; padding: 60px;">
|
||||
<div class="col-lg-6" style="background-color: #F6F4EB; padding: 25px;">
|
||||
<h2 class="fw-bold text-uppercase mb-3" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111; font-size: 32px;">Send Us Message</h2>
|
||||
<p class="text-muted mb-4" style="font-size: 14px; line-height: 1.6;">
|
||||
Have a question or need assistance? Fill out the form below and our team will get back to you as soon as possible. *
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
</a>
|
||||
|
||||
<!-- Mobile Toggle -->
|
||||
<button class="navbar-toggler border-0 ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#top_menu_collapse">
|
||||
<button class="navbar-toggler border-0 ms-auto d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#top_menu_collapse">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
<!-- Floating Elements Removed as requested -->
|
||||
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="row align-items-center flex-column-reverse flex-lg-row">
|
||||
<!-- Left Image Side -->
|
||||
<div class="col-lg-6 mb-5 mb-lg-0 o_colored_level">
|
||||
<div class="about-image-wrapper o_animate o_anim_fade_in">
|
||||
@ -559,11 +559,11 @@
|
||||
<section class="s_enjoy_flavors_section o_colored_level" style="background-color: #111111; position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center;">
|
||||
|
||||
<!-- Container -->
|
||||
<div class="container position-relative" style="z-index: 2; padding: 60px 0;">
|
||||
<div class="container position-relative" style="z-index: 2; padding: 60px 20px;">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- LEFT: Text Content -->
|
||||
<div class="col-lg-5 col-md-6 text-white o_colored_level" style="padding-right: 40px;">
|
||||
<div class="col-lg-5 col-md-6 text-white o_colored_level" style="padding: 0 20px;">
|
||||
<!-- "ENJOY THE" small brush title -->
|
||||
<!-- <div class="enjoy-title-enjoy">ENJOY THE</div> -->
|
||||
<!-- "FLAVORS" large brush image text -->
|
||||
|
||||
@ -6,75 +6,85 @@
|
||||
<!-- Sidebar Reconstruction with Dynamic Data -->
|
||||
<xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
|
||||
<aside id="products_grid_before" class="col-lg-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"/>
|
||||
|
||||
<!-- Categories (Dynamic from Configuration) -->
|
||||
<div class="food-sidebar-section">
|
||||
<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'}">
|
||||
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Fetching all root categories configured in Odoo -->
|
||||
<t t-set="all_root_categories" t-value="request.env['product.public.category'].search([('parent_id', '=', False)])"/>
|
||||
<t t-foreach="all_root_categories" t-as="c">
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<div id="mobileCategoryCollapse" class="collapse 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>
|
||||
<ul class="category-list">
|
||||
<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 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Attributes (Dynamic - Sizes, etc.) -->
|
||||
<t t-foreach="attributes" t-as="a">
|
||||
<div class="food-sidebar-section">
|
||||
<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>
|
||||
<!-- Fetching all root categories configured in Odoo -->
|
||||
<t t-set="all_root_categories" t-value="request.env['product.public.category'].search([('parent_id', '=', False)])"/>
|
||||
<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>
|
||||
</t>
|
||||
</form>
|
||||
|
||||
<!-- New Arrivals (Using subset of current products to avoid crash) -->
|
||||
<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">
|
||||
<div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
|
||||
<div class="arrival-img">
|
||||
<img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
|
||||
<img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/>
|
||||
</div>
|
||||
<div class="arrival-info">
|
||||
<div class="name fw-bold" t-field="arrival.name"/>
|
||||
<div class="price">
|
||||
<del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
||||
<span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Attributes (Dynamic - Sizes, etc.) -->
|
||||
<t t-foreach="attributes" t-as="a">
|
||||
<div class="food-sidebar-section">
|
||||
<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>
|
||||
|
||||
<!-- 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="arrival-list">
|
||||
<t t-set="new_arrivals" t-value="products[:3] if products else []"/>
|
||||
<t t-foreach="new_arrivals" t-as="arrival">
|
||||
<div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
|
||||
<div class="arrival-img">
|
||||
<img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
|
||||
<img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/>
|
||||
</div>
|
||||
<div class="arrival-info">
|
||||
<div class="name fw-bold" t-field="arrival.name"/>
|
||||
<div class="price">
|
||||
<del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
||||
<span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user