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.

app/Resources/static/themes/material/css/cards.scss

@@ -123,6 +123,12 @@ main {
     display: block;
   }
 
+  .card-image .placeholder {
+    background-color: #111;
+    filter: invert(100%);
+    -webkit-filter: invert(100%);
+  }
+
   &.sw {
     max-width: 370px;
     margin-left: auto;

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_no_preview.html.twig

@@ -1,14 +0,0 @@
-<div class="card">
-    <div class="card-body">
-        <div class="card-image waves-effect waves-block waves-light">
-            <ul class="card-entry-labels">
-            {% for tag in entry.tags | slice(0, 3) %}
-                <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
-            {% endfor %}
-            </ul>
-        </div>
-        {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry} only %}
-    </div>
-
-    {% include "@WallabagCore/themes/material/Entry/_card_actions.html.twig" with {'entry': entry} only %}
-</div>

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/_card_preview.html.twig

@@ -7,7 +7,11 @@
             {% endfor %}
             </ul>
             <a href="{{ path('view', { 'id': entry.id }) }}">
+              {% if entry.previewPicture is null %}
+                <span class="preview placeholder" style="background-image: url({{ asset('wallassets/themes/_global/img/logo-square.svg') }});"></span>
+              {% else %}
                 <span class="preview" style="background-image: url({{ entry.previewPicture }})"></span>
+              {% endif %}
             </a>
         </div>
         {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true} only %}

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig

@@ -39,11 +39,9 @@
             <li id="entry-{{ entry.id|e }}" class="col {% if listMode == 0 %}l3 m6{% else %}collection-item{% endif %} s12">
                 {% if listMode == 1 %}
                     {% include "@WallabagCore/themes/material/Entry/_card_list.html.twig" with {'entry': entry} only %}
-                {% elseif entry.previewPicture is null %}
-                    {% include "@WallabagCore/themes/material/Entry/_card_no_preview.html.twig" with {'entry': entry} only %}
                 {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %}
                     {% include "@WallabagCore/themes/material/Entry/_card_full_image.html.twig" with {'entry': entry} only %}
-                {% elseif not entry.previewPicture is null %}
+                {% else %}
                     {% include "@WallabagCore/themes/material/Entry/_card_preview.html.twig" with {'entry': entry} only %}
                 {% endif %}
             </li>