Default UI redesign (#7429)
* wip * wip * wip * wip * Update default.sidebar.vue * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update sticky-sidebar.ts * wip * wip * Update messaging-room.form.vue * Update timeline.vue
This commit is contained in:
syuilo
GitHub
parent
7d2126e2b2
commit
d3fe02fb3e
81 changed files with 1532 additions and 658 deletions
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<MkTab v-model:value="with_" class="_vMargin">
|
||||
<MkTab v-model:value="with_" class="_isolated _section">
|
||||
<option :value="null">{{ $ts.notes }}</option>
|
||||
<option value="replies">{{ $ts.notesAndReplies }}</option>
|
||||
<option value="files">{{ $ts.withFiles }}</option>
|
||||
</MkTab>
|
||||
<XNotes ref="timeline" class="_vMargin" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
|
||||
<XNotes ref="timeline" class="_section _noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -93,15 +93,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ftskorzw narrow _section" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
||||
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
||||
<!-- TODO -->
|
||||
<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSuspended }}</div> -->
|
||||
<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSilenced }}</div> -->
|
||||
|
||||
<div class="profile _content _vMargin">
|
||||
<div class="profile">
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>
|
||||
|
||||
<div class="_vMargin _panel main" :key="user.id">
|
||||
<div class="_vMargin _block main" :key="user.id">
|
||||
<div class="banner-container" :style="style">
|
||||
<div class="banner" ref="banner" :style="style"></div>
|
||||
<div class="fade"></div>
|
||||
|
|
@ -177,37 +177,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav _vMargin">
|
||||
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
|
||||
<Fa :icon="faCommentAlt" class="icon"/>
|
||||
<span>{{ $ts.notes }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
|
||||
<Fa :icon="faPaperclip" class="icon"/>
|
||||
<span>{{ $ts.clips }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
|
||||
<Fa :icon="faFileAlt" class="icon"/>
|
||||
<span>{{ $ts.pages }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div class="nav _isolated">
|
||||
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
|
||||
<Fa :icon="faCommentAlt" class="icon"/>
|
||||
<span>{{ $ts.notes }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
|
||||
<Fa :icon="faPaperclip" class="icon"/>
|
||||
<span>{{ $ts.clips }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
|
||||
<Fa :icon="faFileAlt" class="icon"/>
|
||||
<span>{{ $ts.pages }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
|
||||
<template v-if="page === 'index'">
|
||||
<div class="_content _vMargin">
|
||||
<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
|
||||
<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||
<template v-if="page === 'index'">
|
||||
<div>
|
||||
<div v-if="user.pinnedNotes.length > 0">
|
||||
<XNote v-for="note in user.pinnedNotes" class="note _block _isolated" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||
</div>
|
||||
<XPhotos :user="user" :key="user.id"/>
|
||||
<XActivity :user="user" :key="user.id"/>
|
||||
</div>
|
||||
<XPhotos :user="user" :key="user.id" class="_vMargin"/>
|
||||
<XActivity :user="user" :key="user.id" class="_vMargin"/>
|
||||
</div>
|
||||
<div class="_content _vMargin">
|
||||
<XUserTimeline :user="user" class="_content"/>
|
||||
</div>
|
||||
</template>
|
||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
|
||||
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
|
||||
<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
|
||||
<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
|
||||
<div>
|
||||
<XUserTimeline :user="user"/>
|
||||
</div>
|
||||
</template>
|
||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
|
||||
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
|
||||
<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
|
||||
<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
<MkError @retry="fetch()"/>
|
||||
|
|
@ -234,6 +236,7 @@ import { getUserMenu } from '@client/scripts/get-user-menu';
|
|||
import number from '../../filters/number';
|
||||
import { userPage, acct as getAcct } from '../../filters/user';
|
||||
import * as os from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -268,6 +271,10 @@ export default defineComponent({
|
|||
INFO: computed(() => this.user ? {
|
||||
userName: this.user,
|
||||
avatar: this.user,
|
||||
share: {
|
||||
title: this.user.name,
|
||||
url: `${url}/@${this.user.username}`
|
||||
},
|
||||
action: {
|
||||
icon: faEllipsisH,
|
||||
handler: this.menu
|
||||
|
|
@ -304,7 +311,7 @@ export default defineComponent({
|
|||
|
||||
mounted() {
|
||||
window.requestAnimationFrame(this.parallaxLoop);
|
||||
this.narrow = this.$el.clientWidth < 1000;
|
||||
this.narrow = true; //this.$el.clientWidth < 1000;
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
|
|
@ -415,7 +422,7 @@ export default defineComponent({
|
|||
font-size: 80%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 20px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 0.5px var(--divider);
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
|
@ -423,7 +430,7 @@ export default defineComponent({
|
|||
> .status {
|
||||
display: flex;
|
||||
padding: 20px 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
font-size: 90%;
|
||||
|
||||
> a {
|
||||
|
|
@ -451,13 +458,13 @@ export default defineComponent({
|
|||
|
||||
> .description {
|
||||
padding: 20px 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
> .fields {
|
||||
padding: 20px 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
font-size: 90%;
|
||||
|
||||
> .field {
|
||||
|
|
@ -540,9 +547,9 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
.ftskorzw.narrow {
|
||||
max-width: 100vw;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
|
||||
> .punished {
|
||||
font-size: 0.8em;
|
||||
|
|
@ -654,7 +661,7 @@ export default defineComponent({
|
|||
text-align: center;
|
||||
padding: 50px 8px 16px 8px;
|
||||
font-weight: bold;
|
||||
border-bottom: solid 1px var(--divider);
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
|
||||
> .bottom {
|
||||
> * {
|
||||
|
|
@ -689,7 +696,7 @@ export default defineComponent({
|
|||
> .fields {
|
||||
padding: 24px;
|
||||
font-size: 0.9em;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> .field {
|
||||
display: flex;
|
||||
|
|
@ -726,7 +733,7 @@ export default defineComponent({
|
|||
> .status {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> a {
|
||||
flex: 1;
|
||||
|
|
@ -753,41 +760,42 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--margin);
|
||||
//font-size: 120%;
|
||||
font-weight: bold;
|
||||
> .contents {
|
||||
> .nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//font-size: 120%;
|
||||
font-weight: bold;
|
||||
|
||||
> .link {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px transparent;
|
||||
> .link {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
&:not(.active):hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
margin-bottom: var(--margin);
|
||||
> .content {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
|
|
@ -831,8 +839,10 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
font-size: 80%;
|
||||
> .contents {
|
||||
> .nav {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue