diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-02-24 06:29:21 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-02-24 07:55:11 +0900 |
| commit | 482c86a25a68a20ca950d0dc5fa8a1e00bde6783 (patch) | |
| tree | 94807741071df280efcd7d8a3c3b37cedda3975c /src/web/app/mobile/views/components | |
| parent | Fix #1131 (diff) | |
| download | sharkey-482c86a25a68a20ca950d0dc5fa8a1e00bde6783.tar.gz sharkey-482c86a25a68a20ca950d0dc5fa8a1e00bde6783.tar.bz2 sharkey-482c86a25a68a20ca950d0dc5fa8a1e00bde6783.zip | |
:v:
Diffstat (limited to 'src/web/app/mobile/views/components')
| -rw-r--r-- | src/web/app/mobile/views/components/index.ts | 2 | ||||
| -rw-r--r-- | src/web/app/mobile/views/components/widgets/profile.vue | 62 |
2 files changed, 64 insertions, 0 deletions
diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts index d372f22332..ea2349802b 100644 --- a/src/web/app/mobile/views/components/index.ts +++ b/src/web/app/mobile/views/components/index.ts @@ -23,6 +23,7 @@ import widgetContainer from './widget-container.vue'; //#region widgets import wActivity from './widgets/activity.vue'; +import wProfile from './widgets/profile.vue'; //#endregion Vue.component('mk-ui', ui); @@ -48,4 +49,5 @@ Vue.component('mk-widget-container', widgetContainer); //#region widgets Vue.component('mkw-activity', wActivity); +Vue.component('mkw-profile', wProfile); //#endregion diff --git a/src/web/app/mobile/views/components/widgets/profile.vue b/src/web/app/mobile/views/components/widgets/profile.vue new file mode 100644 index 0000000000..9336068e57 --- /dev/null +++ b/src/web/app/mobile/views/components/widgets/profile.vue @@ -0,0 +1,62 @@ +<template> +<div class="mkw-profile"> + <mk-widget-container> + <div :class="$style.banner" + :style="os.i.banner_url ? `background-image: url(${os.i.banner_url}?thumbnail&size=256)` : ''" + ></div> + <img :class="$style.avatar" + :src="`${os.i.avatar_url}?thumbnail&size=96`" + alt="avatar" + /> + <router-link :class="$style.name" :to="`/${os.i.username}`">{{ os.i.name }}</router-link> + </mk-widget-container> +</div> +</template> + +<script lang="ts"> +import define from '../../../../common/define-widget'; +export default define({ + name: 'profile' +}); +</script> + +<style lang="stylus" module> +.banner + height 100px + background-color #f5f5f5 + background-size cover + background-position center + cursor pointer + +.banner:before + content "" + display block + width 100% + height 100% + background rgba(0, 0, 0, 0.5) + +.avatar + display block + position absolute + width 58px + height 58px + margin 0 + vertical-align bottom + top ((100px - 58px) / 2) + left ((100px - 58px) / 2) + border none + border-radius 100% + box-shadow 0 0 16px rgba(0, 0, 0, 0.5) + +.name + display block + position absolute + top 0 + left 92px + margin 0 + line-height 100px + color #fff + font-weight bold + text-shadow 0 0 8px rgba(0, 0, 0, 0.5) + +</style> |