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.

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

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>