aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/Wallabag
diff options
context:
space:
mode:
authorMatt Burke <burkemw3@gmail.com>2018-10-13 14:30:34 -0400
committerMatt Burke <burkemw3@gmail.com>2018-10-15 23:59:39 -0400
commitcefbe6a87fee244840e088955aa787a7ad3abb3e (patch)
treeb1d04f886afcf6914a89866ffb4c1ecf5493d834 /src/Wallabag
parentba69c04c2708cd91f58da74e27184479ac0fe616 (diff)
downloadwallabag-cefbe6a87fee244840e088955aa787a7ad3abb3e.tar.gz
wallabag-cefbe6a87fee244840e088955aa787a7ad3abb3e.tar.zst
wallabag-cefbe6a87fee244840e088955aa787a7ad3abb3e.zip
Add placeholder image to card-based gallery entries page for #3651
I referenced https://css-tricks.com/using-svg/ for using the SVG icon. The icon has a black foreground and white background, which doesn't look very good as a placeholder. So, using the background-image style to show the svg and the inversion filter to make it white on gray. With the image always present, there isn't much difference between the with and without image preview templates, so I merged them. Tested on Chrome, Firefox, and Safari on OSX.
Diffstat (limited to 'src/Wallabag')
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_no_preview.html.twig14
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_preview.html.twig4
-rw-r--r--src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig4
3 files changed, 5 insertions, 17 deletions
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_no_preview.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_no_preview.html.twig
deleted file mode 100644
index 4fd4debd..00000000
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_no_preview.html.twig
+++ /dev/null
@@ -1,14 +0,0 @@
1<div class="card">
2 <div class="card-body">
3 <div class="card-image waves-effect waves-block waves-light">
4 <ul class="card-entry-labels">
5 {% for tag in entry.tags | slice(0, 3) %}
6 <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
7 {% endfor %}
8 </ul>
9 </div>
10 {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry} only %}
11 </div>
12
13 {% include "@WallabagCore/themes/material/Entry/_card_actions.html.twig" with {'entry': entry} only %}
14</div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_preview.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_preview.html.twig
index e93646dc..dee1f55b 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_preview.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_preview.html.twig
@@ -7,7 +7,11 @@
7 {% endfor %} 7 {% endfor %}
8 </ul> 8 </ul>
9 <a href="{{ path('view', { 'id': entry.id }) }}"> 9 <a href="{{ path('view', { 'id': entry.id }) }}">
10 {% if entry.previewPicture is null %}
11 <span class="preview placeholder" style="background-image: url({{ asset('wallassets/themes/_global/img/logo-square.svg') }});"></span>
12 {% else %}
10 <span class="preview" style="background-image: url({{ entry.previewPicture }})"></span> 13 <span class="preview" style="background-image: url({{ entry.previewPicture }})"></span>
14 {% endif %}
11 </a> 15 </a>
12 </div> 16 </div>
13 {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true} only %} 17 {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true} only %}
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 e883503e..a137f3c3 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
@@ -39,11 +39,9 @@
39 <li id="entry-{{ entry.id|e }}" class="col {% if listMode == 0 %}l3 m6{% else %}collection-item{% endif %} s12"> 39 <li id="entry-{{ entry.id|e }}" class="col {% if listMode == 0 %}l3 m6{% else %}collection-item{% endif %} s12">
40 {% if listMode == 1 %} 40 {% if listMode == 1 %}
41 {% include "@WallabagCore/themes/material/Entry/_card_list.html.twig" with {'entry': entry} only %} 41 {% include "@WallabagCore/themes/material/Entry/_card_list.html.twig" with {'entry': entry} only %}
42 {% elseif entry.previewPicture is null %}
43 {% include "@WallabagCore/themes/material/Entry/_card_no_preview.html.twig" with {'entry': entry} only %}
44 {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %} 42 {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %}
45 {% include "@WallabagCore/themes/material/Entry/_card_full_image.html.twig" with {'entry': entry} only %} 43 {% include "@WallabagCore/themes/material/Entry/_card_full_image.html.twig" with {'entry': entry} only %}
46 {% elseif not entry.previewPicture is null %} 44 {% else %}
47 {% include "@WallabagCore/themes/material/Entry/_card_preview.html.twig" with {'entry': entry} only %} 45 {% include "@WallabagCore/themes/material/Entry/_card_preview.html.twig" with {'entry': entry} only %}
48 {% endif %} 46 {% endif %}
49 </li> 47 </li>