Unfinished refactor of User Layout
This commit is contained in:
cutestnekoaqua
parent
785ace95a4
commit
d0ceb4cd70
9 changed files with 147 additions and 23 deletions
|
|
@ -257,7 +257,7 @@ agreeTo: "Ich stimme {0} zu"
|
|||
tos: "Nutzungsbedingungen"
|
||||
start: "Anfangen"
|
||||
home: "Startseite"
|
||||
remoteUserCaution: "Diese Informationen sind möglicherweise unvollständig, da der Benutzer von einer fremden Instanz stammt."
|
||||
remoteUserCaution: "Informationen von fremden Instanzen sind möglicherweise unvollständig."
|
||||
activity: "Aktivität"
|
||||
images: "Bilder"
|
||||
birthday: "Geburtstag"
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@ agreeTo: "I agree to {0}"
|
|||
tos: "Terms of Service"
|
||||
start: "Begin"
|
||||
home: "Home"
|
||||
remoteUserCaution: "As this user is from a remote instance, the shown information may be incomplete."
|
||||
remoteUserCaution: "Information from remote users may be incomplete."
|
||||
activity: "Activity"
|
||||
images: "Images"
|
||||
birthday: "Birthday"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="jmgmzlwq _block"><i class="ph-warning-bold ph-lg" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
|
||||
<div class="jmgmzlwq _block">{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -13,8 +13,8 @@ defineProps<{
|
|||
<style lang="scss" scoped>
|
||||
.jmgmzlwq {
|
||||
padding: 16px;
|
||||
background: var(--infoWarnBg);
|
||||
color: var(--infoWarnFg);
|
||||
background: var(--infoRemoteBg);
|
||||
color: var(--fg);
|
||||
font-size: 0.85rem;
|
||||
|
||||
> .link {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<div class="fade"></div>
|
||||
<div class="title">
|
||||
<MkUserName class="name" :user="user" :nowrap="true"/>
|
||||
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
|
||||
<div class="bottom">
|
||||
<span class="username"><MkAcct :user="user" :detail="true"/></span>
|
||||
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple-fill ph-lg"></i></span>
|
||||
|
|
@ -24,16 +25,11 @@
|
|||
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ph-robot-bold ph-lg"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
|
||||
<div class="actions">
|
||||
<button class="menu _button" @click="menu"><i class="ph-dots-three-outline-bold ph-lg"></i></button>
|
||||
<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
|
||||
<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
|
||||
</div>
|
||||
</div>
|
||||
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
|
||||
<div class="title">
|
||||
<MkUserName :user="user" :nowrap="false" class="name"/>
|
||||
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followedWindow">{{ i18n.ts.followsYou }}</span>
|
||||
<div class="bottom">
|
||||
<span class="username"><MkAcct :user="user" :detail="true"/></span>
|
||||
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple-fill ph-lg"></i></span>
|
||||
|
|
@ -42,6 +38,13 @@
|
|||
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ph-robot-bold ph-lg"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="follow-container">
|
||||
<div class="actions">
|
||||
<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
|
||||
<button class="menu _button" @click="menu"><i class="ph-dots-three-outline-bold ph-lg"></i></button>
|
||||
<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
|
||||
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
|
||||
|
|
@ -247,8 +250,8 @@ onUnmounted(() => {
|
|||
|
||||
> .followed {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
left: 120px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
|
|
@ -260,9 +263,6 @@ onUnmounted(() => {
|
|||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 8px;
|
||||
border-radius: 24px;
|
||||
|
||||
|
|
@ -275,6 +275,88 @@ onUnmounted(() => {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
> .koudoku {
|
||||
margin-left: 4px;
|
||||
width: 31px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 8px 154px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
> .name {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
font-weight: bold;
|
||||
font-size: 1.8em;
|
||||
text-shadow: 0 0 8px #000;
|
||||
}
|
||||
|
||||
> .followed {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 220px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
font-size: 0.7em;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
> .bottom {
|
||||
> * {
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
line-height: 20px;
|
||||
opacity: 0.8;
|
||||
|
||||
&.username {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .follow-container {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
> .fade {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
background: linear-gradient(transparent, rgba(#000, 0.7));
|
||||
}
|
||||
|
||||
> .actions {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 24px;
|
||||
|
||||
> .menu {
|
||||
vertical-align: bottom;
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
color: --fg;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
> .koudoku {
|
||||
margin-left: 4px;
|
||||
vertical-align: bottom;
|
||||
|
|
@ -321,6 +403,36 @@ onUnmounted(() => {
|
|||
font-weight: bold;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
|
||||
> .name {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
font-weight: bold;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
> .followed {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 220px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
font-size: 0.7em;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
> .followedWindow {
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: 80px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
font-size: 0.7em;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
> .bottom {
|
||||
> * {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export function applyTheme(theme: Theme, persist = true) {
|
|||
localStorage.setItem('colorSchema', colorSchema);
|
||||
}
|
||||
|
||||
// 色計算など再度行えるようにクライアント全体に通知
|
||||
// Site-wide notification that the theme has changed
|
||||
globalEvents.emit('themeChanged');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
// ダークテーマのベーステーマ
|
||||
// このテーマが直接使われることは無い
|
||||
// Basic Dark theme
|
||||
// It just provides the default colors, if
|
||||
// no colors are specified, this isn't ever
|
||||
// gonna be used directly
|
||||
{
|
||||
id: 'dark',
|
||||
|
||||
name: 'Dark',
|
||||
author: 'syuilo',
|
||||
author: 'Calckey Contributors',
|
||||
desc: 'Default dark theme',
|
||||
kind: 'dark',
|
||||
|
||||
|
|
@ -52,6 +54,8 @@
|
|||
infoFg: '#fff',
|
||||
infoWarnBg: '#42321c',
|
||||
infoWarnFg: '#ffbd3e',
|
||||
infoRemoteBg: 'rgba(71, 71, 71, 0.4)',
|
||||
infoRemoteFg: 'rgba(150, 150, 150, 0.4)',
|
||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||
cwBg: '#687390',
|
||||
cwFg: '#393f4f',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
// ライトテーマのベーステーマ
|
||||
// このテーマが直接使われることは無い
|
||||
// Basic Dark theme
|
||||
// It just provides the default colors, if
|
||||
// no colors are specified, this isn't ever
|
||||
// gonna be used directly
|
||||
{
|
||||
id: 'light',
|
||||
|
||||
name: 'Light',
|
||||
author: 'syuilo',
|
||||
author: 'Calckey Contributors',
|
||||
desc: 'Default light theme',
|
||||
kind: 'light',
|
||||
|
||||
|
|
@ -52,6 +54,8 @@
|
|||
infoFg: '#72818a',
|
||||
infoWarnBg: '#fff0db',
|
||||
infoWarnFg: '#8f6e31',
|
||||
infoRemoteBg: 'rgba(150, 150, 150, 0.4)',
|
||||
infoRemoteFg: 'rgba(71, 71, 71, 0.4)',
|
||||
switchBg: 'rgba(0, 0, 0, 0.15)',
|
||||
cwBg: '#b1b9c1',
|
||||
cwFg: '#fff',
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@
|
|||
fgOnAccent: '#26233a',
|
||||
infoWarnBg: '#26233a',
|
||||
infoWarnFg: '#f6c177',
|
||||
infoRemoteBg: 'rgba(150, 150, 150, 0.4)',
|
||||
infoRemoteFg: 'rgba(71, 71, 71, 0.4)',
|
||||
navHoverFg: ':lighten<17<@fg',
|
||||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@
|
|||
fgOnAccent: '#393552',
|
||||
infoWarnBg: '#393552',
|
||||
infoWarnFg: '#f6c177',
|
||||
infoRemoteBg: 'rgba(71, 71, 71, 0.4)',
|
||||
infoRemoteFg: 'rgba(150, 150, 150, 0.4)',
|
||||
navHoverFg: ':lighten<17<@fg',
|
||||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
|
|
|
|||
Loading…
Reference in a new issue