Merge pull request #3774 from Simounet/feature/card-ui

Card no preview replaced by wallabag logo

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

@@ -118,15 +118,14 @@ main {
 
   .card-image .preview,
   .card-fullimage .preview {
-    height: 14em;
+    height: 100%;
     background: no-repeat 50%/cover;
+    background-color: #efefef;
     display: block;
-  }
 
-  .card-image .placeholder {
+    &--default {
-    background-color: #111;
+      background-size: contain;
-    filter: invert(100%);
+    }
-    -webkit-filter: invert(100%);
   }
 
   &.sw {

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

@@ -7,11 +7,8 @@
             {% endfor %}
             </ul>
             <a href="{{ path('view', { 'id': entry.id }) }}">
-              {% if entry.previewPicture is null %}
+                {% set previewClassModifier = entry.previewPicture ? '' : ' preview--default' %}
-                <span class="preview placeholder" style="background-image: url({{ 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>
-              {% 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 %}

web/wallassets/manifest.json

@@ -81,7 +81,7 @@
   "themes/_global/img/icons/unmark-icon--black.png": "themes/_global/img/icons/unmark-icon--black.png",
   "themes/_global/img/list.png": "themes/_global/img/list.png",
   "themes/_global/img/logo-other_themes.png": "themes/_global/img/logo-other_themes.png",
-  "themes/_global/img/logo-square.png": "themes/_global/img/logo-square.png",
+  "themes/_global/img/logo-square.svg": "themes/_global/img/logo-square.svg",
   "themes/_global/img/logo-w.png": "themes/_global/img/logo-w.png",
   "themes/_global/img/logo-wallabag.svg": "themes/_global/img/logo-wallabag.svg",
   "themes/_global/img/table.png": "themes/_global/img/table.png"

web/wallassets/public.js

@@ -1 +1 @@
-!function(o){function __webpack_require__(e){if(n[e])return n[e].exports;var p=n[e]={i:e,l:!1,exports:{}};return o[e].call(p.exports,p,p.exports,__webpack_require__),p.l=!0,p.exports}var n={};__webpack_require__.m=o,__webpack_require__.c=n,__webpack_require__.i=function(o){return o},__webpack_require__.d=function(o,n,e){__webpack_require__.o(o,n)||Object.defineProperty(o,n,{configurable:!1,enumerable:!0,get:e})},__webpack_require__.n=function(o){var n=o&&o.__esModule?function(){return o.default}:function(){return o};return __webpack_require__.d(n,"a",n),n},__webpack_require__.o=function(o,n){return Object.prototype.hasOwnProperty.call(o,n)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=52)}(Array(40).concat([function(o,n,e){function webpackContext(o){return e(webpackContextResolve(o))}function webpackContextResolve(o){var n=p[o];if(!(n+1))throw new Error("Cannot find module '"+o+"'.");return n}var p={"./appicon/apple-touch-icon-114.png":55,"./appicon/apple-touch-icon-120.png":56,"./appicon/apple-touch-icon-144.png":57,"./appicon/apple-touch-icon-152.png":58,"./appicon/apple-touch-icon-57.png":59,"./appicon/apple-touch-icon-72.png":60,"./appicon/apple-touch-icon-76.png":61,"./appicon/apple-touch-icon.png":62,"./appicon/favicon.ico":63,"./bg-select.png":64,"./icons/Diaspora-asterisk.svg":65,"./icons/carrot-icon--black.png":66,"./icons/carrot-icon--white.png":67,"./icons/diaspora-icon--black.png":68,"./icons/diaspora-icon--white.png":69,"./icons/scuttle.png":70,"./icons/shaarli.png":71,"./icons/unmark-icon--black.png":72,"./list.png":73,"./logo-other_themes.png":74,"./logo-square.png":75,"./logo-w.png":76,"./logo-wallabag.svg":77,"./table.png":78};webpackContext.keys=function(){return Object.keys(p)},webpackContext.resolve=webpackContextResolve,o.exports=webpackContext,webpackContext.id=40},,,,,,,function(o,n){},,,,,function(o,n,e){"use strict";e(47),function(o){o.keys().forEach(o)}(e(40))},,,function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-114.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-120.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-144.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-152.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-57.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-72.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-76.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/favicon.ico"},function(o,n,e){o.exports=e.p+"themes/_global/img/bg-select.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/Diaspora-asterisk.svg"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/carrot-icon--black.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/carrot-icon--white.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/diaspora-icon--black.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/diaspora-icon--white.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/scuttle.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/shaarli.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/icons/unmark-icon--black.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/list.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/logo-other_themes.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/logo-square.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/logo-w.png"},function(o,n,e){o.exports=e.p+"themes/_global/img/logo-wallabag.svg"},function(o,n,e){o.exports=e.p+"themes/_global/img/table.png"}]));
+!function(o){function __webpack_require__(e){if(n[e])return n[e].exports;var p=n[e]={i:e,l:!1,exports:{}};return o[e].call(p.exports,p,p.exports,__webpack_require__),p.l=!0,p.exports}var n={};__webpack_require__.m=o,__webpack_require__.c=n,__webpack_require__.i=function(o){return o},__webpack_require__.d=function(o,n,e){__webpack_require__.o(o,n)||Object.defineProperty(o,n,{configurable:!1,enumerable:!0,get:e})},__webpack_require__.n=function(o){var n=o&&o.__esModule?function(){return o.default}:function(){return o};return __webpack_require__.d(n,"a",n),n},__webpack_require__.o=function(o,n){return Object.prototype.hasOwnProperty.call(o,n)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=232)}({220:function(o,n,e){function webpackContext(o){return e(webpackContextResolve(o))}function webpackContextResolve(o){var n=p[o];if(!(n+1))throw new Error("Cannot find module '"+o+"'.");return n}var p={"./appicon/apple-touch-icon-114.png":235,"./appicon/apple-touch-icon-120.png":236,"./appicon/apple-touch-icon-144.png":237,"./appicon/apple-touch-icon-152.png":238,"./appicon/apple-touch-icon-57.png":239,"./appicon/apple-touch-icon-72.png":240,"./appicon/apple-touch-icon-76.png":241,"./appicon/apple-touch-icon.png":242,"./appicon/favicon.ico":243,"./bg-select.png":244,"./icons/Diaspora-asterisk.svg":245,"./icons/carrot-icon--black.png":246,"./icons/carrot-icon--white.png":247,"./icons/diaspora-icon--black.png":248,"./icons/diaspora-icon--white.png":249,"./icons/scuttle.png":250,"./icons/shaarli.png":251,"./icons/unmark-icon--black.png":252,"./list.png":253,"./logo-square.svg":254,"./logo-w.png":255,"./logo-wallabag.svg":256,"./table.png":257};webpackContext.keys=function(){return Object.keys(p)},webpackContext.resolve=webpackContextResolve,o.exports=webpackContext,webpackContext.id=220},227:function(o,n){},232:function(o,n,e){"use strict";e(227),function(o){o.keys().forEach(o)}(e(220))},235:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-114.png"},236:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-120.png"},237:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-144.png"},238:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-152.png"},239:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-57.png"},240:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-72.png"},241:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon-76.png"},242:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/apple-touch-icon.png"},243:function(o,n,e){o.exports=e.p+"themes/_global/img/appicon/favicon.ico"},244:function(o,n,e){o.exports=e.p+"themes/_global/img/bg-select.png"},245:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/Diaspora-asterisk.svg"},246:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/carrot-icon--black.png"},247:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/carrot-icon--white.png"},248:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/diaspora-icon--black.png"},249:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/diaspora-icon--white.png"},250:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/scuttle.png"},251:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/shaarli.png"},252:function(o,n,e){o.exports=e.p+"themes/_global/img/icons/unmark-icon--black.png"},253:function(o,n,e){o.exports=e.p+"themes/_global/img/list.png"},254:function(o,n,e){o.exports=e.p+"themes/_global/img/logo-square.svg"},255:function(o,n,e){o.exports=e.p+"themes/_global/img/logo-w.png"},256:function(o,n,e){o.exports=e.p+"themes/_global/img/logo-wallabag.svg"},257:function(o,n,e){o.exports=e.p+"themes/_global/img/table.png"}});