natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix bug

This commit is contained in:
syuilo 2018-04-22 19:33:06 +09:00
parent a7cbdbc1f2
commit 8682fd21c4
1 changed files with 67 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/client/app/common/views/components/url-preview.vue
View File

@ -2,8 +2,8 @@
<iframe v-if="youtubeId" type="text/html" height="250" <iframe v-if="youtubeId" type="text/html" height="250"
:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`" :src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
frameborder="0"/> frameborder="0"/>
<div v-else> <div v-else class="mk-url-preview">
<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching"> <a :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>
@ -66,78 +66,79 @@ iframe
width 100% width 100%
root(isDark) root(isDark)
display block > a
font-size 16px display block
border solid 1px isDark ? #191b1f : #eee font-size 16px
border-radius 4px border solid 1px isDark ? #191b1f : #eee
overflow hidden border-radius 4px
overflow hidden
&:hover &:hover
text-decoration none text-decoration none
border-color isDark ? #4f5561 : #ddd border-color isDark ? #4f5561 : #ddd
> article > header > h1 > article > header > h1
text-decoration underline 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
> .thumbnail > .thumbnail
width 70px position absolute
width 100px
height 100%
background-position center
background-size cover
& + article & + article
left 70px left 100px
width calc(100% - 70px) width calc(100% - 100px)
> article > 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] .mk-url-preview[data-darkmode]
root(true) root(true)