Compact URL preview (#3835)
* Compact url-preview * fix header * increase limit * better limit * Revert "better limit" This reverts commit ef396f773394068b0b7e37fccff31c70661b3978. ハードリミットかけるならサーバー上でかけたほうが良さそう * Revert "increase limit" This reverts commit 72c10a456ba37151a4d88d11544b0ff9daabd284.
This commit is contained in:
MeiMei
syuilo
parent
f9065943c5
commit
a479e65f3e
6 changed files with 65 additions and 8 deletions
|
|
@ -8,16 +8,16 @@
|
|||
</blockquote>
|
||||
</div>
|
||||
<div v-else class="mk-url-preview">
|
||||
<a :class="{ mini }" :href="url" target="_blank" :title="url" v-if="!fetching">
|
||||
<a :class="{ mini, compact }" :href="url" target="_blank" :title="url" v-if="!fetching">
|
||||
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
|
||||
<article>
|
||||
<header>
|
||||
<h1>{{ title }}</h1>
|
||||
<h1 :title="title">{{ title }}</h1>
|
||||
</header>
|
||||
<p v-if="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
|
||||
<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
|
||||
<footer>
|
||||
<img class="icon" v-if="icon" :src="icon"/>
|
||||
<p>{{ sitename }}</p>
|
||||
<p :title="sitename">{{ sitename }}</p>
|
||||
</footer>
|
||||
</article>
|
||||
</a>
|
||||
|
|
@ -120,6 +120,12 @@ export default Vue.extend({
|
|||
default: false
|
||||
},
|
||||
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
mini: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
@ -302,6 +308,23 @@ export default Vue.extend({
|
|||
width 12px
|
||||
height 12px
|
||||
|
||||
&.compact
|
||||
> .thumbnail
|
||||
position: absolute
|
||||
width 56px
|
||||
height 100%
|
||||
|
||||
> article
|
||||
left 56px
|
||||
width calc(100% - 56px)
|
||||
padding 4px
|
||||
|
||||
> header
|
||||
margin-bottom 2px
|
||||
|
||||
> footer
|
||||
margin-top 2px
|
||||
|
||||
&.mini
|
||||
font-size 10px
|
||||
|
||||
|
|
@ -325,4 +348,27 @@ export default Vue.extend({
|
|||
width 12px
|
||||
height 12px
|
||||
|
||||
&.compact
|
||||
> .thumbnail
|
||||
position: absolute
|
||||
width 56px
|
||||
height 100%
|
||||
|
||||
> article
|
||||
left 56px
|
||||
width calc(100% - 56px)
|
||||
padding 4px
|
||||
|
||||
> header
|
||||
margin-bottom 2px
|
||||
|
||||
> footer
|
||||
margin-top 2px
|
||||
|
||||
&.compact
|
||||
> article
|
||||
> header h1, p, footer
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
|
||||
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> 位置情報</a>
|
||||
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini" :compact="compact"/>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="appearNote.deletedAt == null">
|
||||
|
|
@ -102,6 +102,11 @@ export default Vue.extend({
|
|||
required: false,
|
||||
default: false
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
mini: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div" ref="notes">
|
||||
<template v-for="(note, i) in _notes">
|
||||
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
|
||||
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :compact="true" ref="note"/>
|
||||
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
||||
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
|
||||
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
:key="note.id"
|
||||
@update:note="onNoteUpdated(i, $event)"
|
||||
:media-view="mediaView"
|
||||
:compact="true"
|
||||
:mini="true"/>
|
||||
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
||||
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<mk-media-list :media-list="appearNote.files"/>
|
||||
</div>
|
||||
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="compact"/>
|
||||
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> {{ $t('location') }}</a>
|
||||
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
|
||||
</div>
|
||||
|
|
@ -90,6 +90,11 @@ export default Vue.extend({
|
|||
note: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
|
||||
<template v-for="(note, i) in _notes">
|
||||
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
|
||||
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :compact="true"/>
|
||||
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
||||
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
|
||||
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue