Filter frontend by tags

apps/rp/templates/rp/article_list_public.html

@@ -63,7 +63,6 @@
       </li>
       {% endif %}
 
-
       <li class="nav-item ml-auto">
         <a class="nav-link disabled" href="#">
           <i class="fa fa-search"></i>
@@ -72,7 +71,7 @@
       </li>
 
       <li class="nav-item">
-        <a class="nav-link disabled" href="#">
+        <a class="nav-link" data-toggle="collapse" href="#collapseTags" aria-expanded="false" aria-controls="collapseTags">
           <i class="fa fa-tags"></i>
           Tags
         </a>
@@ -93,13 +92,24 @@
         </span>
       </li>
     {% endif %}
-
     </ul>
 
+    <div class="collapse" id="collapseTags">
+      {% for t in tags %}
+      <a class="badge badge-pill badge-primary" href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}">
+        {{t}} {{t.num_times}}
+
+      </a>
+      {% endfor %}
+    </div>
 
     {% for article in object_list %}
-    <section class="article-card d-flex">
+    <article class="article-card d-flex">
       <div class="article-card-img">
+        <p class="article-card-meta">
+          <span class="article-date">{{ article.created_at|date:"d/m" }}</span> via
+          <span class="article-source">{{ article.website }}</span>
+        </p>
         {% thumbnail article.screenshot "800x400" crop="smart" as im %}
         <img src="{{ im.url }}" width="400" height="200">
         {% endthumbnail %}
@@ -108,7 +118,7 @@
       <div class="article-card-content">
         <p class="tags-list">
           {% for t in article.tags.all %}
-          <a href="#" class="">{{t}}</a>
+          <a href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}" class="">{{t}}</a>
           {% endfor %}
         </p>
         <h4><a href="{{article.url}}">{{article.title}}</a></h4>
@@ -119,7 +129,7 @@
           <p class="read-more"><a href="#" class="btn btn-secondary">Read More</a></p>
         </div>
       </div>
-    </section>
+    </article>
     {% endfor %}
   </div>
 

apps/rp/urls.py

@@ -14,6 +14,11 @@ urlpatterns = [
         ArticleList.as_view(filter_lang='EN'),
         name="public-article-list-international"
     ),
+    url(
+        r"^by-tag/(?P<filter_tag>.*)",
+        ArticleList.as_view(),
+        name="public-article-list-tag"
+    ),
     url(
         r"^article/list/(?P<filter_view>\w+)",
         login_required(ArticleListFlux.as_view()),

apps/rp/views/articles.py

@@ -4,6 +4,7 @@ from django.views.generic.list import ListView
 from django.views.generic.edit import UpdateView
 from django.utils.translation import ugettext_lazy as _
 from django.urls import reverse, reverse_lazy
+from django.db.models import Count
 from django import forms
 
 from django.contrib.auth.mixins import LoginRequiredMixin, PermissionRequiredMixin
@@ -25,18 +26,28 @@ class ArticleList(ListView):
     template_name = "rp/article_list_public.html"
     filter_lang = None
 
+    filter_tag = None
+
     def get_queryset(self):
         if self.filter_lang in ["EN", "FR"]:
             qs = Article.objects.filter(lang=self.filter_lang)
         else:
             qs = Article.objects.filter()
 
+        filter_tag = self.kwargs.get("filter_tag", self.filter_tag)
+        if filter_tag is not None:
+            qs = qs.filter(tags__name__in=[filter_tag])
+
         return qs.order_by('-created_at')
-    #
-    # def get_context_data(self, **kwargs):
-    #     context = super().get_context_data(**kwargs)
-    #     context["filter_lang"] = self.filter_lang
-    #     return context
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        qs = Tag.objects.annotate(num_times=Count('taggit_taggeditem_items')).all()
+        qs = qs.order_by('-num_times')
+        context["tags"] = qs
+
+        return context
 
 
 class ArticleListFlux(UDList):

static/src/components/card.css

 .article-card {
-  margin-bottom: 2rem;
+  margin-bottom: 3rem;
+}
+
+.article-card-meta {
+  font-size: 1.5rem;
+  line-height: 1.1rem;
+  font-weight: 100;
+
+  position: absolute;
+  top: 0.5rem;
+  background-color: var(--color-white);
+  padding: 0.5rem 0.2rem;
 }
 
 .article-card-img {