Improved tags list for material view

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

@@ -173,7 +173,6 @@ a.original:not(.waves-effect) {
 
 .card-tag-labels li {
   display: flex;
-  justify-content: space-between;
 }
 
 .card-entry-tags a,
@@ -186,15 +185,12 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
-.card-tag-labels a {
-  height: 100%;
-  align-items: center;
-}
-
 .card-tag-link {
-  display: flex;
+  width: calc(100% - 48px);
-  min-width: 100px;
+  line-height: 1.3;
-  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .card-tag-form {
@@ -205,22 +201,20 @@ a.original:not(.waves-effect) {
 
 .card-tag-form input {
   margin-bottom: 0;
-  height: 2rem;
+  height: 1.8rem;
 }
 
-.card-tag-rss {
+.card-tag-icon {
   display: flex;
 }
 
 .card-tag-labels {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .card-tag-labels li {
   margin: 10px;
-  flex-basis: 19%;
-  flex-grow: 1;
   align-items: center;
 }
 

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

@@ -12,10 +12,6 @@
   .pagination {
     margin-left: auto;
   }
-
-  .card-tag-labels li {
-    max-width: 50%;
-  }
 }
 
 @media screen and (min-width: 993px) {

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

@@ -430,6 +430,7 @@ tag:
         # number_on_the_page: '{0} There is no tag.|{1} There is one tag.|]1,Inf[ There are %count% tags.'
         # see_untagged_entries: 'See untagged entries'
         # no_untagged_entries: 'There are no untagged entries.'
+        # untagged: 'Untagged entries'
     new:
         # add: 'Add'
         # placeholder: 'You can add several tags, separated by a comma.'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: '{0} Es gibt keine Tags.|{1} Es gibt einen Tag.|]1,Inf[ Es gibt %count% Tags.'
         see_untagged_entries: 'Zeige nicht getaggte Einträge'
         # no_untagged_entries: 'There are no untagged entries.'
+        untagged: 'Nicht getaggte Einträge'
     new:
         add: 'Hinzufügen'
         placeholder: 'Du kannst verschiedene Tags, getrennt von einem Komma, hinzufügen.'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: '{0} There are no tags.|{1} There is one tag.|]1,Inf[ There are %count% tags.'
         see_untagged_entries: 'See untagged entries'
         no_untagged_entries: 'There are no untagged entries.'
+        untagged: 'Untagged entries'
     new:
         add: 'Add'
         placeholder: 'You can add several tags, separated by a comma.'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: '{0} No hay ninguna etiqueta.|{1} Hay una etiqueta.|]1,Inf[ Hay %count% etiquetas.'
         see_untagged_entries: 'Ver artículos sin etiquetas'
         no_untagged_entries: 'No hay artículos sin etiquetas.'
+        untagged: 'Artículos sin etiquetas'
     new:
         add: 'Añadir'
         placeholder: 'Puedes añadir varias etiquetas, separadas por una coma.'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: '{0} هیچ برچسبی نیست.|{1} یک برچسب هست.|]1,Inf[ %count% برچسب هست.'
         # see_untagged_entries: 'See untagged entries'
         # no_untagged_entries: 'There are no untagged entries.'
+        # untagged: 'Untagged entries'
     new:
         # add: 'Add'
         # placeholder: 'You can add several tags, separated by a comma.'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: "{0} Il n’y a pas de tag.|{1} Il y a un tag.|]1,Inf[ Il y a %count% tags."
         see_untagged_entries: "Voir les articles sans tag"
         no_untagged_entries: 'Aucun article sans tag.'
+        untagged: "Article sans tag"
     new:
         add: "Ajouter"
         placeholder: "Vous pouvez ajouter plusieurs tags, séparés par une virgule."

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: "{0} Non ci sono etichette.|{1} C'è un'etichetta.|]1,Inf[ ci sono %count% etichette."
         see_untagged_entries: 'Vedi articoli non etichettati'
         # no_untagged_entries: 'There are no untagged entries.'
+        untagged: 'Articoli non etichettati'
     new:
         add: 'Aggiungi'
         placeholder: 'Puoi aggiungere varie etichette, separate da una virgola.'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: '{0} タグはありません|{1} 1 件のタグ|]1,Inf[ %count% 件のタグ'
         see_untagged_entries: 'タグの無い記事を見る'
         no_untagged_entries: 'タグの付いていない記事は存在しません。'
+        untagged: 'タグの無い記事'
     new:
         add: '追加'
         placeholder: 'コンマ「,」で区切ることで、複数のタグを追加できます。'

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: "{0} I a pas cap d'etiquetas.|{1} I a una etiqueta.|]1,Inf[ I a %count% etiquetas."
         see_untagged_entries: "Afichar las entradas sens etiquetas"
         no_untagged_entries: 'I a pas cap d’article pas etiquetat.'
+        untagged: 'Articles sens etiqueta'
     new:
         add: 'Ajustar'
         placeholder: "Podètz ajustar mai qu'una etiqueta, separadas per de virgula."

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

@@ -430,6 +430,7 @@ tag:
         number_on_the_page: '{0} Nie ma tagów.|{1} Jest jeden tag.|]1,Inf[ Są %count% tagi.'
         see_untagged_entries: 'Zobacz nieotagowane wpisy'
         # no_untagged_entries: 'There are no untagged entries.'
+        untagged: 'Odtaguj wpisy'
     new:
         add: 'Dodaj'
         placeholder: 'Możesz dodać kilka tagów, oddzielając je przecinkami.'

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

@@ -4,15 +4,16 @@
 
 {% block content %}
     <div class="results clearfix">
-        <div class="nb-results left">{{ 'tag.list.number_on_the_page'|transchoice(tags|length) }}</div>
+        {{ 'tag.list.number_on_the_page'|transchoice(tags|length) }}
     </div>
 
-    <br />
-
     <div class="row">
         <ul class="card-tag-labels">
+            <li class="chip">
+                <a href="{{ path('untagged') }}">{{ 'tag.list.untagged'|trans }} ({{nbEntriesUntagged}})</a>
+            </li>
             {% for tag in tags %}
-                <li title="{{tag.label}} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}">
+                <li title="{{tag.label}} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="chip">
                     <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-handle="tag-link">
                         {{ tag.label }}&nbsp;({{ tag.nbEntries }})
                     </a>
@@ -21,12 +22,12 @@
                         {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
                         {{ form_rest(renameForms[tag.id]) }}
                     </form>
-                    <a class="card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
+                    <a class="card-tag-icon card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
                         <i class="material-icons">mode_edit</i>
                     </a>
                     {% endif %}
                     {% if app.user.config.feedToken %}
-                        <a rel="alternate" type="application/atom+xml" href="{{ path('tag_feed', {'username': app.user.username, 'token': app.user.config.feedToken, 'slug': tag.slug}) }}" class="card-tag-rss"><i class="material-icons">rss_feed</i></a>
+                        <a rel="alternate" type="application/atom+xml" href="{{ path('tag_feed', {'username': app.user.username, 'token': app.user.config.feedToken, 'slug': tag.slug}) }}" class="card-tag-icon"><i class="material-icons">rss_feed</i></a>
                     {% endif %}
                 </li>
             {% endfor %}
@@ -34,10 +35,6 @@
     </div>
 
     <div>
-        {% if nbEntriesUntagged == 0 %}
+
-            {{ 'tag.list.no_untagged_entries'|trans }}
-        {% else %}
-            <a href="{{ path('untagged') }}">{{ 'tag.list.see_untagged_entries'|trans }} ({{nbEntriesUntagged}})</a>
-        {% endif %}
     </div>
 {% endblock %}