HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

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