Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

🎨

Browse source
This commit is contained in:
syuilo 2017-11-14 23:16:19 +09:00
parent c48e9bc2ab
commit f52023bbb9
1 changed files with 116 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
src/web/app/desktop/tags/user.tag
View file

@ -12,14 +12,7 @@
> .user > .user
> header > header
max-width 1200px
margin 0 auto
padding 0 16px
> mk-user-header > mk-user-header
border solid 1px rgba(0, 0, 0, 0.075)
border-top none
border-radius 0 0 6px 6px
overflow hidden overflow hidden
</style> </style>
@ -46,111 +39,144 @@
</mk-user> </mk-user>
<mk-user-header data-is-dark-background={ user.banner_url != null }> <mk-user-header data-is-dark-background={ user.banner_url != null }>
<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=1024)' : '' } onclick={ onUpdateBanner }></div> <div class="banner-container" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' }>
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/> <div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' } onclick={ onUpdateBanner }></div>
<div class="title"> </div>
<p class="name" href={ '/' + user.username }>{ user.name }</p> <div class="fade"></div>
<p class="username">@{ user.username }</p> <div class="container">
<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p> <img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/>
<div class="title">
<p class="name" href={ '/' + user.username }>{ user.name }</p>
<p class="username">@{ user.username }</p>
<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
</div>
<footer>
<a href={ '/' + user.username } data-active>概要</a>
<a href={ '/' + user.username + '/media' }>メディア</a>
<a href={ '/' + user.username + '/graphs' }>グラフ</a>
</footer>
</div> </div>
<footer>
<a href={ '/' + user.username }>投稿</a>
<a href={ '/' + user.username + '/media' }>メディア</a>
<a href={ '/' + user.username + '/graphs' }>グラフ</a>
</footer>
<style> <style>
:scope :scope
$banner-height = 320px
$footer-height = 58px $footer-height = 58px
display block display block
background #fff background #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
&[data-is-dark-background] &[data-is-dark-background]
> .banner > .banner-container
background-color #383838 > .banner
background-color #383838
> .title > .fade
color #fff
background linear-gradient(transparent, rgba(0, 0, 0, 0.7)) background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
> .name > .container
text-shadow 0 0 8px #000 > .title
color #fff
> .banner > .name
height 280px text-shadow 0 0 8px #000
background-color #f5f5f5
> .banner-container
height $banner-height
overflow hidden
background-size cover background-size cover
background-position center background-position center
> .avatar > .banner
display block height 100%
position absolute background-color #f5f5f5
bottom 16px background-size cover
left 16px background-position center
z-index 2
width 150px > .fade
height 150px $fade-hight = 78px
margin 0
border solid 3px #fff
border-radius 8px
box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
> .title
position absolute position absolute
bottom $footer-height top ($banner-height - $fade-hight)
left 0 left 0
width 100% width 100%
padding 0 0 8px 195px height $fade-hight
color #656565
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
> .name > .container
display block max-width 1200px
margin 0 margin 0 auto
line-height 40px
font-weight bold
font-size 2em
> .username > .avatar
> .location
display inline-block
margin 0 16px 0 0
line-height 20px
opacity 0.8
> i
margin-right 4px
> footer
z-index 1
height $footer-height
padding-left 195px
background #fff
> a
display inline-block
margin 0
width 100px
line-height $footer-height
color #555
> button
display block display block
position absolute position absolute
top 0 bottom 16px
right 0 left 16px
margin 8px z-index 2
padding 0 width 160px
width $footer-height - 16px height 160px
line-height $footer-height - 16px - 2px margin 0
font-size 1.2em border solid 3px #fff
color #777 border-radius 8px
border solid 1px #eee box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
border-radius 4px
&:hover > .title
position absolute
bottom $footer-height
left 0
width 100%
padding 0 0 8px 195px
color #656565
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
> .name
display block
margin 0
line-height 40px
font-weight bold
font-size 2em
> .username
> .location
display inline-block
margin 0 16px 0 0
line-height 20px
opacity 0.8
> i
margin-right 4px
> footer
z-index 1
height $footer-height
padding-left 195px
> a
display inline-block
margin 0
padding 0 16px
height $footer-height
line-height $footer-height
color #555 color #555
border solid 1px #ddd
&[data-active]
border-bottom solid 4px $theme-color
> button
display block
position absolute
top 0
right 0
margin 8px
padding 0
width $footer-height - 16px
line-height $footer-height - 16px - 2px
font-size 1.2em
color #777
border solid 1px #eee
border-radius 4px
&:hover
color #555
border solid 1px #ddd
</style> </style>
<script> <script>
@ -174,10 +200,10 @@
this.scroll = () => { this.scroll = () => {
const top = window.scrollY; const top = window.scrollY;
const height = 280/*px*/;
const pos = 50 - ((top / height) * 50); const z = 1.25; // 奥行き(小さいほど奥)
this.refs.banner.style.backgroundPosition = `center ${pos}%`; const pos = -(top / z);
this.refs.banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
const blur = top / 32 const blur = top / 32
if (blur <= 10) this.refs.banner.style.filter = `blur(${blur}px)`; if (blur <= 10) this.refs.banner.style.filter = `blur(${blur}px)`;