johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better banner redering

Browse source
This commit is contained in:
syuilo 2018-05-07 17:05:05 +09:00
parent d5d7a527a0
commit 10c932876d
2 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,8 +2,8 @@
<div class="header" :data-is-dark-background="user.bannerUrl != null"> <div class="header" :data-is-dark-background="user.bannerUrl != null">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div> <div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</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="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})` : ''"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
<div class="fade"></div> <div class="fade"></div>
</div> </div>
<div class="container"> <div class="container">
@ -25,6 +25,15 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['user'], props: ['user'],
computed: {
style(): any {
if (this.user.bannerUrl == null) return {};
return {
backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null,
backgroundImage: `url(${ this.user.bannerUrl })`
};
}
},
mounted() { mounted() {
if (this.user.bannerUrl) { if (this.user.bannerUrl) {
window.addEventListener('load', this.onScroll); window.addEventListener('load', this.onScroll);

9
src/client/app/mobile/views/pages/user.vue
View file

@ -5,7 +5,7 @@
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div> <div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</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="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>
<header> <header>
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <div class="banner" :style="style"></div>
<div class="body"> <div class="body">
<div class="top"> <div class="top">
<a class="avatar"> <a class="avatar">
@ -80,6 +80,13 @@ export default Vue.extend({
computed: { computed: {
age(): number { age(): number {
return age(this.user.profile.birthday); return age(this.user.profile.birthday);
},
style(): any {
if (this.user.bannerUrl == null) return {};
return {
backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null,
backgroundImage: `url(${ this.user.bannerUrl })`
};
} }
}, },
watch: { watch: {