yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨

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

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

@ -12,14 +12,7 @@
> .user
> header
max-width 1200px
margin 0 auto
padding 0 16px
> mk-user-header
border solid 1px rgba(0, 0, 0, 0.075)
border-top none
border-radius 0 0 6px 6px
overflow hidden
</style>
@ -46,7 +39,11 @@
</mk-user>
<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"/>
<div class="title">
<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>
</div>
<footer>
<a href={ '/' + user.username }>投稿</a>
<a href={ '/' + user.username } data-active>概要</a>
<a href={ '/' + user.username + '/media' }>メディア</a>
<a href={ '/' + user.username + '/graphs' }>グラフ</a>
</footer>
</div>
<style>
:scope
$banner-height = 320px
$footer-height = 58px
display block
background #fff
background #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
&[data-is-dark-background]
> .banner-container
> .banner
background-color #383838
> .fade
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
> .container
> .title
color #fff
background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
> .name
text-shadow 0 0 8px #000
> .banner-container
height $banner-height
overflow hidden
background-size cover
background-position center
> .banner
height 280px
height 100%
background-color #f5f5f5
background-size cover
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
display block
position absolute
bottom 16px
left 16px
z-index 2
width 150px
height 150px
width 160px
height 160px
margin 0
border solid 3px #fff
border-radius 8px
@ -125,15 +148,18 @@
z-index 1
height $footer-height
padding-left 195px
background #fff
> a
display inline-block
margin 0
width 100px
padding 0 16px
height $footer-height
line-height $footer-height
color #555
&[data-active]
border-bottom solid 4px $theme-color
> button
display block
position absolute
@ -174,10 +200,10 @@
this.scroll = () => {
const top = window.scrollY;
const height = 280/*px*/;
const pos = 50 - ((top / height) * 50);
this.refs.banner.style.backgroundPosition = `center ${pos}%`;
const z = 1.25; // 奥行き(小さいほど奥)
const pos = -(top / z);
this.refs.banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
const blur = top / 32
if (blur <= 10) this.refs.banner.style.filter = `blur(${blur}px)`;