DeckでもURLプレビュー

This commit is contained in:
syuilo 2018-09-01 13:08:43 +09:00
parent 29b2bdf613
commit 488bbc9651
2 changed files with 31 additions and 1 deletions

View file

@ -8,7 +8,7 @@
</blockquote> </blockquote>
</div> </div>
<div v-else class="mk-url-preview"> <div v-else class="mk-url-preview">
<a :href="url" target="_blank" :title="url" v-if="!fetching"> <a :class="{ mini }" :href="url" target="_blank" :title="url" v-if="!fetching">
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div> <div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
<article> <article>
<header> <header>
@ -118,6 +118,12 @@ export default Vue.extend({
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
},
mini: {
type: Boolean,
required: false,
default: false
} }
}, },
@ -293,6 +299,29 @@ root(isDark)
width 12px width 12px
height 12px height 12px
&.mini
font-size 10px
> .thumbnail
position relative
width 100%
height 60px
> article
left 0
width 100%
padding 8px
> header
margin-bottom 4px
> footer
margin-top 4px
> img
width 12px
height 12px
.mk-url-preview[data-darkmode] .mk-url-preview[data-darkmode]
root(true) root(true)

View file

@ -36,6 +36,7 @@
<div class="renote" v-if="p.renote"> <div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote" :mini="true"/> <mk-note-preview :note="p.renote" :mini="true"/>
</div> </div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="false" :mini="true"/>
</div> </div>
<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span> <span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
</div> </div>