From 4b5b228650cd109db7b21fd754581416e7f7d97e Mon Sep 17 00:00:00 2001 From: Kevin Decherf Date: Sat, 27 Apr 2019 22:48:28 +0200 Subject: 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 --- .../static/themes/material/css/cards.scss | 52 ++++++++++++++++------ .../static/themes/material/css/media_queries.scss | 4 ++ .../themes/material/Entry/Card/_content.html.twig | 5 ++- .../themes/material/Entry/_card_list.html.twig | 2 +- 4 files changed, 47 insertions(+), 16 deletions(-) diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 68001a01..0cdc7457 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -18,6 +18,24 @@ main { overflow: hidden; } +@mixin mixin-reading-time { + .reading-time { + display: inline-flex; + vertical-align: middle; + + .card-reading-time, + .card-created-at { + display: inline-flex; + } + + span { + margin-right: 5px; + } + + @content; + } +} + .card { .card-content .card-title, .card-reveal .card-title { @@ -98,19 +116,7 @@ main { margin-right: 5px !important; } - .reading-time { - display: inline-flex; - vertical-align: middle; - - .card-reading-time, - .card-created-at { - display: inline-flex; - } - - span { - margin-right: 5px; - } - } + @include mixin-reading-time; } .card-image { @@ -224,10 +230,18 @@ a.original:not(.waves-effect) { } div.metadata { + overflow: hidden; + height: 1.5em; + display: flex; + + ul.tags { + margin-left: 4px; + } + .chip { background-color: $blueAccentColor; padding: 0 7px; - margin: auto 2px; + margin: auto 1px; border-radius: 6px; line-height: 22px; height: 22px; @@ -244,6 +258,16 @@ a.original:not(.waves-effect) { padding-left: 8px; } } + + @include mixin-reading-time { + padding: 0 5px; + flex-wrap: wrap; + margin-left: auto; + + i.material-icons { + font-size: 20px; + } + } } div.card-content { diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss index 491eedce..6f9d2a95 100644 --- a/app/Resources/static/themes/material/css/media_queries.scss +++ b/app/Resources/static/themes/material/css/media_queries.scss @@ -173,6 +173,10 @@ .row .col { padding: 0; } + + .card-stacked div.metadata .reading-time { + display: none; + } } @media screen and (max-width: 310px), 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 @@
{{ entry.domainName|removeWww }} - {% 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 %} +
+
{% include "@WallabagCore/themes/material/Entry/_reading_time.html.twig" with {'entry': entry} only %}
+
{% endif %}
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 @@ - {% 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 %}