chore(client): tweak client design
This commit is contained in:
		
							parent
							
								
									2a2020b797
								
							
						
					
					
						commit
						d1e151172b
					
				
					 3 changed files with 37 additions and 7 deletions
				
			
		|  | @ -62,7 +62,9 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }) | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
| 		> :global(.sub) { | 		> :global(.sub) { | ||||||
| 			font-size: 75%; | 			display: block; | ||||||
|  | 			width: 100%; | ||||||
|  | 			font-size: 80%; | ||||||
| 			opacity: 0.7; | 			opacity: 0.7; | ||||||
| 			line-height: $bodyInfoHieght; | 			line-height: $bodyInfoHieght; | ||||||
| 			white-space: nowrap; | 			white-space: nowrap; | ||||||
|  |  | ||||||
|  | @ -61,7 +61,9 @@ os.api('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).t | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
| 		> :global(.sub) { | 		> :global(.sub) { | ||||||
| 			font-size: 75%; | 			display: block; | ||||||
|  | 			width: 100%; | ||||||
|  | 			font-size: 95%; | ||||||
| 			opacity: 0.7; | 			opacity: 0.7; | ||||||
| 			line-height: $bodyInfoHieght; | 			line-height: $bodyInfoHieght; | ||||||
| 			white-space: nowrap; | 			white-space: nowrap; | ||||||
|  |  | ||||||
|  | @ -6,6 +6,10 @@ | ||||||
| 			<div v-if="tab === 'overview'" class="_formRoot"> | 			<div v-if="tab === 'overview'" class="_formRoot"> | ||||||
| 				<div class="_formBlock aeakzknw"> | 				<div class="_formBlock aeakzknw"> | ||||||
| 					<MkAvatar class="avatar" :user="user" :show-indicator="true"/> | 					<MkAvatar class="avatar" :user="user" :show-indicator="true"/> | ||||||
|  | 					<div class="body"> | ||||||
|  | 						<span class="name"><MkUserName class="name" :user="user"/></span> | ||||||
|  | 						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> | ||||||
|  | 					</div> | ||||||
| 				</div> | 				</div> | ||||||
| 
 | 
 | ||||||
| 				<div v-if="user.url" class="_formLinksGrid _formBlock"> | 				<div v-if="user.url" class="_formLinksGrid _formBlock"> | ||||||
|  | @ -17,11 +21,6 @@ | ||||||
| 				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink> | 				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink> | ||||||
| 
 | 
 | ||||||
| 				<div class="_formBlock"> | 				<div class="_formBlock"> | ||||||
| 					<MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;"> |  | ||||||
| 						<template #key>Acct</template> |  | ||||||
| 						<template #value><span class="_monospace">{{ acct(user) }}</span></template> |  | ||||||
| 					</MkKeyValue> |  | ||||||
| 
 |  | ||||||
| 					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;"> | 					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;"> | ||||||
| 						<template #key>ID</template> | 						<template #key>ID</template> | ||||||
| 						<template #value><span class="_monospace">{{ user.id }}</span></template> | 						<template #value><span class="_monospace">{{ user.id }}</span></template> | ||||||
|  | @ -264,10 +263,37 @@ definePageMetadata(computed(() => ({ | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| .aeakzknw { | .aeakzknw { | ||||||
|  | 	display: flex; | ||||||
|  | 	align-items: center; | ||||||
|  | 
 | ||||||
| 	> .avatar { | 	> .avatar { | ||||||
| 		display: block; | 		display: block; | ||||||
| 		width: 64px; | 		width: 64px; | ||||||
| 		height: 64px; | 		height: 64px; | ||||||
|  | 		margin-right: 16px; | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	> .body { | ||||||
|  | 		flex: 1; | ||||||
|  | 		overflow: hidden; | ||||||
|  | 
 | ||||||
|  | 		> .name { | ||||||
|  | 			display: block; | ||||||
|  | 			width: 100%; | ||||||
|  | 			white-space: nowrap; | ||||||
|  | 			overflow: hidden; | ||||||
|  | 			text-overflow: ellipsis; | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		> .sub { | ||||||
|  | 			display: block; | ||||||
|  | 			width: 100%; | ||||||
|  | 			font-size: 85%; | ||||||
|  | 			opacity: 0.7; | ||||||
|  | 			white-space: nowrap; | ||||||
|  | 			overflow: hidden; | ||||||
|  | 			text-overflow: ellipsis; | ||||||
|  | 		} | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue