Compact URL preview (#3835)

* Compact url-preview

* fix header

* increase limit

* better limit

* Revert "better limit"

This reverts commit ef396f7733.

ハードリミットかけるならサーバー上でかけたほうが良さそう

* Revert "increase limit"

This reverts commit 72c10a456b.
This commit is contained in:
MeiMei 2019-01-06 12:56:13 +09:00 committed by syuilo
parent f9065943c5
commit a479e65f3e
6 changed files with 65 additions and 8 deletions

View File

@ -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>

View File

@ -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,

View File

@ -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>

View File

@ -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>

View File

@ -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
} }
} }
}); });

View File

@ -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>