Design de la page "Tous les tags"

zestedesavoir · Apr 4, 2016 · 116272b · 116272b
1 parent 7d1e2c5
commit 116272b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 29 deletions.
diff --git a/assets/images/sprite/tags.png b/assets/images/sprite/tags.png
diff --git 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;
+        }
     }
-}
+}
diff --git 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
@@ -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 %}