Add tags on entries view

Should be tested on old browsers

app/Resources/static/themes/material/css/main.css

@@ -342,6 +342,44 @@ main ul.row {
   line-height: 32px;
 }
 
+.card .card-entry-labels {
+    position: absolute;
+    top:10px;
+    z-index: 90;
+    max-width: 50%;
+}
+
+.card .card-entry-labels li {
+    margin: 10px 10px 10px auto;
+    padding: 5px 12px 5px 16px;
+    background-color: rgba(0,151,167,0.85);
+    border-radius: 0 3px 3px 0;
+    color: #fff;
+    cursor: default;
+    max-height: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.card .card-entry-labels-hidden {
+    margin-top: 5px;
+}
+
+.card .card-entry-labels-hidden li {
+    display: inline-block;
+    background-color: rgba(0,151,167,0.85);
+    margin: 0 5px;
+    padding: 5px 12px;
+    border-radius: 3px;
+    color: #fff;
+    max-height: 2em;
+    max-width: calc(100% - 15px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .card .card-content .estimatedTime {
   margin-bottom: 10px;
 }

src/Wallabag/CoreBundle/Resources/translations/messages.en.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'estimated reading time'
         reading_time_minutes: 'estimated reading time: %readingTime% min'
         reading_time_less_one_minute: 'estimated reading time: <small class="inferieur">&lt;</small> 1 min'
+        number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Toggle mark as read'
         toogle_as_star: 'Toggle favorite'

src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'durée de lecture'
         reading_time_minutes: 'durée de lecture: %readingTime% min'
         reading_time_less_one_minute: 'durée de lecture: <small class="inferieur">&lt;</small> 1 min'
+        number_of_tags: '{1}et un autre tag|]1,Inf[et %count% autres tags'
         original_article: 'original'
         toogle_as_read: 'Marquer comme lu/non lu'
         toogle_as_star: 'Marquer comme favori'

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig

@@ -26,6 +26,11 @@
                     <div class="card-body">
                         {% if not entry.previewPicture is null %}
                             <div class="card-image waves-effect waves-block waves-light">
+                                <ul class="card-entry-labels">
+                                {% for tag in entry.tags | slice(0, 3) %}
+                                    <li>{{ tag.label }}</li>
+                                {% endfor %}
+                                </ul>
                                 <div class="preview activator" style="background-image: url({{ entry.previewPicture }})"></div>
                             </div>
                         {% endif %}
@@ -50,6 +55,11 @@
 
                             {% if entry.previewPicture is null %}
                                 <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
+                                <ul class="card-entry-labels-hidden">
+                                {% for tag in entry.tags | slice(0, 2) %}
+                                    <li>{{ tag.label }}</li>
+                                {% endfor %}
+                            </ul>
                             {% endif %}
                         </div>
                     </div>
@@ -66,6 +76,15 @@
                             </div>
 
                             <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
+
+                            <ul class="card-entry-labels-hidden">
+                                {% for tag in entry.tags | slice(0, 2) %}
+                                    <li>{{ tag.label }}</li>
+                                {% endfor %}
+                            </ul>
+                            {% if entry.tags | length > 2 %}
+                                {{ 'entry.list.number_of_tags'|transchoice(entry.tags | length - 2) }}
+                            {% endif %}
                         </div>
                     {% endif %}