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.

6 files changed, 65 insertions, 8 deletions

diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index 038541ba05..958abe00f0 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -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>
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index a52eaac7e9..e5f233a552 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -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,
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index da11893225..5cf51d9cc4 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -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>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 994e12a04b..54e01a0012 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 57d8fb2a08..1533e0a62a 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -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
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index fe88fee84d..1d0375cfa9 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -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>