Add initial Chennora theme module with custom website layout, footer, and category slider.
This commit is contained in:
parent
47cc9f113d
commit
21da2e5160
@ -17,6 +17,7 @@
|
||||
'dine360_theme_chennora/static/src/scss/primary_variables.scss',
|
||||
'dine360_theme_chennora/static/src/scss/theme.scss',
|
||||
'dine360_theme_chennora/static/src/js/deal_switcher.js',
|
||||
'dine360_theme_chennora/static/src/js/category_slider.js',
|
||||
],
|
||||
},
|
||||
'images': [
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import publicWidget from "@web/legacy/js/public/public_widget";
|
||||
|
||||
publicWidget.registry.CategoryCarousel = publicWidget.Widget.extend({
|
||||
selector: '.s_category_slider',
|
||||
start: function () {
|
||||
this.$track = this.$('.category-track');
|
||||
this.$items = this.$('.category-item');
|
||||
|
||||
if (!this.$track.length || !this.$items.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentIndex = 0;
|
||||
this.totalOriginal = this.$items.length;
|
||||
|
||||
// Clone all items and append for seamless loop
|
||||
// We ensure we have enough content to scroll endlessly
|
||||
const itemsToClone = this.$items.clone();
|
||||
this.$track.append(itemsToClone);
|
||||
|
||||
// Update items list
|
||||
this.$newItems = this.$('.category-item');
|
||||
|
||||
// 3 seconds interval
|
||||
this._startAutoSlide();
|
||||
|
||||
// Pause on hover
|
||||
this.$el.on('mouseenter', () => this._stopAutoSlide());
|
||||
this.$el.on('mouseleave', () => this._startAutoSlide());
|
||||
|
||||
// Handle window resize to reset alignment
|
||||
$(window).on('resize', () => {
|
||||
this._slide(true);
|
||||
});
|
||||
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
_startAutoSlide: function () {
|
||||
if (this.interval) clearInterval(this.interval);
|
||||
this.interval = setInterval(this._slide.bind(this), 3000); // 3 seconds
|
||||
},
|
||||
|
||||
_stopAutoSlide: function () {
|
||||
if (this.interval) clearInterval(this.interval);
|
||||
},
|
||||
|
||||
_slide: function (resize = false) {
|
||||
if (resize) {
|
||||
// Just reset position on resize to avoid misalignment
|
||||
const itemWidth = this.$newItems.first().outerWidth(true);
|
||||
this.$track.css({
|
||||
'transition': 'none',
|
||||
'transform': `translateX(-${this.currentIndex * itemWidth}px)`
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current item width (responsive)
|
||||
const itemWidth = this.$newItems.first().outerWidth(true);
|
||||
|
||||
this.currentIndex++;
|
||||
|
||||
this.$track.css({
|
||||
'transition': 'transform 0.5s ease-in-out',
|
||||
'transform': `translateX(-${this.currentIndex * itemWidth}px)`
|
||||
});
|
||||
|
||||
// Loop check
|
||||
// If we have moved past the original set
|
||||
if (this.currentIndex >= this.totalOriginal) {
|
||||
setTimeout(() => {
|
||||
// Snap back to 0 (visually identical position)
|
||||
// We use 0 because 0 is the start of Original Set
|
||||
// When currentIndex == totalOriginal, we are at the start of Cloned Set
|
||||
// Cloned Set is identical to Original Set.
|
||||
this.$track.css({
|
||||
'transition': 'none',
|
||||
'transform': 'translateX(0)'
|
||||
});
|
||||
this.currentIndex = 0;
|
||||
}, 500); // Wait for transition to finish
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default publicWidget.registry.CategoryCarousel;
|
||||
@ -88,19 +88,19 @@
|
||||
|
||||
<xpath expr="//header" position="before">
|
||||
<!-- Back to Dashboard Top Bar -->
|
||||
<div class="o_header_top_bar bg-dark text-white py-2" style="z-index: 1050; position: relative;">
|
||||
<!-- <div class="o_header_top_bar bg-dark text-white py-2" style="z-index: 1050; position: relative;">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<a href="/" class="text-white text-decoration-none fw-bold text-uppercase d-flex align-items-center" style="font-size: 12px; letter-spacing: 1px; transition: opacity 0.3s;">
|
||||
<i class="fa fa-th-large me-2" style="color: #FECD4F;"></i>
|
||||
<span>Back to Dashboard</span>
|
||||
</a>
|
||||
</a> -->
|
||||
|
||||
<!-- Optional: Right side link (e.g. account) could go here -->
|
||||
<div class="text-white-50 small">
|
||||
<!-- <div class="text-white-50 small">
|
||||
<i class="fa fa-user-circle me-1"></i> <t t-esc="user_id.name"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<t t-set="cta_btn_text" t-value="False"/>
|
||||
<t t-set="cta_btn_href">/contactus</t>
|
||||
|
||||
@ -272,111 +272,76 @@
|
||||
</section>
|
||||
|
||||
<!-- Category Slider Section -->
|
||||
<section class="s_category_slider o_colored_level pb64" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
|
||||
<section class="s_category_slider o_colored_level" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
|
||||
<div class="container-fluid overflow-hidden">
|
||||
<div id="categoryCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
|
||||
<div class="carousel-inner">
|
||||
<!-- Slide 1 -->
|
||||
<div class="carousel-item active">
|
||||
<div class="row g-4 justify-content-center">
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="House Biryani"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">House Biryani</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-beverages.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Cold Beverages"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Cold Beverages</h6>
|
||||
<small class="text-muted">3+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-desserts.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Desserts"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Desserts</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Dosa Varieties"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Dosa Varieties</h6>
|
||||
<small class="text-muted">10+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="category-track d-flex flex-nowrap">
|
||||
|
||||
<!-- Item 1: House Biryani -->
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
|
||||
<a href="/shop" class="d-block text-decoration-none p-2">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="House Biryani"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 (Looping the same for infinite feel if no others provided) -->
|
||||
<div class="carousel-item">
|
||||
<div class="row g-4 justify-content-center">
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Dosa Varieties"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Dosa Varieties</h6>
|
||||
<small class="text-muted">10+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="House Biryani"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">House Biryani</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-beverages.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Cold Beverages"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Cold Beverages</h6>
|
||||
<small class="text-muted">3+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center">
|
||||
<a href="/shop" class="d-block text-decoration-none">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-desserts.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Desserts"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Desserts</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">House Biryani</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Item 2: Cold Beverages -->
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
|
||||
<a href="/shop" class="d-block text-decoration-none p-2">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-beverages.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Cold Beverages"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Cold Beverages</h6>
|
||||
<small class="text-muted">3+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Item 3: Curries -->
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
|
||||
<a href="/shop" class="d-block text-decoration-none p-2">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Item 4: Desserts -->
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
|
||||
<a href="/shop" class="d-block text-decoration-none p-2">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-desserts.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Desserts"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Desserts</h6>
|
||||
<small class="text-muted">5+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Item 5: Dosa Varieties -->
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
|
||||
<a href="/shop" class="d-block text-decoration-none p-2">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-dosa.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Dosa Varieties"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Dosa Varieties</h6>
|
||||
<small class="text-muted">10+ Varieties</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Item 6: Repeat Curries for filler -->
|
||||
<div class="col-lg-2 col-md-4 col-6 category-item text-center flex-shrink-0">
|
||||
<a href="/shop" class="d-block text-decoration-none p-2">
|
||||
<div class="bg-white rounded p-1 shadow-sm mb-3 category-img" style="border: 2px solid transparent; border-radius: 20px !important; overflow: hidden;">
|
||||
<img src="/dine360_theme_chennora/static/src/img/cat-curries.png" class="img img-fluid" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 15px;" alt="Curries"/>
|
||||
</div>
|
||||
<h6 class="fw-bold mb-1 text-dark" style="font-size: 16px;">Curries & More</h6>
|
||||
<small class="text-muted">Check Menu</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user