diff --git a/bookmarks/static/preview-placeholder.svg b/bookmarks/static/preview-placeholder.svg new file mode 100644 index 000000000..1bf459760 --- /dev/null +++ b/bookmarks/static/preview-placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/bookmarks/styles/bookmark-page.css b/bookmarks/styles/bookmark-page.css index 8adc88d71..093624acb 100644 --- a/bookmarks/styles/bookmark-page.css +++ b/bookmarks/styles/bookmark-page.css @@ -154,14 +154,29 @@ li[ld-bookmark-item] { min-width: 0; } - & img.preview-image { + & .preview-image { flex: 0 0 auto; width: 100px; height: 60px; margin-top: var(--unit-h); - object-fit: cover; border-radius: var(--border-radius); border: solid 1px var(--border-color); + object-fit: cover; + + &.placeholder { + display: flex; + align-items: center; + justify-content: center; + background: var(--body-color-contrast); + + & .img { + width: var(--unit-12); + height: var(--unit-12); + background-color: var(--tertiary-text-color); + -webkit-mask: url(preview-placeholder.svg) no-repeat center; + mask: url(preview-placeholder.svg) no-repeat center; + } + } } & .form-checkbox.bulk-edit-checkbox { diff --git a/bookmarks/templates/bookmarks/bookmark_list.html b/bookmarks/templates/bookmarks/bookmark_list.html index d68bdc117..e1159758e 100644 --- a/bookmarks/templates/bookmarks/bookmark_list.html +++ b/bookmarks/templates/bookmarks/bookmark_list.html @@ -142,8 +142,14 @@ {% endif %} - {% if bookmark_list.show_preview_images and bookmark_item.preview_image_file %} - + {% if bookmark_list.show_preview_images %} + {% if bookmark_item.preview_image_file %} + + {% else %} +