FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

Fix design

Browse source
This commit is contained in:
syuilo 2018-04-18 19:47:56 +09:00
parent f115ef318d
commit 70a1721460
1 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -3,8 +3,8 @@
<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="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="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''"> <div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
<div class="fade"></div>
</div> </div>
<div class="fade"></div>
<div class="container"> <div class="container">
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/> <img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
<div class="title"> <div class="title">
@ -67,7 +67,6 @@ export default Vue.extend({
@import '~const.styl' @import '~const.styl'
.header .header
$banner-height = 320px
$footer-height = 58px $footer-height = 58px
overflow hidden overflow hidden
@ -91,8 +90,8 @@ export default Vue.extend({
> .banner > .banner
background-color #383838 background-color #383838
> .fade > .fade
background linear-gradient(transparent, rgba(0, 0, 0, 0.7)) background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
> .container > .container
> .title > .title
@ -102,7 +101,7 @@ export default Vue.extend({
text-shadow 0 0 8px #000 text-shadow 0 0 8px #000
> .banner-container > .banner-container
height $banner-height height 320px
overflow hidden overflow hidden
background-size cover background-size cover
background-position center background-position center
@ -113,14 +112,12 @@ export default Vue.extend({
background-size cover background-size cover
background-position center background-position center
> .fade > .fade
$fade-hight = 78px position absolute
bottom 0
position absolute left 0
top ($banner-height - $fade-hight) width 100%
left 0 height 78px
width 100%
height $fade-hight
> .container > .container
max-width 1200px max-width 1200px