_section --> _card
This commit is contained in:
		
							parent
							
								
									fb9fed545e
								
							
						
					
					
						commit
						24c047b662
					
				|  | @ -3,7 +3,7 @@ | |||
| 	<portal to="icon"><fa :icon="faInfoCircle"/></portal> | ||||
| 	<portal to="title">{{ $t('about') }}</portal> | ||||
| 
 | ||||
| 	<section class="_section info" v-if="meta"> | ||||
| 	<section class="_card info" v-if="meta"> | ||||
| 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div> | ||||
| 		<div class="_content" v-if="meta.description"> | ||||
| 			<div>{{ meta.description }}</div> | ||||
|  | @ -21,7 +21,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section aboutMisskey"> | ||||
| 	<section class="_card aboutMisskey"> | ||||
| 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('aboutMisskey') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div> | ||||
|  |  | |||
|  | @ -4,7 +4,7 @@ | |||
| 	<portal to="title">{{ $t('announcements') }}</portal> | ||||
| 
 | ||||
| 	<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list"> | ||||
| 		<section class="_section announcement" v-for="(announcement, i) in items" :key="announcement.id" :data-index="i"> | ||||
| 		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id" :data-index="i"> | ||||
| 			<div class="_title"><span v-if="$store.getters.isSignedIn && !announcement.isRead">🆕 </span>{{ announcement.title }}</div> | ||||
| 			<div class="_content"> | ||||
| 				<mfm :text="announcement.text"/> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="_section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<h2>{{ app.name }}</h2> | ||||
|  |  | |||
|  | @ -3,7 +3,7 @@ | |||
| 	<portal to="icon"><fa :icon="faBroadcastTower"/></portal> | ||||
| 	<portal to="title">{{ $t('announcements') }}</portal> | ||||
| 	<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button> | ||||
| 	<section class="_section announcements"> | ||||
| 	<section class="_card announcements"> | ||||
| 		<div class="_content announcement" v-for="announcement in announcements"> | ||||
| 			<mk-input v-model="announcement.title" style="margin-top: 8px;"> | ||||
| 				<span>{{ $t('title') }}</span> | ||||
|  |  | |||
|  | @ -2,7 +2,7 @@ | |||
| <div class="mk-instance-emojis"> | ||||
| 	<portal to="icon"><fa :icon="faLaugh"/></portal> | ||||
| 	<portal to="title">{{ $t('customEmojis') }}</portal> | ||||
| 	<section class="_section local"> | ||||
| 	<section class="_card local"> | ||||
| 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<input ref="file" type="file" style="display: none;" @change="onChangeFile"/> | ||||
|  | @ -23,7 +23,7 @@ | |||
| 			<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button> | ||||
| 		</div> | ||||
| 	</section> | ||||
| 	<section class="_section remote"> | ||||
| 	<section class="_card remote"> | ||||
| 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-input v-model="host" :debounce="true" style="margin-top: 0;"><span>{{ $t('host') }}</span></mk-input> | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| <template> | ||||
| <div class="mk-federation"> | ||||
| 	<section class="_section instances"> | ||||
| 	<section class="_card instances"> | ||||
| 		<div class="_title"><fa :icon="faGlobe"/> {{ $t('instances') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<div class="inputs" style="display: flex;"> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="_section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faCloud"/> {{ $t('files') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-button primary @click="clear()"><fa :icon="faTrashAlt"/> {{ $t('clearCachedFiles') }}</mk-button> | ||||
|  |  | |||
|  | @ -3,7 +3,7 @@ | |||
| 	<portal to="icon"><fa :icon="faServer"/></portal> | ||||
| 	<portal to="title">{{ $t('instance') }}</portal> | ||||
| 
 | ||||
| 	<section class="_section info"> | ||||
| 	<section class="_card info"> | ||||
| 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-input v-model="name" style="margin-top: 8px;">{{ $t('instanceName') }}</mk-input> | ||||
|  | @ -19,7 +19,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section info"> | ||||
| 	<section class="_card info"> | ||||
| 		<div class="_content"> | ||||
| 			<mk-switch v-model="enableLocalTimeline" @change="save()">{{ $t('enableLocalTimeline') }}</mk-switch> | ||||
| 			<mk-switch v-model="enableGlobalTimeline" @change="save()">{{ $t('enableGlobalTimeline') }}</mk-switch> | ||||
|  | @ -27,7 +27,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section info"> | ||||
| 	<section class="_card info"> | ||||
| 		<div class="_title"><fa :icon="faUser"/> {{ $t('registration') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-switch v-model="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch> | ||||
|  | @ -35,7 +35,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-switch v-model="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch> | ||||
|  | @ -55,7 +55,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faBolt"/> {{ $t('serviceworker') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-switch v-model="enableServiceWorker">{{ $t('enableServiceworker') }}<template #desc>{{ $t('serviceworker-info') }}</template></mk-switch> | ||||
|  | @ -72,7 +72,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-textarea v-model="pinnedUsers" style="margin-top: 0;"> | ||||
|  | @ -84,7 +84,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faCloud"/> {{ $t('files') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-switch v-model="cacheRemoteFiles">{{ $t('cacheRemoteFiles') }}<template #desc>{{ $t('cacheRemoteFilesDescription') }}</template></mk-switch> | ||||
|  | @ -97,7 +97,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faGhost"/> {{ $t('proxyAccount') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-input v-model="proxyAccount" style="margin: 0;"><template #prefix>@</template>{{ $t('proxyAccount') }}<template #desc>{{ $t('proxyAccountDescription') }}</template></mk-input> | ||||
|  | @ -107,7 +107,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faBan"/> {{ $t('blockedInstances') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-textarea v-model="blockedHosts" style="margin-top: 0;"> | ||||
|  | @ -119,7 +119,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<header><fa :icon="faTwitter"/> {{ $t('twitter-integration-config') }}</header> | ||||
|  | @ -153,7 +153,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section info"> | ||||
| 	<section class="_card info"> | ||||
| 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div> | ||||
| 		<div class="_content table" v-if="stats"> | ||||
| 			<div><b>{{ $t('users') }}</b><span>{{ stats.originalUsersCount | number }}</span></div> | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| <template> | ||||
| <div class="mk-instance-monitor"> | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faMicrochip"/> {{ $t('cpuAndMemory') }}</div> | ||||
| 		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;"> | ||||
| 			<canvas ref="cpumem"></canvas> | ||||
|  | @ -18,7 +18,7 @@ | |||
| 			</div> | ||||
| 		</div> | ||||
| 	</section> | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faHdd"/> {{ $t('disk') }}</div> | ||||
| 		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;"> | ||||
| 			<canvas ref="disk"></canvas> | ||||
|  | @ -33,7 +33,7 @@ | |||
| 			</div> | ||||
| 		</div> | ||||
| 	</section> | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faExchangeAlt"/> {{ $t('network') }}</div> | ||||
| 		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;"> | ||||
| 			<canvas ref="net"></canvas> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="_section mk-queue-queue"> | ||||
| <section class="_card mk-queue-queue"> | ||||
| 	<div class="_title"><slot name="title"></slot></div> | ||||
| 	<div class="_content status"> | ||||
| 		<div class="cell"><div class="label">Process</div>{{ activeSincePrevTick | number }}</div> | ||||
|  |  | |||
|  | @ -6,7 +6,7 @@ | |||
| 	<x-queue :connection="connection" domain="deliver"> | ||||
| 		<template #title><fa :icon="faExchangeAlt"/> Out</template> | ||||
| 	</x-queue> | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_content"> | ||||
| 			<mk-button @click="clear()"><fa :icon="faTrashAlt"/> {{ $t('clearQueue') }}</mk-button> | ||||
| 		</div> | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| <template> | ||||
| <div class="mk-instance-stats"> | ||||
| 	<section class="_section"> | ||||
| 	<section class="_card"> | ||||
| 		<div class="_title"><fa :icon="faChartBar"/> {{ $t('statistics') }}</div> | ||||
| 		<div class="_content" style="margin-top: -8px; margin-bottom: -12px;"> | ||||
| 			<div class="selects" style="display: flex;"> | ||||
|  |  | |||
|  | @ -3,7 +3,7 @@ | |||
| 	<portal to="icon"><fa :icon="faUsers"/></portal> | ||||
| 	<portal to="title">{{ $t('users') }}</portal> | ||||
| 
 | ||||
| 	<section class="_section lookup"> | ||||
| 	<section class="_card lookup"> | ||||
| 		<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<mk-input class="target" v-model="target" type="text" @enter="showUser()" style="margin-top: 0;"> | ||||
|  | @ -16,7 +16,7 @@ | |||
| 		</div> | ||||
| 	</section> | ||||
| 
 | ||||
| 	<section class="_section users"> | ||||
| 	<section class="_card users"> | ||||
| 		<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div> | ||||
| 		<div class="_content _list"> | ||||
| 			<mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false"> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <div class="shaynizk _section"> | ||||
| <div class="shaynizk _card"> | ||||
| 	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div> | ||||
| 	<div class="_content body"> | ||||
| 		<mk-input v-model="name" style="margin-top: 8px;"> | ||||
|  |  | |||
|  | @ -1,7 +1,7 @@ | |||
| <template> | ||||
| <div class="mk-list-page"> | ||||
| 	<transition name="zoom" mode="out-in"> | ||||
| 		<div v-if="list" :key="list.id" class="_section list"> | ||||
| 		<div v-if="list" :key="list.id" class="_card list"> | ||||
| 			<div class="_title">{{ list.name }}</div> | ||||
| 			<div class="_content"> | ||||
| 				<div class="users"> | ||||
|  |  | |||
|  | @ -3,7 +3,7 @@ | |||
| 	<portal to="avatar" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/></portal> | ||||
| 	<portal to="title" v-if="page">{{ page.title || page.name }}</portal> | ||||
| 
 | ||||
| 	<div class="_section" v-if="page" :key="page.id"> | ||||
| 	<div class="_card" v-if="page" :key="page.id"> | ||||
| 		<div class="_title">{{ page.title }}</div> | ||||
| 		<div class="_content"> | ||||
| 			<x-page :page="page"/> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="_section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faLock"/> {{ $t('twoStepAuthentication') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<p v-if="!data && !$store.state.i.twoFactorEnabled"><mk-button @click="register">{{ $t('_2fa.registerDevice') }}</mk-button></p> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-drive _section"> | ||||
| <section class="uawsfosz _card"> | ||||
| 	<div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive"> | ||||
|  | @ -110,7 +110,7 @@ export default Vue.extend({ | |||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .mk-settings-page-drive { | ||||
| .uawsfosz { | ||||
| 	> ._content { | ||||
| 		max-height: 350px; | ||||
| 		overflow: auto; | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-general _section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-input type="file" @change="onWallpaperChange" style="margin-top: 0;"> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-import-export _section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faBoxes"/> {{ $t('importAndExport') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<input ref="file" type="file" style="display: none;" @change="onChangeFile"/> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="_section" v-if="enableTwitterIntegration || enableDiscordIntegration || enableGithubIntegration"> | ||||
| <section class="_card" v-if="enableTwitterIntegration || enableDiscordIntegration || enableGithubIntegration"> | ||||
| 	<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div> | ||||
| 	<div class="_content" v-if="enableTwitterIntegration"> | ||||
| 		<header><fa :icon="faTwitter"/> Twitter</header> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-mute-block _section"> | ||||
| <section class="rrfwjxfl _card"> | ||||
| 	<div class="_title"><fa :icon="faBan"/> {{ $t('muteAndBlock') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<span>{{ $t('mutedUsers') }}</span> | ||||
|  | @ -60,7 +60,7 @@ export default Vue.extend({ | |||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .mk-settings-page-mute-block { | ||||
| .rrfwjxfl { | ||||
| 	> ._content { | ||||
| 		max-height: 350px; | ||||
| 		overflow: auto; | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-privacy _section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faLock"/> {{ $t('privacy') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-switch v-model="isLocked" @change="save()">{{ $t('makeFollowManuallyApprove') }}</mk-switch> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="llvierxe _section"> | ||||
| <section class="llvierxe _card"> | ||||
| 	<div class="_title"><fa :icon="faUser"/> {{ $t('profile') }}<small style="display: block; font-weight: normal; opacity: 0.6;">@{{ $store.state.i.username }}@{{ host }}</small></div> | ||||
| 	<div class="_content"> | ||||
| 		<div class="header" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }" @click="changeBanner"> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-reaction _section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-textarea v-model="reactions" style="margin-top: 16px;">{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template></mk-textarea> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="_section"> | ||||
| <section class="_card"> | ||||
| 	<div class="_title"><fa :icon="faLock"/> {{ $t('password') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-button primary @click="change()">{{ $t('changePassword') }}</mk-button> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <template> | ||||
| <section class="mk-settings-page-theme _section"> | ||||
| <section class="rfqxtzch _card"> | ||||
| 	<div class="_title"><fa :icon="faPalette"/> {{ $t('theme') }}</div> | ||||
| 	<div class="_content"> | ||||
| 		<mk-select v-model="theme" :placeholder="$t('theme')"> | ||||
|  |  | |||
|  | @ -234,10 +234,10 @@ a { | |||
| 	border-radius: var(--radius); | ||||
| } | ||||
| 
 | ||||
| ._section { | ||||
| ._card { | ||||
| 	@extend ._panel; | ||||
| 
 | ||||
| 	& + ._section { | ||||
| 	& + ._card { | ||||
| 		margin-top: var(--margin); | ||||
| 	} | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue