material: add metadata to list view

Add reading time and creation date to rows of list view.
Refactor styles using a sass mixin.

Fixes #3838

Signed-off-by: Kevin Decherf <kevin@kdecherf.com>

2 files changed, 5 insertions, 2 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/Card/_content.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/Card/_content.html.twig
index 1f3cd1a7..1102a0bd 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/Card/_content.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/Card/_content.html.twig
@@ -8,8 +8,11 @@
 
     <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 is defined %}
+        {% if withMetadata is defined %}
             {% include "@WallabagCore/themes/material/Entry/_tags.html.twig" with {'tags': entry.tags | slice(0, 3), 'entryId': entry.id, 'listClass': ' hide-on-med-and-down'} only %}
+            <div class="reading-time grey-text">
+                <div class="card-reading-time">{% include "@WallabagCore/themes/material/Entry/_reading_time.html.twig" with {'entry': entry} only %}</div>
+            </div>
         {% endif %}
     </div>
 </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_list.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_list.html.twig
index 1c00f2fa..6a095035 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_list.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_list.html.twig
@@ -5,7 +5,7 @@
             <span class="preview{{ previewClassModifier }}" style="background-image: url({{ entry.previewPicture | default(asset('wallassets/themes/_global/img/logo-square.svg')) }})"></span>
         </a>
     </div>
-    {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withTags': true, 'subClass': 'metadata'} only %}
+    {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withMetadata': true, 'subClass': 'metadata'} only %}
     <ul class="tools-list hide-on-small-only">
         <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 %}unarchive{% endif %}</i></a>