Unfinished refactor of User Layout

locales/de-DE.yml

@@ -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"

locales/en-US.yml

@@ -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"

packages/client/src/components/MkRemoteCaution.vue

@@ -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);
+	background: var(--infoRemoteBg);
-	color: var(--infoWarnFg);
+	color: var(--fg);
 	font-size: 0.85rem;
 
 	> .link {

packages/client/src/pages/user/home.vue

@@ -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;
+						top: 10px;
-						left: 12px;
+						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;

packages/client/src/scripts/theme.ts

@@ -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');
 }
 

packages/client/src/themes/_dark.json5

@@ -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',

packages/client/src/themes/_light.json5

@@ -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',

packages/client/src/themes/d-rosepine.json5

@@ -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)',

packages/client/src/themes/d-rosepinemoon.json5

@@ -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)',