DeckでもURLプレビュー
This commit is contained in:
parent
29b2bdf613
commit
488bbc9651
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue