diff options
| author | MeiMei <30769358+mei23@users.noreply.github.com> | 2019-01-06 12:56:13 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2019-01-06 12:56:13 +0900 |
| commit | a479e65f3e2ec7b6028c886d1d998a32927c8f48 (patch) | |
| tree | 234d32db1cf35ba3067bd29e6f6b9caeb69138de /src/client/app/common | |
| parent | Fix #3827 (#3837) (diff) | |
| download | misskey-a479e65f3e2ec7b6028c886d1d998a32927c8f48.tar.gz misskey-a479e65f3e2ec7b6028c886d1d998a32927c8f48.tar.bz2 misskey-a479e65f3e2ec7b6028c886d1d998a32927c8f48.zip | |
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.
Diffstat (limited to 'src/client/app/common')
| -rw-r--r-- | src/client/app/common/views/components/url-preview.vue | 54 |
1 files changed, 50 insertions, 4 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> |