aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKevin Decherf <kevin@kdecherf.com>2019-04-27 22:48:28 +0200
committerKevin Decherf <kevin@kdecherf.com>2019-05-01 15:47:48 +0200
commit4b5b228650cd109db7b21fd754581416e7f7d97e (patch)
tree8bd9939ec93c4ad6801fd8b4de8806615eea905a
parentea54c2adb126a77c244c30059c40149754d4dbb7 (diff)
downloadwallabag-4b5b228650cd109db7b21fd754581416e7f7d97e.tar.gz
wallabag-4b5b228650cd109db7b21fd754581416e7f7d97e.tar.zst
wallabag-4b5b228650cd109db7b21fd754581416e7f7d97e.zip
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>
-rw-r--r--app/Resources/static/themes/material/css/cards.scss52
-rw-r--r--app/Resources/static/themes/material/css/media_queries.scss4
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/Card/_content.html.twig5
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_list.html.twig2
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 {
18 overflow: hidden; 18 overflow: hidden;
19} 19}
20 20
21@mixin mixin-reading-time {
22 .reading-time {
23 display: inline-flex;
24 vertical-align: middle;
25
26 .card-reading-time,
27 .card-created-at {
28 display: inline-flex;
29 }
30
31 span {
32 margin-right: 5px;
33 }
34
35 @content;
36 }
37}
38
21.card { 39.card {
22 .card-content .card-title, 40 .card-content .card-title,
23 .card-reveal .card-title { 41 .card-reveal .card-title {
@@ -98,19 +116,7 @@ main {
98 margin-right: 5px !important; 116 margin-right: 5px !important;
99 } 117 }
100 118
101 .reading-time { 119 @include mixin-reading-time;
102 display: inline-flex;
103 vertical-align: middle;
104
105 .card-reading-time,
106 .card-created-at {
107 display: inline-flex;
108 }
109
110 span {
111 margin-right: 5px;
112 }
113 }
114 } 120 }
115 121
116 .card-image { 122 .card-image {
@@ -224,10 +230,18 @@ a.original:not(.waves-effect) {
224 } 230 }
225 231
226 div.metadata { 232 div.metadata {
233 overflow: hidden;
234 height: 1.5em;
235 display: flex;
236
237 ul.tags {
238 margin-left: 4px;
239 }
240
227 .chip { 241 .chip {
228 background-color: $blueAccentColor; 242 background-color: $blueAccentColor;
229 padding: 0 7px; 243 padding: 0 7px;
230 margin: auto 2px; 244 margin: auto 1px;
231 border-radius: 6px; 245 border-radius: 6px;
232 line-height: 22px; 246 line-height: 22px;
233 height: 22px; 247 height: 22px;
@@ -244,6 +258,16 @@ a.original:not(.waves-effect) {
244 padding-left: 8px; 258 padding-left: 8px;
245 } 259 }
246 } 260 }
261
262 @include mixin-reading-time {
263 padding: 0 5px;
264 flex-wrap: wrap;
265 margin-left: auto;
266
267 i.material-icons {
268 font-size: 20px;
269 }
270 }
247 } 271 }
248 272
249 div.card-content { 273 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 @@
173 .row .col { 173 .row .col {
174 padding: 0; 174 padding: 0;
175 } 175 }
176
177 .card-stacked div.metadata .reading-time {
178 display: none;
179 }
176} 180}
177 181
178@media screen and (max-width: 310px), 182@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 @@
8 8
9 <div class="{{ subClass|default('original grey-text') }}"> 9 <div class="{{ subClass|default('original grey-text') }}">
10 <a href="{{ entry.url|e }}" target="_blank" title="{{ entry.domainName|removeWww }}" class="tool grey-text">{{ entry.domainName|removeWww }}</a> 10 <a href="{{ entry.url|e }}" target="_blank" title="{{ entry.domainName|removeWww }}" class="tool grey-text">{{ entry.domainName|removeWww }}</a>
11 {% if withTags is defined %} 11 {% if withMetadata is defined %}
12 {% 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 %} 12 {% 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 %}
13 <div class="reading-time grey-text">
14 <div class="card-reading-time">{% include "@WallabagCore/themes/material/Entry/_reading_time.html.twig" with {'entry': entry} only %}</div>
15 </div>
13 {% endif %} 16 {% endif %}
14 </div> 17 </div>
15</div> 18</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 @@
5 <span class="preview{{ previewClassModifier }}" style="background-image: url({{ entry.previewPicture | default(asset('wallassets/themes/_global/img/logo-square.svg')) }})"></span> 5 <span class="preview{{ previewClassModifier }}" style="background-image: url({{ entry.previewPicture | default(asset('wallassets/themes/_global/img/logo-square.svg')) }})"></span>
6 </a> 6 </a>
7 </div> 7 </div>
8 {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withTags': true, 'subClass': 'metadata'} only %} 8 {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withMetadata': true, 'subClass': 'metadata'} only %}
9 <ul class="tools-list hide-on-small-only"> 9 <ul class="tools-list hide-on-small-only">
10 <li> 10 <li>
11 <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> 11 <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>