Tweak UI

src/client/components/abuse-report-window.vue

@@ -8,14 +8,14 @@
 			</template>
 		</I18n>
 	</template>
-	<div class="dpvffvvy">
-		<div class="_root">
+	<div class="dpvffvvy _monolithic_">
+		<div class="_section">
 			<MkTextarea v-model:value="comment">
 				<span>{{ $ts.details }}</span>
 				<template #desc>{{ $ts.fillAbuseReportDescription }}</template>
 			</MkTextarea>
 		</div>
-		<div class="_root">
+		<div class="_section">
 			<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
 		</div>
 	</div>

src/client/components/notes.vue

@@ -15,7 +15,7 @@
 	</div>
 
 	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<XNote :note="note" class="_block _gap" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+		<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">

src/client/components/notification-setting-window.vue

@@ -9,18 +9,20 @@
 	@closed="$emit('closed')"
 >
 	<template #header>{{ $ts.notificationSetting }}</template>
-	<div v-if="showGlobalToggle" class="_root">
+	<div class="_monolithic_">
+		<div v-if="showGlobalToggle" class="_section">
 			<MkSwitch v-model:value="useGlobalSetting">
 				{{ $ts.useGlobalSetting }}
 				<template #desc>{{ $ts.useGlobalSettingDesc }}</template>
 			</MkSwitch>
 		</div>
-	<div v-if="!useGlobalSetting" class="_root">
+		<div v-if="!useGlobalSetting" class="_section">
 			<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
 			<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
 			<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
 			<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
 		</div>
+	</div>
 </XModalWindow>
 </template>
 

src/client/components/remote-caution.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq _panel"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq _block"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts">

src/client/components/signin.vue

@@ -1,6 +1,6 @@
 <template>
-<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _root">
+<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
+	<div class="auth _section">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
 			<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
@@ -38,7 +38,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="social _root">
+	<div class="social _section">
 		<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><Fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
 		<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><Fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
 		<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><Fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a>

src/client/components/signup-dialog.vue

@@ -7,9 +7,11 @@
 >
 	<template #header>{{ $ts.signup }}</template>
 
-	<div class="_root">
+	<div class="_monolithic_">
+		<div class="_section">
 			<XSignup :auto-set="autoSet" @signup="onSignup"/>
 		</div>
+	</div>
 </XModalWindow>
 </template>
 

src/client/components/ui/container.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="ukygtjoj _block _gap" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
+<div class="ukygtjoj _block" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
 	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">

src/client/components/ui/info.vue

@@ -53,4 +53,8 @@ export default defineComponent({
 		margin-right: 4px;
 	}
 }
+
+._flat_ .fpezltsf {
+	border-radius: 0;
+}
 </style>

src/client/pages/api-console.vue

@@ -1,6 +1,5 @@
 <template>
-<div>
-	<div class="_root">
+<div class="_root">
 	<div class="_block" style="padding: 24px;">
 		<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
 			<span>Endpoint</span>
@@ -16,14 +15,11 @@
 			<template v-else><Fa :icon="faPaperPlane"/> Send</template>
 		</MkButton>
 	</div>
-	</div>
-	<div class="_root" v-if="res">
-		<div class="_block" style="padding: 24px;">
+	<div v-if="res" class="_block" style="padding: 24px;">
 		<MkTextarea v-model:value="res" code readonly tall>
 			<span>Response</span>
 		</MkTextarea>
 	</div>
-	</div>
 </div>
 </template>
 

src/client/pages/messaging/index.vue

@@ -4,7 +4,7 @@
 
 	<div class="history" v-if="messages.length > 0">
 		<MkA v-for="(message, i) in messages"
-			class="message _block _gap"
+			class="message _block"
 			:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
 			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 			:data-index="i"

src/client/pages/timeline.vue

@@ -3,9 +3,9 @@
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 
 	<div class="_magnet"></div>
-	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _gap"/>
-	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _gap" fixed/>
-	<div class="tabs _block _gap">
+	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+	<div class="tabs _block">
 		<div class="left">
 			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
 			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>

src/client/pages/user/index.vue

@@ -98,12 +98,10 @@
 		<!-- <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="_magnet"></div>
-
 		<div class="profile">
-			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
+			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-			<div class="_gap _block main" :key="user.id">
+			<div class="_block main" :key="user.id">
 				<div class="banner-container" :style="style">
 					<div class="banner" ref="banner" :style="style"></div>
 					<div class="fade"></div>
@@ -198,7 +196,7 @@
 			<template v-if="page === 'index'">
 				<div>
 					<div v-if="user.pinnedNotes.length > 0">
-						<XNote v-for="note in user.pinnedNotes" class="note _block _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+						<XNote v-for="note in user.pinnedNotes" class="note _block" :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"/>
@@ -845,4 +843,16 @@ export default defineComponent({
 		}
 	}
 }
+
+._flat_ .ftskorzw.narrow {
+	> .profile {
+		> .warn {
+			margin: 0;
+		}
+
+		> .main {
+			margin-top: 0;
+		}
+	}
+}
 </style>

src/client/style.scss

@@ -246,9 +246,6 @@ hr {
 
 ._block {
 	@extend ._panel;
-}
-
-._gap {
 	margin: var(--margin) 0;
 }
 
@@ -256,7 +253,7 @@ hr {
 	margin-bottom: calc(var(--margin) * -1);
 }
 
-._isolated {
+._gap {
 	margin: var(--margin) 0;
 }
 
@@ -333,20 +330,21 @@ hr {
 	margin: var(--root-margin, 32px) auto;
 	max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
 
-	._hr {
-		margin: var(--margin) calc(var(--root-margin, 32px) * -1);
-		border-top: solid 0.5px var(--divider);
+	@media (max-width: 500px) {
+		--root-margin: 10px;
 	}
+}
+
+._monolithic_ {
+	._section {
+		box-sizing: border-box;
+		padding: var(--root-margin, 32px);
 	
 		@media (max-width: 500px) {
 			--root-margin: 10px;
 		}
 	
-	& + ._root:not(:empty) {
-		&:before {
-			content: "";
-			display: block;
-			margin: var(--root-margin) calc(var(--root-margin, 32px) * -1);
+		& + ._section:not(:empty) {
 			border-top: solid 0.5px var(--divider);
 		}
 	}

src/client/ui/_common_/header.vue

@@ -8,8 +8,8 @@
 			<div class="title">
 				<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
 				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
-				<span v-if="info.title" class="text">{{ info.title }}</span>
-				<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+				<span v-else-if="info.title" class="text">{{ info.title }}</span>
 			</div>
 		</div>
 		<div class="buttons">