MetatroncubeSoftwareSolutions/odoo-shivasakthi
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shop page responsive updated

Browse Source
This commit is contained in:
Selvi 2026-09-05 17:32:23 +05:30
parent edb23c42dd
commit ec7ce9d480
10 changed files with 297 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/dine360_dashboard/static/src/css/shop_style.css
View File

@ -224,7 +224,6 @@
flex: 0 0 100% !important; flex: 0 0 100% !important;
max-width: 100% !important; max-width: 100% !important;
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 0;
} }
.oe_website_sale #products_grid, .oe_website_sale #products_grid,

BIN
addons/dine360_theme_shivasakthi/static/src/img/about_v2/noodles.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 587 KiB

After

Width:  |  Height:  |  Size: 833 KiB

BIN
addons/dine360_theme_shivasakthi/static/src/img/about_v2/noodles2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 587 KiB

164
addons/dine360_theme_shivasakthi/static/src/scss/shop.scss
View File

@ -22,13 +22,11 @@
.oe_website_sale { .oe_website_sale {
background-color: #ffffff !important; background-color: #ffffff !important;
padding-top: 40px; padding: 80px 30px !important;
padding-bottom: 80px;
/* Sidebar Navigation */ /* Sidebar Navigation */
#products_grid_before { #products_grid_before {
background: transparent !important; background: transparent !important;
padding-right: 30px !important;
.food-sidebar-section { .food-sidebar-section {
margin-bottom: 40px; 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 */ /* Custom Pagination */
.products_pager { .products_pager {
margin-top: 60px; margin-top: 60px;

64
addons/dine360_theme_shivasakthi/static/src/scss/theme.scss
View File

@ -161,7 +161,7 @@ header {
.category-item { .category-item {
flex: 0 0 280px; flex: 0 0 280px;
width: 280px; // width: 280px;
margin-right: 20px; /* Using margin instead of gap so jQuery outerWidth(true) includes the spacing */ margin-right: 20px; /* Using margin instead of gap so jQuery outerWidth(true) includes the spacing */
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
@ -3098,8 +3098,8 @@ body.o_edit_mode {
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
color: #888; color: #ffb800 !important;
text-decoration: none; text-decoration: none !important;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.social-box-dark:hover { .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; 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;
}
}

2
addons/dine360_theme_shivasakthi/views/about_page.xml
View File

@ -22,7 +22,7 @@
<!-- Section 1: Where Flavor Meets Festivity --> <!-- Section 1: Where Flavor Meets Festivity -->
<section class="s_about_flavor_festivity pt-5 pb-5 bg-white"> <section class="s_about_flavor_festivity pt-5 pb-5 bg-white">
<div class="container pt-5 pb-5"> <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"> <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"/> <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/vada.png" alt="Vada Dish" class="img-fluid floating-img"/>
</div> </div>

2
addons/dine360_theme_shivasakthi/views/contact_page.xml
View File

@ -81,7 +81,7 @@
</div> </div>
<!-- Right Form (Cream Background) --> <!-- 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> <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;"> <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. * Have a question or need assistance? Fill out the form below and our team will get back to you as soon as possible. *

2
addons/dine360_theme_shivasakthi/views/layout.xml
View File

@ -76,7 +76,7 @@
</a> </a>
<!-- Mobile Toggle --> <!-- 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> <span class="navbar-toggler-icon"></span>
</button> </button>

6
addons/dine360_theme_shivasakthi/views/pages.xml
View File

@ -133,7 +133,7 @@
<!-- Floating Elements Removed as requested --> <!-- Floating Elements Removed as requested -->
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center flex-column-reverse flex-lg-row">
<!-- Left Image Side --> <!-- Left Image Side -->
<div class="col-lg-6 mb-5 mb-lg-0 o_colored_level"> <div class="col-lg-6 mb-5 mb-lg-0 o_colored_level">
<div class="about-image-wrapper o_animate o_anim_fade_in"> <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;"> <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 --> <!-- 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"> <div class="row align-items-center">
<!-- LEFT: Text Content --> <!-- 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 --> <!-- "ENJOY THE" small brush title -->
<!-- <div class="enjoy-title-enjoy">ENJOY THE</div> --> <!-- <div class="enjoy-title-enjoy">ENJOY THE</div> -->
<!-- "FLAVORS" large brush image text --> <!-- "FLAVORS" large brush image text -->

126
addons/dine360_theme_shivasakthi/views/shop_page.xml
View File

@ -6,75 +6,85 @@
<!-- Sidebar Reconstruction with Dynamic Data --> <!-- Sidebar Reconstruction with Dynamic Data -->
<xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace"> <xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
<aside id="products_grid_before" class="col-lg-3"> <aside id="products_grid_before" class="col-lg-3">
<form class="js_attributes" method="get"> <!-- Mobile Category Toggle Header -->
<input type="hidden" name="search" t-att-value="search"/> <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">
<input type="hidden" name="sort" t-att-value="sort"/> <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>
<!-- Categories (Dynamic from Configuration) --> <div id="mobileCategoryCollapse" class="collapse d-md-block">
<div class="food-sidebar-section"> <form class="js_attributes" method="get">
<div class="section-title">Categories</div> <input type="hidden" name="search" t-att-value="search"/>
<ul class="category-list"> <input type="hidden" name="sort" t-att-value="sort"/>
<li class="category-item">
<a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}"> <!-- Categories (Dynamic from Configuration) -->
<img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span> <div class="food-sidebar-section">
</a> <div class="section-title d-none d-md-flex">Categories</div>
</li> <ul class="category-list">
<!-- 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"> <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 ''}"> <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
<t t-if="c.image_128"> <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/> <span>All Products</span>
<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> </a>
</li> </li>
</t> <!-- Fetching all root categories configured in Odoo -->
</ul> <t t-set="all_root_categories" t-value="request.env['product.public.category'].search([('parent_id', '=', False)])"/>
</div> <t t-foreach="all_root_categories" t-as="c">
<li class="category-item">
<!-- Attributes (Dynamic - Sizes, etc.) --> <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-foreach="attributes" t-as="a"> <t t-if="c.image_128">
<div class="food-sidebar-section"> <img t-att-src="website.image_url(c, 'image_128')"/>
<div class="section-title" t-field="a.name"/> </t>
<ul class="list-unstyled"> <t t-else="">
<t t-foreach="a.value_ids" t-as="v"> <img src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png"/>
<li class="mb-2 d-flex align-items-center gap-2"> </t>
<div class="form-check"> <span t-field="c.name"/>
<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()"/> </a>
<span class="small fw-bold text-muted" t-field="v.name"/>
</div>
</li> </li>
</t> </t>
</ul> </ul>
</div> </div>
</t>
</form>
<!-- New Arrivals (Using subset of current products to avoid crash) --> <!-- Attributes (Dynamic - Sizes, etc.) -->
<div class="food-sidebar-section"> <t t-foreach="attributes" t-as="a">
<div class="section-title">New Arrival</div> <div class="food-sidebar-section">
<div class="arrival-list"> <div class="section-title" t-field="a.name"/>
<t t-set="new_arrivals" t-value="products[:3] if products else []"/> <ul class="list-unstyled">
<t t-foreach="new_arrivals" t-as="arrival"> <t t-foreach="a.value_ids" t-as="v">
<div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)"> <li class="mb-2 d-flex align-items-center gap-2">
<div class="arrival-img"> <div class="form-check">
<img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/> <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()"/>
<img t-else="" src="/dine360_theme_shivasakthi/static/src/img/cat-biryani.png" class="img-fluid"/> <span class="small fw-bold text-muted" t-field="v.name"/>
</div> </div>
<div class="arrival-info"> </li>
<div class="name fw-bold" t-field="arrival.name"/> </t>
<div class="price"> </ul>
<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> </div>
</t> </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>
</div> </div>
</aside> </aside>