aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAlexandr Danilov <bitbucket@modos189.ru>2015-09-14 02:12:39 +0300
committerAlexandr Danilov <bitbucket@modos189.ru>2015-09-14 02:12:39 +0300
commit451bad02f05cb2d9c303fdbd62becccbdbefc746 (patch)
treea03b3fce7864260a596c383caa92081c073e8a08
parent4d5fd9be812825c480589cdcfcec281ffb5aa66a (diff)
downloadwallabag-451bad02f05cb2d9c303fdbd62becccbdbefc746.tar.gz
wallabag-451bad02f05cb2d9c303fdbd62becccbdbefc746.tar.zst
wallabag-451bad02f05cb2d9c303fdbd62becccbdbefc746.zip
improved display pictures
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig51
-rwxr-xr-xsrc/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css21
2 files changed, 56 insertions, 16 deletions
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
index b46d8f11..77483a09 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
@@ -33,19 +33,48 @@
33 {% for entry in entries %} 33 {% for entry in entries %}
34 <li id="entry-{{ entry.id|e }}" class="col l4 m6 s12"> 34 <li id="entry-{{ entry.id|e }}" class="col l4 m6 s12">
35 <div class="card"> 35 <div class="card">
36 <div class="card-content"> 36
37 <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span> 37 <div class="card-body">
38 {% if entry.readingTime > 0 %} 38 {% if not entry.previewPicture is null %}
39 <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div> 39 <div class="card-image waves-effect waves-block waves-light">
40 {% else %} 40 <div class="preview activator" style="background-image: url({{ entry.previewPicture }})"></div>
41 <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur">&lt;</small> 1 min</span></div> 41 </div>
42 {% endif %}
43 {% if entry.previewPicture is null %}
44 <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
45 {% else %}
46 <img class="preview" src="{{ entry.previewPicture }}" alt="{{ entry.title|raw }}" />
47 {% endif %} 42 {% endif %}
43
44 <div class="card-content">
45 {% if not entry.previewPicture is null %}
46 <i class="card-title grey-text text-darken-4 activator mdi-navigation-more-vert right"></i>
47 {% endif %}
48
49 <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw|striptags|slice(0, 42) }}</a></span>
50
51 {% if entry.readingTime > 0 %}
52 <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
53 {% else %}
54 <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur">&lt;</small> 1 min</span></div>
55 {% endif %}
56
57 {% if entry.previewPicture is null %}
58 <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
59 {% endif %}
60 </div>
48 </div> 61 </div>
62
63 {% if not entry.previewPicture is null %}
64 <div class="card-reveal">
65 <i class="card-title grey-text text-darken-4 mdi-card-close right"></i>
66 <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span>
67
68 {% if entry.readingTime > 0 %}
69 <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} {{ entry.readingTime }} min</span></div>
70 {% else %}
71 <div class="estimatedTime grey-text"><span class="tool reading-time">{% trans %}estimated reading time: {% endtrans %} <small class="inferieur">&lt;</small> 1 min</span></div>
72 {% endif %}
73
74 <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
75 </div>
76 {% endif %}
77
49 <div class="card-action"> 78 <div class="card-action">
50 <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> 79 <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>
51 80
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index 5e1ae8bd..144e259f 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -221,15 +221,11 @@ main ul.row {
221 padding: 0px 0.75rem; 221 padding: 0px 0.75rem;
222} 222}
223 223
224.data .card .card-content { 224.data .card .card-body {
225 height: 22em; 225 height: 22em;
226 overflow: hidden; 226 overflow: hidden;
227} 227}
228 228
229img.preview {
230 max-width: 100%;
231}
232
233.card .card-content .card-title { 229.card .card-content .card-title {
234 line-height: 32px; 230 line-height: 32px;
235} 231}
@@ -262,6 +258,21 @@ img.preview {
262 margin-right: auto; 258 margin-right: auto;
263} 259}
264 260
261.mdi-card-close:before {
262 content: "\e8aa";
263}
264
265.card .card-image {
266 height: 14em;
267}
268
269.card .card-image .preview {
270 height: 14em;
271 background-size: cover;
272 background-repeat: no-repeat;
273 background-position: 50%;
274}
275
265/* ========================================================================== 276/* ==========================================================================
266 5 = Article 277 5 = Article
267 ========================================================================== */ 278 ========================================================================== */