From 116272bfacde9bfc45f3e414e20596c245bfb644 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Tue, 5 Apr 2016 01:45:31 +0200
Subject: [PATCH] Design de la page "Tous les tags"

---
 assets/images/sprite/tags.png       | Bin 0 -> 1434 bytes
 assets/scss/components/_tags.scss   |  44 ++++++++++++++++++++--------
 assets/scss/layout/_main.scss       |   3 ++
 templates/tutorialv2/view/tags.html |  34 +++++++++++----------
 4 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 assets/images/sprite/tags.png

diff --git a/assets/images/sprite/tags.png b/assets/images/sprite/tags.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fe5621b4d947ae04d34cf1e7eed8c79c029f376
GIT binary patch
literal 1434
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r53?z4+XPOVBSkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#N0|VpK0G|+7paKrp#8EVO
zLI4;eJDkJ?fK+QqkY6x^PQ&3>Z{9wdF3wc-ZP~2XbN+0carBd0+U(CBdDGr8&z$<f
zlS7E>i?d???R#^z+?`&Ae07xhZL);zrWpTUZT7oTOE<;+D2UFmck#)oP<VJp{@QBg
z3jviMuWq=1(f?Gah%jSw#J{Ywf}P)wb^SWt9u^dS(p%-SnfZ0;8<vNB<+@*}2kSkX
zapkHs&_Rqz-tI089jvk*Kn`btM`SSr1Gf+eGhVt|_lJRj>7u8LV@Sl|w>KiAFFS~^
zJy6(otxIFpqK*e`9o%ATMUTXGcSUiB6>jhFUfRXIF0^p|f8Db>b0?)dvu1p6VQzDB
z=Dzbjze*=Put+dnn-M2z98wdSWSVt0yvUb(^R=j^>sikwqT8D%9DlT7yWFRUo)=ql
zZ`_ay;+)RZ^>x`T-efbu1848NzL6w#g|qqO+B>g}sw{5o^<8uQ&B25s>+fZ6crxC-
zy6MZBI<NZskLud$??=DOzgXUQ$@)e9Qud110<0oGt>=8)-gm@h#%A}zfGWn%#X_&1
z8*(%oooBp$UeapWfpv)jCeMEUXkhZ6)8gPg&wp-M!f{EKEzf?gVLGpP{lbj&^}niB
zXRtX0&r6-_U+G+=%*P=0DP}$Qy&2sg)|#uT`2p4pvw(~h=C3x%nmo1S;&^-Bg5%wJ
zgN}FSH8Rc{^SXTUVOnS-?4WaA@qws4$1_WoJyF&f6%kIKWq6*gzskoIC4H_~!NTmF
zY)trBMVs@E2_M=1|M0y!=Ye{jpbf9iy=U_KFRz_dzH_=-MX5o3fAzb9y^#+X_sFxJ
z`TY90+?R~Aesy}kC-9_sU7CGmcK@;;H}51X{dn@y_~BIXE%PV4@;z$_|Mc~!%<{y-
zDOXnqaY=k=`X0Av5!*SI{gd|!Dg8Km<>0do<u-=Lw_P_WQ2R4Cuq$6<L3S0p=<0L(
zjvj2YX+J0EX~CYZu6y`HOYwy|>t^9|2g|=LUBH>Yhn3;Fq0PfuSE&r|AHVq}l`{M)
z3g^@=X<F8D{o8Z@6a$-wKhNt3Nlg2&YP-EVW3#Z`w^moSW}&#Ja=)cGzo^^jzuTW@
zDYe7k;iJmt&>wZ8j5$6#YVQ3|`)1E~ZlZ(j!%vlqmA+rjT2*$#g?XyQ_q+f17+yNG
z$-ZM=)YmWm|H{Me&#(Xc&-vRG8Od$-%BD*zpB^pl^ZKzTJj!O-`HQhy{xQe7p4K1O
mHcR7=Y>Zd_&S|gfuiO9BUYr)l%9#pG@eH1>elF{r5}E*5ATV42

literal 0
HcmV?d00001

diff --git a/assets/scss/components/_tags.scss b/assets/scss/components/_tags.scss
index 75f9b12173..7ce56bcb38 100644
--- a/assets/scss/components/_tags.scss
+++ b/assets/scss/components/_tags.scss
@@ -27,24 +27,42 @@
     }
 }
 
+.content-tags-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    &:after {
+        content: '';
+        display: block;
+        flex: 20;
+    }
+}
+
 .content-tag {
-    display: inline-block;
-    padding: 5px;
-    box-sizing: border-box;
-    color: white;
+    margin: 0 5px 20px;
     line-height: 1.4em;
+    white-space: nowrap;
+    flex: auto;
 
     a {
+        color: #777;
         display: block;
-        padding: 5px 10px;
+        padding: 8px 15px;
         text-decoration: none;
-        color: rgba(255, 255, 255, .7);
-        background: $color-primary;
-        border: solid 1px rgba(0, 0, 0, .5);
-    }
+        background-color: #EEE;
+        transition: all $transition-duration ease;
+        border: solid 1px #CCC;
 
-    strong {
-        display: block;
-        color: white;
+        &:hover, &:focus {
+            color: #EEE;
+            background-color: #777;
+            border-color: #777;
+            outline: none;
+        }
+
+        .tag-count {
+            color: #AAA;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/layout/_main.scss b/assets/scss/layout/_main.scss
index f5cb2fdb27..69811cb674 100644
--- a/assets/scss/layout/_main.scss
+++ b/assets/scss/layout/_main.scss
@@ -41,6 +41,9 @@
         &.ico-forum:after {
             @include sprite-position($forum-heading);
         }
+        &.ico-tags:after {
+            @include sprite-position($tags);
+        }
 
         &.illu img {
             position: absolute;
diff --git a/templates/tutorialv2/view/tags.html b/templates/tutorialv2/view/tags.html
index 5487655682..20ec85ac9f 100644
--- a/templates/tutorialv2/view/tags.html
+++ b/templates/tutorialv2/view/tags.html
@@ -18,21 +18,23 @@
 
 
 
-{% block headline %}
-
-{% endblock %}
-
-
-
-{% block content %}
-    {% for tag in tags %}
-        <div class="content-tag">
-            <a href="{% url 'content:list' %}?tag={{ tag.slug }}">
-                <strong>{{ tag }}</strong>
-                <span>{{ tag.num_content }} {% trans "contenu" %}{{ tag.num_content|pluralize }}</span>
-            </a>
+{% block content_out %}
+    <section class="full-content-wrapper">
+        <h2 class="ico-after ico-tags">
+          Tous les tags
+        </h2>
+
+        <div class="content-tags-list">
+            {% for tag in tags %}
+                <div class="content-tag">
+                    <a href="{% url 'content:list' %}?tag={{ tag.slug }}">
+                        <div class="tag-title">{{ tag }}</div>
+                        <div class="tag-count">{{ tag.num_content }} {% trans "contenu" %}{{ tag.num_content|pluralize }}</div>
+                    </a>
+                </div>
+            {% empty %}
+                <p>{% trans "Aucun tag." %}</p>
+            {% endfor %}
         </div>
-    {% empty %}
-        <p>{% trans "Aucun tag." %}</p>
-    {% endfor %}
+    </section>
 {% endblock %}