aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
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 /app/Resources/static/themes/material
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>
Diffstat (limited to 'app/Resources/static/themes/material')
-rw-r--r--app/Resources/static/themes/material/css/cards.scss52
-rw-r--r--app/Resources/static/themes/material/css/media_queries.scss4
2 files changed, 42 insertions, 14 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),