Tweak UI
This commit is contained in:
		
							parent
							
								
									e404e5e2de
								
							
						
					
					
						commit
						7fda726bbe
					
				
					 5 changed files with 15 additions and 8 deletions
				
			
		|  | @ -1,5 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <div class="mfcuwfyp _noGap_"> | <div class="mfcuwfyp _noGap_"> | ||||||
|  | 	<div class="_magnet"></div> | ||||||
| 	<XList class="notifications" :items="items" v-slot="{ item: notification }"> | 	<XList class="notifications" :items="items" v-slot="{ item: notification }"> | ||||||
| 		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/> | 		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/> | ||||||
| 		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/> | 		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/> | ||||||
|  |  | ||||||
|  | @ -101,6 +101,8 @@ export default defineComponent({ | ||||||
| 		z-index: 10; | 		z-index: 10; | ||||||
| 		position: sticky; | 		position: sticky; | ||||||
| 		top: var(--stickyTop, 0px); | 		top: var(--stickyTop, 0px); | ||||||
|  | 		background: var(--X17); | ||||||
|  | 		-webkit-backdrop-filter: blur(8px); | ||||||
| 		backdrop-filter: blur(20px); | 		backdrop-filter: blur(20px); | ||||||
| 
 | 
 | ||||||
| 		> .title { | 		> .title { | ||||||
|  | @ -138,6 +140,8 @@ export default defineComponent({ | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| ._flat_ .ssazuxis { | ._flat_ .ssazuxis { | ||||||
| 	margin: var(--margin); | 	> header { | ||||||
|  | 		padding: 0 16px; | ||||||
|  | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| <template> | <template> | ||||||
| <MkError v-if="error" @retry="init()"/> | <MkError v-if="error" @retry="init()"/> | ||||||
| 
 | 
 | ||||||
| <div v-else class="efvhhmdq"> | <div v-else class="efvhhmdq _isolated"> | ||||||
| 	<div class="no-users" v-if="empty"> | 	<div class="no-users" v-if="empty"> | ||||||
| 		<p>{{ $ts.noUsers }}</p> | 		<p>{{ $ts.noUsers }}</p> | ||||||
| 	</div> | 	</div> | ||||||
|  |  | ||||||
|  | @ -1,11 +1,13 @@ | ||||||
| <template> | <template> | ||||||
| <div class="lznhrdub _root"> | <div class="lznhrdub _root"> | ||||||
| 	<div class="_section"> | 	<div> | ||||||
| 		<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput> | 		<div class="_isolated"> | ||||||
|  | 			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput> | ||||||
|  | 		</div> | ||||||
| 
 | 
 | ||||||
| 		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/> | 		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/> | ||||||
| 
 | 
 | ||||||
| 		<div class="localfedi7 _panel _gap" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"> | 		<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"> | ||||||
| 			<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header> | 			<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header> | ||||||
| 			<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div> | 			<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div> | ||||||
| 		</div> | 		</div> | ||||||
|  | @ -29,8 +31,8 @@ | ||||||
| 			</MkFolder> | 			</MkFolder> | ||||||
| 		</template> | 		</template> | ||||||
| 	</div> | 	</div> | ||||||
| 	<div class="_section"> | 	<div> | ||||||
| 		<div class="localfedi7 _panel _gap" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }"> | 		<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }"> | ||||||
| 			<header><span>{{ $ts.exploreFediverse }}</span></header> | 			<header><span>{{ $ts.exploreFediverse }}</span></header> | ||||||
| 		</div> | 		</div> | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -3,7 +3,7 @@ | ||||||
| 	<template #header><Fa :icon="faBell"/>{{ $ts.notifications }}</template> | 	<template #header><Fa :icon="faBell"/>{{ $ts.notifications }}</template> | ||||||
| 	<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template> | 	<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template> | ||||||
| 
 | 
 | ||||||
| 	<div> | 	<div class="_flat_"> | ||||||
| 		<XNotifications :include-types="props.includingTypes"/> | 		<XNotifications :include-types="props.includingTypes"/> | ||||||
| 	</div> | 	</div> | ||||||
| </MkContainer> | </MkContainer> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue