This commit is contained in:
syuilo 2017-11-14 23:16:19 +09:00
parent c48e9bc2ab
commit f52023bbb9

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,7 +39,11 @@
</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)' : '' }>
<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' } onclick={ onUpdateBanner }></div>
</div>
<div class="fade"></div>
<div class="container">
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/> <img class="avatar" src={ user.avatar_url + '?thumbnail&size=150' } alt="avatar"/>
<div class="title"> <div class="title">
<p class="name" href={ '/' + user.username }>{ user.name }</p> <p class="name" href={ '/' + user.username }>{ user.name }</p>
@ -54,42 +51,68 @@
<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p> <p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
</div> </div>
<footer> <footer>
<a href={ '/' + user.username }>投稿</a> <a href={ '/' + user.username } data-active>概要</a>
<a href={ '/' + user.username + '/media' }>メディア</a> <a href={ '/' + user.username + '/media' }>メディア</a>
<a href={ '/' + user.username + '/graphs' }>グラフ</a> <a href={ '/' + user.username + '/graphs' }>グラフ</a>
</footer> </footer>
</div>
<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-container
> .banner > .banner
background-color #383838 background-color #383838
> .fade
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
> .container
> .title > .title
color #fff color #fff
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
> .name > .name
text-shadow 0 0 8px #000 text-shadow 0 0 8px #000
> .banner-container
height $banner-height
overflow hidden
background-size cover
background-position center
> .banner > .banner
height 280px height 100%
background-color #f5f5f5 background-color #f5f5f5
background-size cover background-size cover
background-position center background-position center
> .fade
$fade-hight = 78px
position absolute
top ($banner-height - $fade-hight)
left 0
width 100%
height $fade-hight
> .container
max-width 1200px
margin 0 auto
> .avatar > .avatar
display block display block
position absolute position absolute
bottom 16px bottom 16px
left 16px left 16px
z-index 2 z-index 2
width 150px width 160px
height 150px height 160px
margin 0 margin 0
border solid 3px #fff border solid 3px #fff
border-radius 8px border-radius 8px
@ -125,15 +148,18 @@
z-index 1 z-index 1
height $footer-height height $footer-height
padding-left 195px padding-left 195px
background #fff
> a > a
display inline-block display inline-block
margin 0 margin 0
width 100px padding 0 16px
height $footer-height
line-height $footer-height line-height $footer-height
color #555 color #555
&[data-active]
border-bottom solid 4px $theme-color
> button > button
display block display block
position absolute position absolute
@ -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)`;