🎨

src/web/app/desktop/tags/user.tag

@@ -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)`;