implement custom theme styling, blog page structure, and controller logic for Dine360 theme

addons/dine360_theme_chennora/controllers/main.py

@@ -9,7 +9,9 @@ def get_blogs():
     json_path = os.path.join(os.path.dirname(__file__), '../data/blogs.json')
     if os.path.exists(json_path):
         with open(json_path, 'r', encoding='utf-8-sig') as f:
-            return json.load(f)
+            blogs = json.load(f)
+            # Reversing so the last added blog appears first
+            return blogs[::-1] if isinstance(blogs, list) else blogs
     return []
 
 class ContactController(http.Controller):
@@ -74,11 +76,32 @@ class ContactController(http.Controller):
         return request.render('dine360_theme_chennora.contact_thank_you')
 
 class BlogController(http.Controller):
-    @http.route(['/blog'], type='http', auth='public', website=True)
-    def blog_list(self, **post):
-        blog_posts = get_blogs()
+    @http.route(['/blog', '/blog/page/<int:page>'], type='http', auth='public', website=True)
+    def blog_list(self, page=1, **post):
+        all_blogs = get_blogs()
+        
+        # Pagination Settings
+        per_page = 12
+        total = len(all_blogs)
+        
+        # Odoo's built-in pager
+        pager = request.website.pager(
+            url='/blog',
+            total=total,
+            page=page,
+            step=per_page,
+            scope=5,
+            url_args=post,
+        )
+        
+        # Extract blogs for current page
+        start = (page - 1) * per_page
+        end = start + per_page
+        blogs_paged = all_blogs[start:end]
+
         return request.render('dine360_theme_chennora.blog_page', {
-            'blog_posts': blog_posts,
+            'blog_posts': blogs_paged,
+            'pager': pager,
         })
 
     @http.route(['/blog/<string:slug>'], type='http', auth='public', website=True)

addons/dine360_theme_chennora/static/src/scss/theme.scss

@@ -1751,4 +1751,44 @@ body.o_edit_mode {
         width: 100%;
         border: 0;
     }
+}
+
+// Custom Pagination Styling
+.pagination {
+    .page-item {
+        margin: 0 4px;
+        
+        .page-link {
+            border-radius: 50% !important;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #ddd;
+            color: #04121D;
+            background-color: #fff;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            
+            &:hover, &:focus {
+                background-color: #FECD4F;
+                border-color: #FECD4F;
+                color: #04121D;
+                box-shadow: none;
+            }
+        }
+        
+        &.active .page-link {
+            background-color: #04121D !important;
+            border-color: #04121D !important;
+            color: #FFFFFF !important;
+        }
+        
+        &.disabled .page-link {
+            background-color: #f8f9fa;
+            border-color: #ddd;
+            color: #999;
+        }
+    }
 }

addons/dine360_theme_chennora/views/blog_page.xml

@@ -61,6 +61,11 @@
                                     </div>
                                 </t>
                             </div>
+
+                            <!-- Pagination -->
+                            <div class="d-flex justify-content-center mt-5" t-if="pager and pager.get('page_count', 0) > 1">
+                                <t t-call="website.pager"/>
+                            </div>
                         </div>
                     </section>