user page 🎨
This commit is contained in:
parent
f565c5f730
commit
fe8334931f
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<div class="ftskorzw wide" v-if="user && narrow === false">
|
<div class="ftskorzw wide" v-if="user && narrow === false">
|
||||||
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
|
<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
|
||||||
|
|
||||||
<div class="banner-container _gap" :style="style">
|
<div class="banner-container" :style="style">
|
||||||
<div class="banner" ref="banner" :style="style"></div>
|
<div class="banner" ref="banner" :style="style"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contents">
|
<div class="contents">
|
||||||
|
@ -276,6 +276,7 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
[symbols.PAGE_INFO]: computed(() => this.user ? {
|
[symbols.PAGE_INFO]: computed(() => this.user ? {
|
||||||
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
|
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
|
||||||
|
subtitle: `@${getAcct(this.user)}`,
|
||||||
userName: this.user,
|
userName: this.user,
|
||||||
avatar: this.user,
|
avatar: this.user,
|
||||||
path: `/@${this.user.username}`,
|
path: `/@${this.user.username}`,
|
||||||
|
@ -313,7 +314,7 @@ export default defineComponent({
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
window.requestAnimationFrame(this.parallaxLoop);
|
window.requestAnimationFrame(this.parallaxLoop);
|
||||||
this.narrow = true; //this.$el.clientWidth < 1000;
|
this.narrow = this.$el.clientWidth < 1000;
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
|
@ -381,13 +382,10 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
.ftskorzw.wide {
|
.ftskorzw.wide {
|
||||||
max-width: 1150px;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
> .banner-container {
|
> .banner-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 450px;
|
height: 300px;
|
||||||
border-radius: 16px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
@ -404,6 +402,7 @@ export default defineComponent({
|
||||||
|
|
||||||
> .contents {
|
> .contents {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
> .side {
|
> .side {
|
||||||
width: 360px;
|
width: 360px;
|
||||||
|
@ -561,6 +560,7 @@ export default defineComponent({
|
||||||
.ftskorzw.narrow {
|
.ftskorzw.narrow {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
|
background: var(--bg);
|
||||||
|
|
||||||
> .punished {
|
> .punished {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
|
Loading…
Reference in New Issue