From 17861ce6d18f93a10540de7a4c544b7591c8bb91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?= <syuilotan@yahoo.co.jp> Date: Thu, 15 Feb 2018 13:24:46 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/list-user.tag | 93 ---------------- .../desktop/views/components/list-user.vue | 101 ++++++++++++++++++ 2 files changed, 101 insertions(+), 93 deletions(-) delete mode 100644 src/web/app/desktop/-tags/list-user.tag create mode 100644 src/web/app/desktop/views/components/list-user.vue diff --git a/src/web/app/desktop/-tags/list-user.tag b/src/web/app/desktop/-tags/list-user.tag deleted file mode 100644 index bde90b1cc..000000000 --- a/src/web/app/desktop/-tags/list-user.tag +++ /dev/null @@ -1,93 +0,0 @@ -<mk-list-user> - <a class="avatar-anchor" href={ '/' + user.username }> - <img class="avatar" src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> - </a> - <div class="main"> - <header> - <a class="name" href={ '/' + user.username }>{ user.name }</a> - <span class="username">@{ user.username }</span> - </header> - <div class="body"> - <p class="followed" v-if="user.is_followed">フォローされています</p> - <div class="description">{ user.description }</div> - </div> - </div> - <mk-follow-button user={ user }/> - <style lang="stylus" scoped> - :scope - display block - margin 0 - padding 16px - font-size 16px - - &:after - content "" - display block - clear both - - > .avatar-anchor - display block - float left - margin 0 16px 0 0 - - > .avatar - display block - width 58px - height 58px - margin 0 - border-radius 8px - vertical-align bottom - - > .main - float left - width calc(100% - 74px) - - > header - margin-bottom 2px - - > .name - display inline - margin 0 - padding 0 - color #777 - font-size 1em - font-weight 700 - text-align left - text-decoration none - - &:hover - text-decoration underline - - > .username - text-align left - margin 0 0 0 8px - color #ccc - - > .body - > .followed - display inline-block - margin 0 0 4px 0 - padding 2px 8px - vertical-align top - font-size 10px - color #71afc7 - background #eefaff - border-radius 4px - - > .description - cursor default - display block - margin 0 - padding 0 - overflow-wrap break-word - font-size 1.1em - color #717171 - - > mk-follow-button - position absolute - top 16px - right 16px - - </style> - <script lang="typescript">this.user = this.opts.user</script> -</mk-list-user> diff --git a/src/web/app/desktop/views/components/list-user.vue b/src/web/app/desktop/views/components/list-user.vue new file mode 100644 index 000000000..28304e475 --- /dev/null +++ b/src/web/app/desktop/views/components/list-user.vue @@ -0,0 +1,101 @@ +<template> +<div class="mk-list-user"> + <a class="avatar-anchor" :href="`/${user.username}`"> + <img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/> + </a> + <div class="main"> + <header> + <a class="name" :href="`/${user.username}`">{{ user.name }}</a> + <span class="username">@{{ user.username }}</span> + </header> + <div class="body"> + <p class="followed" v-if="user.is_followed">フォローされています</p> + <div class="description">{{ user.description }}</div> + </div> + </div> + <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-list-user + margin 0 + padding 16px + font-size 16px + + &:after + content "" + display block + clear both + + > .avatar-anchor + display block + float left + margin 0 16px 0 0 + + > .avatar + display block + width 58px + height 58px + margin 0 + border-radius 8px + vertical-align bottom + + > .main + float left + width calc(100% - 74px) + + > header + margin-bottom 2px + + > .name + display inline + margin 0 + padding 0 + color #777 + font-size 1em + font-weight 700 + text-align left + text-decoration none + + &:hover + text-decoration underline + + > .username + text-align left + margin 0 0 0 8px + color #ccc + + > .body + > .followed + display inline-block + margin 0 0 4px 0 + padding 2px 8px + vertical-align top + font-size 10px + color #71afc7 + background #eefaff + border-radius 4px + + > .description + cursor default + display block + margin 0 + padding 0 + overflow-wrap break-word + font-size 1.1em + color #717171 + + > mk-follow-button + position absolute + top 16px + right 16px + +</style>