Card tags template shared

app/Resources/static/themes/material/css/cards.scss

@@ -250,6 +250,10 @@ a.original:not(.waves-effect) {
     float: right;
     max-width: 6em;
   }
+
+  .tags {
+    display: inline-block;
+  }
 }
 
 #content .collection .collection-item {

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

@@ -8,12 +8,8 @@
 
     <div class="{{ subClass|default('original grey-text') }}">
         <a href="{{ entry.url|e }}" target="_blank" title="{{ entry.domainName|removeWww }}" class="tool grey-text">{{ entry.domainName|removeWww }}</a>
-        {% if withTags  %}
+        {% if withTags is defined %}
-            {% for tag in entry.tags | slice(0, 3) %}
+            {% include "@WallabagCore/themes/material/Entry/_tags.html.twig" with {'tags': entry.tags | slice(0, 3), 'listClass': ' hide-on-med-and-down'} only %}
-                <span class="chip hide-on-med-and-down">
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
-                </span>
-            {% endfor %}
         {% endif %}
     </div>
 </div>

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

@@ -0,0 +1,14 @@
+{% if tags is iterable and tags is not empty %}
+    <ul class="tags{{ listClass|default("")}}">
+        {% for tag in tags %}
+            <li class="chip">
+                <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
+                {% if withRemove %}
+                    <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
+                        <i class="material-icons vertical-align-middle">delete</i>
+                    </a>
+                {% endif %}
+            </li>
+        {% endfor %}
+    </ul>
+{% endif %}

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

@@ -268,16 +268,7 @@
                         </li>
                     {% endif %}
                 </ul>
-                <ul class="tags">
+                {% include "@WallabagCore/themes/material/Entry/_tags.html.twig" with {'tags': entry.tags, 'withRemove': true} only %}
-                    {% for tag in entry.tags %}
-                        <li class="chip">
-                            <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
-                            <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
-                                <i class="material-icons vertical-align-middle">delete</i>
-                            </a>
-                        </li>
-                    {% endfor %}
-                </ul>
             </div>
 
             <div class="input-field nav-panel-add-tag" style="display: none">