Fixed tags display on grid view

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

@@ -182,6 +182,23 @@ a.original:not(.waves-effect) {
   ul.tools-list {
     display: none;
   }
+
+  .preview {
+    float: left;
+    width: 90px;
+    height: 50px;
+
+    img {
+      max-height: 50px;
+      padding-right: 10px;
+      width: 80px;
+    }
+  }
+
+  .domain,
+  .footer {
+    font-size: 12px;
+  }
 }
 
 .quickstart .card .card-action a,

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

@@ -2,6 +2,15 @@
  * Entries
  * ========================================================================== */
 
+.collection {
+  margin: 15px 15px 0;
+
+  .collection-item {
+    padding: 7px;
+    height: 65px;
+  }
+}
+
 .results {
   height: 1em;
 

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

@@ -30,3 +30,23 @@ nav .input-field input {
 .tab {
   flex: 1;
 }
+
+.chip {
+  margin: auto 0;
+  border-radius: 4px;
+  background-color: #eee;
+  font-weight: normal;
+  height: 20px;
+  line-height: normal;
+
+  a {
+    color: #9e9e9e;
+  }
+
+  i.material-icons {
+    float: right;
+    font-size: 16px;
+    line-height: 32px;
+    padding-left: 8px;
+  }
+}

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

@@ -1,25 +1,30 @@
-<div class="card">
+<div class="card-stacked">
-    <div class="card-stacked">
+    <div class="card-content">
-        <div class="card-content">
+        <div class="preview"><img src="{{ entry.previewPicture }}" /></div>
-            <span class="card-title dot-ellipsis dot-resize-update">
+        <span class="card-title dot-ellipsis dot-resize-update">
-                <a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | striptags | e('html_attr') }}">
+            <a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | striptags | e('html_attr') }}">
-                    {{ entry.title| striptags | truncate(120, true, '…') | raw }}
+                {{ entry.title| striptags | truncate(120, true, '…') | raw }}
-                </a>
+            </a>
+            <a href="{{ entry.url|e }}" class="grey-text domain" target="_blank" title="{{ entry.domainName|removeWww }}">
+                <span>{{ entry.domainName|removeWww }}</span>
+            </a>
+        </span>
+
+        <div class="footer">
+        {% for tag in entry.tags | slice(0, 3) %}
+            <span class="chip hide-on-med-and-down">
+                <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
             </span>
-            <ul class="right">
+        {% endfor %}
-                <li>
+
-                    <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i></a>
+        <ul class="tools-list right">
-                    <a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
+            <li>
-                    <a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
+                <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i></a>
-                </li>
+                <a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
-            </ul>
+                <a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
-            <div class="right">
+            </li>
-            {% for tag in entry.tags | slice(0, 3) %}
+        </ul>
-                <span class="chip">
+
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i class="material-icons">delete</i></a>
-                </span>
-            {% endfor %}
-            </div>
         </div>
     </div>
 </div>

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

@@ -24,9 +24,9 @@
     </div>
 
     <br />
-    <ul class="row data">
+    <ul class="{% if listMode == 1 %}collection{% else %}row data{% endif %}">
         {% for entry in entries %}
-            <li id="entry-{{ entry.id|e }}" class="col {% if listMode == 0 %}l3 m6{% endif %} s12">
+            <li id="entry-{{ entry.id|e }}" class="col {% if listMode == 0 %}l3 m6{% else %}collection-item{% endif %} s12">
                 {% if listMode == 1 %}
                     {% include "@WallabagCore/themes/material/Entry/_card_list.html.twig" with {'entry': entry} only %}
                 {% elseif entry.previewPicture is null %}