diff options
| author | こぴなたみぽ <syuilotan@yahoo.co.jp> | 2018-02-14 20:47:40 +0900 |
|---|---|---|
| committer | こぴなたみぽ <syuilotan@yahoo.co.jp> | 2018-02-14 20:47:40 +0900 |
| commit | b48b6bde8eba153615ef27a30deba23eb5d18303 (patch) | |
| tree | b4fa0bd0865f07b24c1d8d0849d536d1766c55aa /src/web | |
| parent | wip (diff) | |
| download | misskey-b48b6bde8eba153615ef27a30deba23eb5d18303.tar.gz misskey-b48b6bde8eba153615ef27a30deba23eb5d18303.tar.bz2 misskey-b48b6bde8eba153615ef27a30deba23eb5d18303.zip | |
wip
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/mobile/tags/user-card.tag | 55 | ||||
| -rw-r--r-- | src/web/app/mobile/views/user-card.vue | 62 |
2 files changed, 62 insertions, 55 deletions
diff --git a/src/web/app/mobile/tags/user-card.tag b/src/web/app/mobile/tags/user-card.tag deleted file mode 100644 index 227b8b389d..0000000000 --- a/src/web/app/mobile/tags/user-card.tag +++ /dev/null @@ -1,55 +0,0 @@ -<mk-user-card> - <header style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=1024)' : '' }> - <a href={ '/' + user.username }> - <img src={ user.avatar_url + '?thumbnail&size=200' } alt="avatar"/> - </a> - </header> - <a class="name" href={ '/' + user.username } target="_blank">{ user.name }</a> - <p class="username">@{ user.username }</p> - <mk-follow-button user={ user }/> - <style lang="stylus" scoped> - :scope - display inline-block - width 200px - text-align center - border-radius 8px - background #fff - - > header - display block - height 80px - background-color #ddd - background-size cover - background-position center - border-radius 8px 8px 0 0 - - > a - > img - position absolute - top 20px - left calc(50% - 40px) - width 80px - height 80px - border solid 2px #fff - border-radius 8px - - > .name - display block - margin 24px 0 0 0 - font-size 16px - color #555 - - > .username - margin 0 - font-size 15px - color #ccc - - > mk-follow-button - display inline-block - margin 8px 0 16px 0 - - </style> - <script lang="typescript"> - this.user = this.opts.user; - </script> -</mk-user-card> diff --git a/src/web/app/mobile/views/user-card.vue b/src/web/app/mobile/views/user-card.vue new file mode 100644 index 0000000000..f70def48f8 --- /dev/null +++ b/src/web/app/mobile/views/user-card.vue @@ -0,0 +1,62 @@ +<template> +<div class="mk-user-card"> + <header :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''"> + <a :href="`/${user.username}`"> + <img :src="`${user.avatar_url}?thumbnail&size=200`" alt="avatar"/> + </a> + </header> + <a class="name" :href="`/${user.username}`" target="_blank">{{ user.name }}</a> + <p class="username">@{{ user.username }}</p> + <mk-follow-button :user="user"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['user'] +}); +</script> + +<style lang="stylus" scoped> +.mk-user-card + display inline-block + width 200px + text-align center + border-radius 8px + background #fff + + > header + display block + height 80px + background-color #ddd + background-size cover + background-position center + border-radius 8px 8px 0 0 + + > a + > img + position absolute + top 20px + left calc(50% - 40px) + width 80px + height 80px + border solid 2px #fff + border-radius 8px + + > .name + display block + margin 24px 0 0 0 + font-size 16px + color #555 + + > .username + margin 0 + font-size 15px + color #ccc + + > mk-follow-button + display inline-block + margin 8px 0 16px 0 + +</style> |