From c32a9424d5e52f8bb5640daed1f4a1d5e1ab115a Mon Sep 17 00:00:00 2001
From: Luc Rocher <luc@rocher.lc>
Date: Mon, 19 Jun 2017 10:53:36 +0200
Subject: [PATCH] Add tentative style for tag badges

---
 apps/rp/templates/rp/article_list_public.html | 10 ++++---
 static/src/components/badge.css               | 28 +++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/apps/rp/templates/rp/article_list_public.html b/apps/rp/templates/rp/article_list_public.html
index dbc7a0c..8d74017 100644
--- a/apps/rp/templates/rp/article_list_public.html
+++ b/apps/rp/templates/rp/article_list_public.html
@@ -21,8 +21,9 @@
 
   <div class="row">
   <div class="col-md-10 offset-1">
+    <header class="my-4">
 
-    <ul class="nav nav-compressed my-4">
+    <ul class="nav nav-compressed">
       {% if view.filter_lang == 'EN' %}
       <li class="nav-item">
         <a class="nav-link" href="{% url 'rp:public-article-list' %}">
@@ -96,13 +97,14 @@
 
     <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 class="badge badge-tag" href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}">
+        <span>{{t}}</span>
       </a>
       {% endfor %}
     </div>
 
+    </header>
+
     {% for article in object_list %}
     <article class="article-card d-flex">
       <div class="article-card-img">
diff --git a/static/src/components/badge.css b/static/src/components/badge.css
index d152757..7ee496c 100644
--- a/static/src/components/badge.css
+++ b/static/src/components/badge.css
@@ -5,3 +5,31 @@
 .badge.badge-info {
   background-color: var(--color-light-blue);
 }
+
+.badge.badge-tag {
+  border: 1px solid var(--color-light-blue);
+  color: var(--color-dark-blue);
+  font-weight: 300;
+  font-size: 0.9rem;
+
+  display: inline-flex;
+
+  margin: 0.25rem 0;
+  padding: 0;
+  & span {
+    padding: 0.50em 0.4em;
+  }
+
+  & span.badge-count {
+    border-left: 1px solid var(--color-light-blue);
+  }
+
+  &:hover, &:active, &:focus {
+    color: var(--color-black);
+    border-color: var(--color-dark-blue);
+
+    & span.badge-count {
+      border-color: var(--color-dark-blue);
+    }
+  }
+}
-- 
GitLab