sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-02-11 23:35:32 +09:00
parent ea2b5a5aac
commit cbec4229d3
2 changed files with 108 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/web/app/common/views/components/url-preview.vue
View File

@ -1,126 +1,123 @@
<template>
<a :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>
</header>
<p>{{ description }}</p>
<footer>
<img class="icon" v-if="icon" :src="icon"/>
<p>{{ sitename }}</p>
</footer>
</article>
</a>
<a class="mk-url-preview" :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>
</header>
<p>{{ description }}</p>
<footer>
<img class="icon" v-if="icon" :src="icon"/>
<p>{{ sitename }}</p>
</footer>
</article>
</a>
</template>
<script lang="typescript">
export default {
props: ['url'],
data() {
return {
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null
};
},
created() {
fetch('/api:url?url=' + this.url).then(res => {
res.json().then(info => {
this.title = info.title;
this.description = info.description;
this.thumbnail = info.thumbnail;
this.icon = info.icon;
this.sitename = info.sitename;
<script lang="ts">
import Vue from 'vue';
this.fetching = false;
});
export default Vue.extend({
props: ['url'],
data() {
return {
fetching: true,
title: null,
description: null,
thumbnail: null,
icon: null,
sitename: null
};
},
created() {
fetch('/api:url?url=' + this.url).then(res => {
res.json().then(info => {
this.title = info.title;
this.description = info.description;
this.thumbnail = info.thumbnail;
this.icon = info.icon;
this.sitename = info.sitename;
this.fetching = false;
});
}
};
});
}
});
</script>
<style lang="stylus" scoped>
:scope
display block
font-size 16px
.mk-url-preview
display block
font-size 16px
border solid 1px #eee
border-radius 4px
overflow hidden
> a
display block
border solid 1px #eee
border-radius 4px
overflow hidden
&:hover
text-decoration none
border-color #ddd
&:hover
text-decoration none
border-color #ddd
> article > header > h1
text-decoration underline
> article > header > h1
text-decoration underline
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
& + article
left 100px
width calc(100% - 100px)
& + article
left 100px
width calc(100% - 100px)
> article
padding 16px
> article
padding 16px
> header
margin-bottom 8px
> header
margin-bottom 8px
> h1
margin 0
font-size 1em
color #555
> h1
margin 0
font-size 1em
color #555
> p
margin 0
color #777
font-size 0.8em
> p
margin 0
color #777
font-size 0.8em
> footer
margin-top 8px
height 16px
> footer
margin-top 8px
height 16px
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> p
display inline-block
margin 0
color #666
font-size 0.8em
line-height 16px
vertical-align top
> p
display inline-block
margin 0
color #666
font-size 0.8em
line-height 16px
vertical-align top
@media (max-width 500px)
font-size 8px
border none
@media (max-width 500px)
font-size 8px
> .thumbnail
width 70px
> a
border none
& + article
left 70px
width calc(100% - 70px)
> .thumbnail
width 70px
& + article
left 70px
width calc(100% - 70px)
> article
padding 8px
> article
padding 8px
</style>