Tips views: Adding navbar and category filter

redhat-beyond · Apr 19, 2022 · 3c1d8b2 · 3c1d8b2
1 parent 46cfb34
commit 3c1d8b2
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 1 deletion.
diff --git a/tips/templates/tips/categories.html b/tips/templates/tips/categories.html
@@ -0,0 +1,46 @@
+{% extends "base.html" %} {%load static%} {%block content%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>HTML 5 Boilerplate</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <script src="index.js"></script>
+    {% for tip in category_filtered_tips %}
+        <article class="post vt-post">
+            <div class="row">
+                <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4">
+                    <div class="post-type post-img">
+                        <a href="#"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-responsive" alt="image post"></a>
+                    </div>
+                    <div class="author-info author-info-2">
+                        <ul class="list-inline">
+                            <li>
+                                <div class="info">
+                                    <p>Posted on:</p>
+                                    <strong>{{ tip.date}}</strong></div>
+                            </li>
+                            <li>
+                                <div class="info">
+                                    <p>Category:</p>
+                                    <strong>{{ tip.category }}</strong></div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-7 col-md-7 col-lg-8">
+                    <div class="caption">
+                        <h3 class="md-heading"><a href="#">{{ tip.author }}</a></h3>
+                        <p> {{ tip.text }}</p>
+                        <a class="btn btn-default" href="#" role="button">Read More</a> </div>
+                </div>
+            </div>
+        </article>
+    {% endfor %}
+  </body>
+</html>
+{% endblock %}
diff --git a/tips/templates/tips/index.html b/tips/templates/tips/index.html
@@ -6,12 +6,46 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>HTML 5 Boilerplate</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div class="container">
         <div class="grid">
-          <a class="btn btn-primary" href="add_tip/" role="button">Add new tip</a>
+            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+              <div class="container-fluid">
+                <a class="navbar-brand" href="#">Tips</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                  <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
+                  <ul class="navbar-nav">
+                    <li class="nav-item">
+                      <a class="nav-link" type="button" href="add_tip/" role="button">Add new tip</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                      <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Categories
+                      </a>
+                      <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
+                        <li><a class="dropdown-item" href="#">Rent</a></li>
+                        <li><a class="dropdown-item" href="#">Mortgage</a></li>
+                        <li><a class="dropdown-item" href="#">Bills</a></li>
+                        <li><a class="dropdown-item" href="#">Transportation</a></li>
+                        <li><a class="dropdown-item" href="#">Clothing</a></li>
+                        <li><a class="dropdown-item" href="#">Healthcare</a></li>
+                        <li><a class="dropdown-item" href="#">Food</a></li>
+                        <li><a class="dropdown-item" href="#">Kids</a></li>
+                        <li><a class="dropdown-item" href="#">Culture</a></li>
+                        <li><a class="dropdown-item" href="#">Vacations</a></li>
+                        <li><a class="dropdown-item" href="#">Other</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </nav>
           {% for tip in tips %}
             <article class="post vt-post">
                 <div class="row">
@@ -57,6 +91,7 @@ <h3 class="md-heading"><a href="#">{{ tip.author }}</a></h3>
             <div class="clearfix"></div>
         </div>
     </div>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </body>
 </html>
 {% endblock %}

diff --git a/tips/templates/tips/style.css b/tips/templates/tips/style.css
@@ -645,4 +645,9 @@ blockquote {
 
 .pagination {
     margin: 0px;
+}
+
+a.nav-link{
+    display: flex;
+    color:  rgba(255,255,255,.55);
 }
diff --git a/tips/urls.py b/tips/urls.py
@@ -8,4 +8,5 @@
     path('<int:tip_id>/', views.detail, name='detail'),
     path('add_tip/', views.add_tip, name='add_tip'),
     path('edit_tip/<int:tip_id>/', views.edit_tip, name='edit_tip'),
+    path('category/<str:cats>/', views.categories_filter, name='category')
 ]
diff --git a/tips/views.py b/tips/views.py
@@ -19,6 +19,11 @@ def add_tip(request):
     return render(request, 'tips/add_tip.html', {'form': form})
 
 
+def categories_filter(request, cats):
+    category_filtered_tips = Tip.objects.filter(category=cats)
+    return render(request, 'tips/categories.html', {'cats': cats, 'category_filtered_tips': category_filtered_tips})
+
+
 def detail(request, tip_id):
     tip = get_object_or_404(Tip, pk=tip_id)
     return render(request, 'tips/detail.html', {'tip': tip})