forked from FoundKeyGang/FoundKey
🎨
This commit is contained in:
syuilo
parent
eb0c378138
commit
46d7cee639
4 changed files with 126 additions and 91 deletions
|
|
@ -727,7 +727,7 @@ desktop/views/pages/user/user.friends.vue:
|
||||||
loading: "読み込み中"
|
loading: "読み込み中"
|
||||||
no-users: "よく話すユーザーはいません"
|
no-users: "よく話すユーザーはいません"
|
||||||
|
|
||||||
desktop/views/pages/user/user.header.vue:
|
desktop/views/pages/user/user.vue:
|
||||||
is-suspended: "このユーザーは凍結されています。"
|
is-suspended: "このユーザーは凍結されています。"
|
||||||
is-remote: "このユーザーはリモートユーザーです。"
|
is-remote: "このユーザーはリモートユーザーです。"
|
||||||
view-remote: "正確な情報を見る"
|
view-remote: "正確な情報を見る"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="header" :data-is-dark-background="user.bannerUrl != null">
|
<div class="header" :data-is-dark-background="user.bannerUrl != null">
|
||||||
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
|
|
||||||
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
|
|
||||||
<div class="banner-container" :style="style">
|
<div class="banner-container" :style="style">
|
||||||
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
|
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
|
||||||
<div class="fade"></div>
|
<div class="fade"></div>
|
||||||
|
|
@ -34,16 +32,16 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.user.bannerUrl) {
|
if (this.user.bannerUrl) {
|
||||||
window.addEventListener('load', this.onScroll);
|
//window.addEventListener('load', this.onScroll);
|
||||||
window.addEventListener('scroll', this.onScroll, { passive: true });
|
//window.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
window.addEventListener('resize', this.onScroll);
|
//window.addEventListener('resize', this.onScroll);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.user.bannerUrl) {
|
if (this.user.bannerUrl) {
|
||||||
window.removeEventListener('load', this.onScroll);
|
//window.removeEventListener('load', this.onScroll);
|
||||||
window.removeEventListener('scroll', this.onScroll);
|
//window.removeEventListener('scroll', this.onScroll);
|
||||||
window.removeEventListener('resize', this.onScroll);
|
//window.removeEventListener('resize', this.onScroll);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -80,25 +78,6 @@ root(isDark)
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
|
||||||
> .is-suspended
|
|
||||||
> .is-remote
|
|
||||||
&.is-suspended
|
|
||||||
color #570808
|
|
||||||
background #ffdbdb
|
|
||||||
|
|
||||||
&.is-remote
|
|
||||||
color #573c08
|
|
||||||
background #fff0db
|
|
||||||
|
|
||||||
> p
|
|
||||||
margin 0 auto
|
|
||||||
padding 14px 16px
|
|
||||||
max-width 1200px
|
|
||||||
font-size 14px
|
|
||||||
|
|
||||||
> a
|
|
||||||
font-weight bold
|
|
||||||
|
|
||||||
&[data-is-dark-background]
|
&[data-is-dark-background]
|
||||||
> .banner-container
|
> .banner-container
|
||||||
> .banner
|
> .banner
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline">
|
<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
|
||||||
<header>
|
<header>
|
||||||
<span :data-active="mode == 'default'" @click="mode = 'default'">%i18n:@default%</span>
|
<span :data-active="mode == 'default'" @click="mode = 'default'">%fa:comment-alt R% %i18n:@default%</span>
|
||||||
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%i18n:@with-replies%</span>
|
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%fa:comments% %i18n:@with-replies%</span>
|
||||||
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%i18n:@with-media%</span>
|
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="loading" v-if="fetching">
|
<div class="loading" v-if="fetching">
|
||||||
<mk-ellipsis-icon/>
|
<mk-ellipsis-icon/>
|
||||||
|
|
@ -114,25 +114,44 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.timeline
|
root(isDark)
|
||||||
background #fff
|
background isDark ? #282C37 : #fff
|
||||||
|
|
||||||
> header
|
> header
|
||||||
padding 8px 16px
|
padding 0 8px
|
||||||
border-bottom solid 1px #eee
|
z-index 10
|
||||||
|
background isDark ? #313543 : #fff
|
||||||
|
border-radius 6px 6px 0 0
|
||||||
|
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
margin-right 16px
|
display inline-block
|
||||||
line-height 27px
|
padding 0 10px
|
||||||
font-size 18px
|
line-height 42px
|
||||||
color #555
|
font-size 12px
|
||||||
|
user-select none
|
||||||
|
|
||||||
|
&[data-active]
|
||||||
|
color $theme-color
|
||||||
|
cursor default
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
bottom 0
|
||||||
|
left -8px
|
||||||
|
width calc(100% + 16px)
|
||||||
|
height 2px
|
||||||
|
background $theme-color
|
||||||
|
|
||||||
&:not([data-active])
|
&:not([data-active])
|
||||||
color $theme-color
|
color isDark ? #9aa2a7 : #6f7477
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration underline
|
color isDark ? #d9dcde : #525a5f
|
||||||
|
|
||||||
> .loading
|
> .loading
|
||||||
padding 64px 0
|
padding 64px 0
|
||||||
|
|
@ -151,4 +170,10 @@ export default Vue.extend({
|
||||||
font-size 3em
|
font-size 3em
|
||||||
color #ccc
|
color #ccc
|
||||||
|
|
||||||
|
.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<mk-ui>
|
<mk-ui>
|
||||||
<div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching">
|
<div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
|
||||||
<div class="main">
|
<div class="is-suspended" v-if="user.isSuspended || true">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
|
||||||
<x-header :user="user"/>
|
<div class="is-remote" v-if="user.host != null || true">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
|
||||||
<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
|
<main>
|
||||||
<x-timeline class="timeline" ref="tl" :user="user"/>
|
<div class="main">
|
||||||
</div>
|
<x-header :user="user"/>
|
||||||
<div class="side">
|
<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
|
||||||
<x-profile :user="user"/>
|
<x-timeline class="timeline" ref="tl" :user="user"/>
|
||||||
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
|
</div>
|
||||||
<mk-activity :user="user"/>
|
<div class="side">
|
||||||
<x-photos :user="user"/>
|
<x-profile :user="user"/>
|
||||||
<x-friends :user="user"/>
|
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
|
||||||
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
|
<mk-activity :user="user"/>
|
||||||
<div class="nav"><mk-nav/></div>
|
<x-photos :user="user"/>
|
||||||
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
|
<x-friends :user="user"/>
|
||||||
</div>
|
<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
|
||||||
|
<div class="nav"><mk-nav/></div>
|
||||||
|
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</mk-ui>
|
</mk-ui>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -73,50 +77,77 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.zwwan0di1v4356rmdbjmwnn32tptpdp2
|
root(isDark)
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
width 980px
|
width 980px
|
||||||
padding 16px
|
padding 16px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
> .main
|
> .is-suspended
|
||||||
> .side
|
> .is-remote
|
||||||
> *:not(:last-child)
|
margin-bottom 16px
|
||||||
margin-bottom 16px
|
padding 14px 16px
|
||||||
|
font-size 14px
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
> .main
|
&.is-suspended
|
||||||
flex 1
|
color isDark ? #ffb4b4 : #570808
|
||||||
margin-right 16px
|
background isDark ? #611d1d : #ffdbdb
|
||||||
|
border solid 1px isDarl ? #d64a4a : #e09696
|
||||||
|
|
||||||
> .timeline
|
&.is-remote
|
||||||
border 1px solid rgba(#000, 0.075)
|
color isDark ? #ffbd3e : #573c08
|
||||||
border-radius 6px
|
background isDark ? #42321c : #fff0db
|
||||||
|
border solid 1px isDark ? #90733c : #dcbb7b
|
||||||
|
|
||||||
> .side
|
> a
|
||||||
width 275px
|
font-weight bold
|
||||||
|
|
||||||
> p
|
> main
|
||||||
display block
|
display flex
|
||||||
margin 0
|
justify-content center
|
||||||
padding 0 12px
|
|
||||||
text-align center
|
|
||||||
font-size 0.8em
|
|
||||||
color #aaa
|
|
||||||
|
|
||||||
> .nav
|
> .main
|
||||||
padding 16px
|
> .side
|
||||||
font-size 12px
|
> *:not(:last-child)
|
||||||
color #aaa
|
margin-bottom 16px
|
||||||
background #fff
|
|
||||||
border solid 1px rgba(#000, 0.075)
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
a
|
> .main
|
||||||
color #999
|
flex 1
|
||||||
|
margin-right 16px
|
||||||
|
|
||||||
i
|
> .timeline
|
||||||
color #ccc
|
border 1px solid rgba(#000, 0.075)
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
> .side
|
||||||
|
width 275px
|
||||||
|
|
||||||
|
> p
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 0 12px
|
||||||
|
text-align center
|
||||||
|
font-size 0.8em
|
||||||
|
color #aaa
|
||||||
|
|
||||||
|
> .nav
|
||||||
|
padding 16px
|
||||||
|
font-size 12px
|
||||||
|
color #aaa
|
||||||
|
background #fff
|
||||||
|
border solid 1px rgba(#000, 0.075)
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
|
a
|
||||||
|
color #999
|
||||||
|
|
||||||
|
i
|
||||||
|
color #ccc
|
||||||
|
|
||||||
|
.zwwan0di1v4356rmdbjmwnn32tptpdp2[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.zwwan0di1v4356rmdbjmwnn32tptpdp2:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue