Tags list view improved

No text ellipsis so we can see the whole tag, better responsiveness, bigger
touch height on links.

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

@@ -160,10 +160,17 @@ a.original:not(.waves-effect) {
   border-radius: 0 3px 3px 0;
   color: #fff;
   cursor: default;
-  max-height: 2em;
+}
-  overflow: hidden;
+
+.card-entry-labels li {
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
+}
+
+.card-tag-labels li {
+  display: flex;
+  justify-content: space-between;
 }
 
 .card-entry-tags a,
@@ -176,6 +183,33 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
+.card-tag-labels a {
+  height: 100%;
+  align-items: center;
+}
+
+.card-tag-link {
+  display: flex;
+  min-width: 100px;
+  flex-grow: 1;
+}
+
+.card-tag-rss {
+  display: flex;
+}
+
+.card-tag-labels {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card-tag-labels li {
+  margin: 10px;
+  flex-basis: 19%;
+  flex-grow: 1;
+  align-items: center;
+}
+
 .card-stacked {
   display: flex;
   flex-flow: row wrap;
@@ -245,3 +279,9 @@ a.original:not(.waves-effect) {
 .settings .div_tabs {
   padding-bottom: 15px;
 }
+
+@media only screen and (min-width: 992px) {
+  .card-tag-labels li {
+    max-width: 50%;
+  }
+}

src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig

@@ -12,10 +12,10 @@
     <div class="row">
         <ul class="card-tag-labels">
             {% for tag in tags %}
-                <li title="{{tag.label}} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="col l2 m2 s5">
+                <li title="{{tag.label}} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}">
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{tag.label}} ({{ tag.nbEntries }})</a>
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link">{{tag.label}} ({{ tag.nbEntries }})</a>
                     {% if app.user.config.rssToken %}
-                        <a rel="alternate" type="application/rss+xml" href="{{ path('tag_rss', {'username': app.user.username, 'token': app.user.config.rssToken, 'slug': tag.slug}) }}" class="right"><i class="material-icons">rss_feed</i></a>
+                        <a rel="alternate" type="application/rss+xml" href="{{ path('tag_rss', {'username': app.user.username, 'token': app.user.config.rssToken, 'slug': tag.slug}) }}" class="card-tag-rss"><i class="material-icons">rss_feed</i></a>
                     {% endif %}
                 </li>
             {% endfor %}