Mastodon/Pinafore-Web-Client-Frontend
1
0
Fork 0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-12 10:16:16 +01:00
Code Issues Releases Wiki Activity

fix: add placeholder icon for opengraph cards without images (#1131)

Browse Source
This commit is contained in:
Nolan Lawson 2019-04-01 20:48:41 -07:00 committed by GitHub
parent 44c45d0b64
commit 8549c3a79a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bin/svgs.js
View File

@ -46,5 +46,6 @@ module.exports = [
{ id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' },
{ id: 'fa-share-square-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/share-square-o.svg' },
{ id: 'fa-flag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/flag.svg' },
{ id: 'fa-suitcase', src: 'src/thirdparty/font-awesome-svg-png/white/svg/suitcase.svg' }
{ id: 'fa-suitcase', src: 'src/thirdparty/font-awesome-svg-png/white/svg/suitcase.svg' },
{ id: 'fa-file-text', src: 'src/thirdparty/font-awesome-svg-png/white/svg/file-text.svg' }
]

12
src/routes/_components/status/StatusCard.html
View File

@ -2,10 +2,13 @@
<strong class="card-title">
{title}
</strong>
{#if hasBody}
{#if description}
<div class="card-content">
{#if imageUrl}
<LazyImage forceSize={true} height="50" width="50" src={imageUrl} ariaHidden={true} />
{:else}
<SvgIcon style="width: 30px; height: 30px; padding: 10px; fill: var(--action-button-deemphasized-fill-color);"
href="#fa-file-text" />
{/if}
{#if description}
<span class="card-description">
@ -73,10 +76,12 @@
</style>
<script>
import LazyImage from '../LazyImage'
import LazyImage from '../LazyImage.html'
import SvgIcon from '../SvgIcon.html'
export default {
components: {
SvgIcon,
LazyImage
},
computed: {
@ -84,8 +89,7 @@
title: ({ card }) => card.title,
url: ({ card }) => card.url,
description: ({ card }) => card.description || card.provider_name,
imageUrl: ({ card }) => card.image,
hasBody: ({ description, imageUrl }) => description && imageUrl
imageUrl: ({ card }) => card.image
}
}
</script>