refactor clinet

src/client/components/modal-page-window.vue

@@ -10,7 +10,7 @@
 			</span>
 			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
-		<div class="body _fitSide_">
+		<div class="body">
 			<keep-alive>
 				<component :is="component" v-bind="props" :ref="changePage"/>
 			</keep-alive>

src/client/components/page-window.vue

@@ -16,7 +16,7 @@
 	<template #headerLeft>
 		<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
 	</template>
-	<div class="yrolvcoq _fitSide_">
+	<div class="yrolvcoq">
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>

src/client/components/ui/folder.vue

@@ -153,10 +153,4 @@ export default defineComponent({
 		}
 	}
 }
-
-._fitSide_ .ssazuxis {
-	> header {
-		padding: 0 16px;
-	}
-}
 </style>

src/client/components/ui/info.vue

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

src/client/pages/admin/index.vue

@@ -343,7 +343,6 @@ export default defineComponent({
 		> .main {
 			flex: 1;
 			min-width: 0;
-			--baseContentWidth: 100%;
 		}
 	}
 

src/client/pages/messaging/index.vue

@@ -2,7 +2,8 @@
 <div>
 	<MkHeader :info="header"/>
 
-	<div class="yweeujhr _root" v-size="{ max: [400] }">
+	<MkSpacer :content-max="800">
+		<div class="yweeujhr" v-size="{ max: [400] }">
 			<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 			<div class="history" v-if="messages.length > 0">
@@ -37,6 +38,7 @@
 			</div>
 			<MkLoading v-if="fetching"/>
 		</div>
+	</MkSpacer>
 </div>
 </template>
 
@@ -177,7 +179,7 @@ export default defineComponent({
 .yweeujhr {
 
 	> .start {
-		margin: var(--margin) auto var(--margin) auto;
+		margin: 0 auto var(--margin) auto;
 	}
 
 	> .history {

src/client/pages/note.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="fcuexfpr">
+<MkSpacer :content-max="800">
-	<div class="_root">
+	<div class="fcuexfpr">
 		<transition name="fade" mode="out-in">
 			<div v-if="note" class="note">
 				<div class="_gap" v-if="showNext">
@@ -34,7 +34,7 @@
 			<MkLoading v-else/>
 		</transition>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -153,7 +153,6 @@ export default defineComponent({
 .fcuexfpr {
 	background: var(--bg);
 
-	> ._root {
 	> .note {
 		> .main {
 			> .load {
@@ -206,6 +205,5 @@ export default defineComponent({
 			}
 		}
 	}
-	}
 }
 </style>

src/client/pages/settings/index.vue

@@ -311,7 +311,6 @@ export default defineComponent({
 			flex: 1;
 			min-width: 0;
 			overflow: auto;
-			--baseContentWidth: 100%;
 		}
 	}
 }

src/client/pages/user/index.timeline.vue

@@ -65,11 +65,4 @@ export default defineComponent({
 		background: var(--bg);
 	}
 }
-
-._fitSide_ .yrzkoczt {
-	> .tab {
-		padding-left: var(--margin);
-		padding-right: var(--margin);
-	}
-}
 </style>

src/client/pages/user/index.vue

@@ -81,7 +81,8 @@
 				</div>
 			</div>
 		</div>
-		<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
+		<MkSpacer v-else-if="user && narrow === true" :content-max="800">
+			<div class="ftskorzw narrow" v-size="{ max: [500] }">
 				<!-- TODO -->
 				<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
 				<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
@@ -187,6 +188,7 @@
 					<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
 				</div>
 			</div>
+		</MkSpacer>
 		<MkError v-else-if="error" @retry="fetch()"/>
 		<MkLoading v-else/>
 	</transition>
@@ -833,16 +835,4 @@ export default defineComponent({
 		}
 	}
 }
-
-._fitSide_ .ftskorzw.narrow {
-	> .profile {
-		> .warn {
-			margin: 0;
-		}
-
-		> .main {
-			margin-top: 0;
-		}
-	}
-}
 </style>

src/client/style.scss

@@ -1,7 +1,6 @@
 @charset "utf-8";
 
 :root {
-	--baseContentWidth: 760px;
 	--radius: 12px;
 	--marginFull: 16px;
 	--marginHalf: 10px;
@@ -349,22 +348,6 @@ hr {
 	contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
 }
 
-// TODO: 廃止
-._root {
-	box-sizing: border-box;
-	margin: var(--root-margin, 32px) auto;
-	max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
-
-	// 子marginが突き抜けるのを防ぐため
-	// https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element
-	padding-top: 1px;
-	margin-top: calc(var(--root-margin, 32px) - 1px);
-
-	@media (max-width: 500px) {
-		--root-margin: 10px;
-	}
-}
-
 ._monolithic_ {
 	._section:not(:empty) {
 		box-sizing: border-box;
@@ -380,33 +363,6 @@ hr {
 	}
 }
 
-._fitSide_ {
-	--root-margin: 0px;
-	--baseContentWidth: 100%;
-	--panelBorder: none;
-
-	._block {
-		//border-top: solid 0.5px var(--divider);
-		//border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-shadow: none;
-	}
-
-	._isolated {
-		margin: var(--margin);
-	}
-
-	._block._isolated {
-		border-radius: var(--radius);
-	}
-
-	@media (max-width: 500px) {
-		._root {
-			--root-margin: 0px;
-		}
-	}
-}
-
 ._narrow_ ._card {
 	> ._title {
 		padding: 16px;

src/client/ui/chat/side.vue

@@ -3,7 +3,7 @@
 	<header class="header" @contextmenu.prevent.stop="onContextmenu">
 		<MkHeader class="title" :info="pageInfo" :center="false"/>
 	</header>
-	<component :is="component" v-bind="props" :ref="changePage" class="body _fitSide_"/>
+	<component :is="component" v-bind="props" :ref="changePage" class="body"/>
 </div>
 </template>
 

src/client/ui/deck/main-column.vue

@@ -7,7 +7,7 @@
 		</template>
 	</template>
 
-	<router-view v-slot="{ Component }" class="_fitSide_">
+	<router-view v-slot="{ Component }">
 		<transition>
 			<keep-alive :include="['timeline']">
 				<component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/>

src/client/ui/default.vue

@@ -13,7 +13,7 @@
 		</template>
 
 		<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<div class="content" :class="{ _fitSide_: !fullView }">
+			<div class="content">
 				<router-view v-slot="{ Component }">
 					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
 						<keep-alive :include="['timeline']">

src/client/widgets/notifications.vue

@@ -3,7 +3,7 @@
 	<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
 	<template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
 
-	<div class="_fitSide_">
+	<div>
 		<XNotifications :include-types="props.includingTypes"/>
 	</div>
 </MkContainer>