From 8682fd21c4f1e4e16d889e6aef6f00d2a8df5d37 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 22 Apr 2018 19:33:06 +0900 Subject: [PATCH] Fix bug --- .../common/views/components/url-preview.vue | 133 +++++++++--------- 1 file changed, 67 insertions(+), 66 deletions(-) diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index f54d374610..c2dc07b411 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -2,8 +2,8 @@ <iframe v-if="youtubeId" type="text/html" height="250" :src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`" frameborder="0"/> -<div v-else> - <a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching"> +<div v-else class="mk-url-preview"> + <a :href="url" target="_blank" :title="url" v-if="!fetching"> <div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div> <article> <header> @@ -66,78 +66,79 @@ iframe width 100% root(isDark) - display block - font-size 16px - border solid 1px isDark ? #191b1f : #eee - border-radius 4px - overflow hidden + > a + display block + font-size 16px + border solid 1px isDark ? #191b1f : #eee + border-radius 4px + overflow hidden - &:hover - text-decoration none - border-color isDark ? #4f5561 : #ddd + &:hover + text-decoration none + border-color isDark ? #4f5561 : #ddd - > article > header > h1 - text-decoration underline - - > .thumbnail - position absolute - width 100px - height 100% - background-position center - background-size cover - - & + article - left 100px - width calc(100% - 100px) - - > article - padding 16px - - > header - margin-bottom 8px - - > h1 - margin 0 - font-size 1em - color isDark ? #d6dae0 : #555 - - > p - margin 0 - color isDark ? #a4aab3 : #777 - font-size 0.8em - - > footer - margin-top 8px - height 16px - - > img - display inline-block - width 16px - height 16px - margin-right 4px - vertical-align top - - > p - display inline-block - margin 0 - color isDark ? #b0b4bf : #666 - font-size 0.8em - line-height 16px - vertical-align top - - @media (max-width 500px) - font-size 8px - border none + > article > header > h1 + text-decoration underline > .thumbnail - width 70px + position absolute + width 100px + height 100% + background-position center + background-size cover & + article - left 70px - width calc(100% - 70px) + left 100px + width calc(100% - 100px) > article - padding 8px + padding 16px + + > header + margin-bottom 8px + + > h1 + margin 0 + font-size 1em + color isDark ? #d6dae0 : #555 + + > p + margin 0 + color isDark ? #a4aab3 : #777 + font-size 0.8em + + > footer + margin-top 8px + height 16px + + > img + display inline-block + width 16px + height 16px + margin-right 4px + vertical-align top + + > p + display inline-block + margin 0 + color isDark ? #b0b4bf : #666 + font-size 0.8em + line-height 16px + vertical-align top + + @media (max-width 500px) + font-size 8px + border none + + > .thumbnail + width 70px + + & + article + left 70px + width calc(100% - 70px) + + > article + padding 8px .mk-url-preview[data-darkmode] root(true)