mirror of
https://github.com/wallabag/wallabag.git
synced 2024-11-23 01:21:03 +00:00
Merge pull request #1420 from modos189/v2_display_picture
improved display pictures
This commit is contained in:
commit
1db9d411c5
2 changed files with 56 additions and 16 deletions
|
@ -33,19 +33,48 @@
|
|||
{% for entry in entries %}
|
||||
<li id="entry-{{ entry.id|e }}" class="col l4 m6 s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span>
|
||||
{% if entry.readingTime > 0 %}
|
||||
<div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
|
||||
{% else %}
|
||||
<div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur"><</small> 1 min</span></div>
|
||||
{% endif %}
|
||||
{% if entry.previewPicture is null %}
|
||||
<p>{{ entry.content|striptags|slice(0, 300) }}…</p>
|
||||
{% else %}
|
||||
<img class="preview" src="{{ entry.previewPicture }}" alt="{{ entry.title|raw }}" />
|
||||
|
||||
<div class="card-body">
|
||||
{% if not entry.previewPicture is null %}
|
||||
<div class="card-image waves-effect waves-block waves-light">
|
||||
<div class="preview activator" style="background-image: url({{ entry.previewPicture }})"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-content">
|
||||
{% if not entry.previewPicture is null %}
|
||||
<i class="card-title grey-text text-darken-4 activator mdi-navigation-more-vert right"></i>
|
||||
{% endif %}
|
||||
|
||||
<span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw|striptags|slice(0, 42) }}</a></span>
|
||||
|
||||
{% if entry.readingTime > 0 %}
|
||||
<div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
|
||||
{% else %}
|
||||
<div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur"><</small> 1 min</span></div>
|
||||
{% endif %}
|
||||
|
||||
{% if entry.previewPicture is null %}
|
||||
<p>{{ entry.content|striptags|slice(0, 300) }}…</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not entry.previewPicture is null %}
|
||||
<div class="card-reveal">
|
||||
<i class="card-title grey-text text-darken-4 mdi-card-close right"></i>
|
||||
<span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span>
|
||||
|
||||
{% if entry.readingTime > 0 %}
|
||||
<div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
|
||||
{% else %}
|
||||
<div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur"><</small> 1 min</span></div>
|
||||
{% endif %}
|
||||
|
||||
<p>{{ entry.content|striptags|slice(0, 300) }}…</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-action">
|
||||
<span class="bold"><a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %}: {{ entry.title|e }} - {{ entry.domainName }}" class="tool original grey-text"><span>{{ entry.domainName | truncate(18) }}</span></a></bold>
|
||||
|
||||
|
|
|
@ -221,15 +221,11 @@ main ul.row {
|
|||
padding: 0px 0.75rem;
|
||||
}
|
||||
|
||||
.data .card .card-content {
|
||||
.data .card .card-body {
|
||||
height: 22em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img.preview {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card .card-content .card-title {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
@ -262,6 +258,21 @@ img.preview {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mdi-card-close:before {
|
||||
content: "\e8aa";
|
||||
}
|
||||
|
||||
.card .card-image {
|
||||
height: 14em;
|
||||
}
|
||||
|
||||
.card .card-image .preview {
|
||||
height: 14em;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5 = Article
|
||||
========================================================================== */
|
||||
|
|
Loading…
Reference in a new issue