Merge pull request #3942 from wallabag/issue-3838

material: add metadata to list view
This commit is contained in:
Jérémy Benoist 2019-05-09 15:45:07 +03:00 committed by GitHub
commit 570113208b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 16 deletions

View file

@ -18,6 +18,24 @@ main {
overflow: hidden; 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 {
.card-content .card-title, .card-content .card-title,
.card-reveal .card-title { .card-reveal .card-title {
@ -98,19 +116,7 @@ main {
margin-right: 5px !important; margin-right: 5px !important;
} }
.reading-time { @include mixin-reading-time;
display: inline-flex;
vertical-align: middle;
.card-reading-time,
.card-created-at {
display: inline-flex;
}
span {
margin-right: 5px;
}
}
} }
.card-image { .card-image {
@ -224,10 +230,18 @@ a.original:not(.waves-effect) {
} }
div.metadata { div.metadata {
overflow: hidden;
height: 1.5em;
display: flex;
ul.tags {
margin-left: 4px;
}
.chip { .chip {
background-color: $blueAccentColor; background-color: $blueAccentColor;
padding: 0 7px; padding: 0 7px;
margin: auto 2px; margin: auto 1px;
border-radius: 6px; border-radius: 6px;
line-height: 22px; line-height: 22px;
height: 22px; height: 22px;
@ -244,6 +258,16 @@ a.original:not(.waves-effect) {
padding-left: 8px; 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 { div.card-content {

View file

@ -173,6 +173,10 @@
.row .col { .row .col {
padding: 0; padding: 0;
} }
.card-stacked div.metadata .reading-time {
display: none;
}
} }
@media screen and (max-width: 310px), @media screen and (max-width: 310px),

View file

@ -8,8 +8,11 @@
<div class="{{ subClass|default('original grey-text') }}"> <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> <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 %} {% 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 %} {% endif %}
</div> </div>
</div> </div>

View file

@ -5,7 +5,7 @@
<span class="preview{{ previewClassModifier }}" style="background-image: url({{ entry.previewPicture | default(asset('wallassets/themes/_global/img/logo-square.svg')) }})"></span> <span class="preview{{ previewClassModifier }}" style="background-image: url({{ entry.previewPicture | default(asset('wallassets/themes/_global/img/logo-square.svg')) }})"></span>
</a> </a>
</div> </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"> <ul class="tools-list hide-on-small-only">
<li> <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> <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>