chore(client): tweak ui
This commit is contained in:
		| @@ -12,19 +12,21 @@ | |||||||
| 			<XUsers origin="remote"/> | 			<XUsers origin="remote"/> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div v-else-if="tab === 'search'"> | 		<div v-else-if="tab === 'search'"> | ||||||
| 			<div class="_isolated"> | 			<MkSpacer :content-max="1200"> | ||||||
| 				<MkInput v-model="searchQuery" :debounce="true" type="search"> | 				<div> | ||||||
| 					<template #prefix><i class="fas fa-search"></i></template> | 					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock"> | ||||||
| 					<template #label>{{ $ts.searchUser }}</template> | 						<template #prefix><i class="fas fa-search"></i></template> | ||||||
| 				</MkInput> | 						<template #label>{{ $ts.searchUser }}</template> | ||||||
| 				<MkRadios v-model="searchOrigin"> | 					</MkInput> | ||||||
| 					<option value="combined">{{ $ts.all }}</option> | 					<MkRadios v-model="searchOrigin" class="_formBlock"> | ||||||
| 					<option value="local">{{ $ts.local }}</option> | 						<option value="combined">{{ $ts.all }}</option> | ||||||
| 					<option value="remote">{{ $ts.remote }}</option> | 						<option value="local">{{ $ts.local }}</option> | ||||||
| 				</MkRadios> | 						<option value="remote">{{ $ts.remote }}</option> | ||||||
| 			</div> | 					</MkRadios> | ||||||
|  | 				</div> | ||||||
|  |  | ||||||
| 			<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/> | 				<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/> | ||||||
|  | 			</MkSpacer> | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| </MkStickyContainer> | </MkStickyContainer> | ||||||
|   | |||||||
| @@ -1,41 +1,43 @@ | |||||||
| <template><MkStickyContainer> | <template> | ||||||
|  | <MkStickyContainer> | ||||||
| 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> | 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> | ||||||
| 		<MkSpacer :content-max="800"> | 	<MkSpacer :content-max="800"> | ||||||
| 	<div class="fcuexfpr"> | 		<div class="fcuexfpr"> | ||||||
| 		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> | 			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> | ||||||
| 			<div v-if="note" class="note"> | 				<div v-if="note" class="note"> | ||||||
| 				<div v-if="showNext" class="_gap"> | 					<div v-if="showNext" class="_gap"> | ||||||
| 					<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/> | 						<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/> | ||||||
| 				</div> |  | ||||||
|  |  | ||||||
| 				<div class="main _gap"> |  | ||||||
| 					<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton> |  | ||||||
| 					<div class="note _gap"> |  | ||||||
| 						<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri" class="_isolated"/> |  | ||||||
| 						<XNoteDetailed :key="note.id" v-model:note="note" class="_isolated note"/> |  | ||||||
| 					</div> | 					</div> | ||||||
| 					<div v-if="clips && clips.length > 0" class="_content clips _gap"> |  | ||||||
| 						<div class="title">{{ $ts.clip }}</div> |  | ||||||
| 						<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap"> |  | ||||||
| 							<b>{{ item.name }}</b> |  | ||||||
| 							<div v-if="item.description" class="description">{{ item.description }}</div> |  | ||||||
| 							<div class="user"> |  | ||||||
| 								<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/> |  | ||||||
| 							</div> |  | ||||||
| 						</MkA> |  | ||||||
| 					</div> |  | ||||||
| 					<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton> |  | ||||||
| 				</div> |  | ||||||
|  |  | ||||||
| 				<div v-if="showPrev" class="_gap"> | 					<div class="main _gap"> | ||||||
| 					<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/> | 						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton> | ||||||
|  | 						<div class="note _gap"> | ||||||
|  | 							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/> | ||||||
|  | 							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/> | ||||||
|  | 						</div> | ||||||
|  | 						<div v-if="clips && clips.length > 0" class="_content clips _gap"> | ||||||
|  | 							<div class="title">{{ $ts.clip }}</div> | ||||||
|  | 							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap"> | ||||||
|  | 								<b>{{ item.name }}</b> | ||||||
|  | 								<div v-if="item.description" class="description">{{ item.description }}</div> | ||||||
|  | 								<div class="user"> | ||||||
|  | 									<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/> | ||||||
|  | 								</div> | ||||||
|  | 							</MkA> | ||||||
|  | 						</div> | ||||||
|  | 						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton> | ||||||
|  | 					</div> | ||||||
|  |  | ||||||
|  | 					<div v-if="showPrev" class="_gap"> | ||||||
|  | 						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/> | ||||||
|  | 					</div> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 				<MkError v-else-if="error" @retry="fetch()"/> | ||||||
| 			<MkError v-else-if="error" @retry="fetch()"/> | 				<MkLoading v-else/> | ||||||
| 			<MkLoading v-else/> | 			</transition> | ||||||
| 		</transition> | 		</div> | ||||||
| 	</div> | 	</MkSpacer> | ||||||
| </MkSpacer></MkStickyContainer> | </MkStickyContainer> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo