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:
parent
f9065943c5
commit
a479e65f3e
@ -8,16 +8,16 @@
|
|||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mk-url-preview">
|
<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>
|
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<h1>{{ title }}</h1>
|
<h1 :title="title">{{ title }}</h1>
|
||||||
</header>
|
</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>
|
<footer>
|
||||||
<img class="icon" v-if="icon" :src="icon"/>
|
<img class="icon" v-if="icon" :src="icon"/>
|
||||||
<p>{{ sitename }}</p>
|
<p :title="sitename">{{ sitename }}</p>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</a>
|
||||||
@ -120,6 +120,12 @@ export default Vue.extend({
|
|||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
|
||||||
|
compact: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
mini: {
|
mini: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
@ -302,6 +308,23 @@ export default Vue.extend({
|
|||||||
width 12px
|
width 12px
|
||||||
height 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
|
&.mini
|
||||||
font-size 10px
|
font-size 10px
|
||||||
|
|
||||||
@ -325,4 +348,27 @@ export default Vue.extend({
|
|||||||
width 12px
|
width 12px
|
||||||
height 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>
|
</style>
|
||||||
|
@ -36,7 +36,7 @@
|
|||||||
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
|
<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>
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<footer v-if="appearNote.deletedAt == null">
|
<footer v-if="appearNote.deletedAt == null">
|
||||||
@ -102,6 +102,11 @@ export default Vue.extend({
|
|||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
compact: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
mini: {
|
mini: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
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">
|
<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">
|
<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">
|
<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-up"/>{{ note._datetext }}</span>
|
||||||
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
:key="note.id"
|
:key="note.id"
|
||||||
@update:note="onNoteUpdated(i, $event)"
|
@update:note="onNoteUpdated(i, $event)"
|
||||||
:media-view="mediaView"
|
:media-view="mediaView"
|
||||||
|
:compact="true"
|
||||||
:mini="true"/>
|
:mini="true"/>
|
||||||
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
|
<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-up"/>{{ note._datetext }}</span>
|
||||||
|
@ -30,7 +30,7 @@
|
|||||||
<mk-media-list :media-list="appearNote.files"/>
|
<mk-media-list :media-list="appearNote.files"/>
|
||||||
</div>
|
</div>
|
||||||
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
|
<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>
|
<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 class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,6 +90,11 @@ export default Vue.extend({
|
|||||||
note: {
|
note: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
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">
|
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
|
||||||
<template v-for="(note, i) in _notes">
|
<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">
|
<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-up"/>{{ note._datetext }}</span>
|
||||||
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
|
||||||
|
Loading…
Reference in New Issue
Block a user