Tweak UI
This commit is contained in:
		
							parent
							
								
									08e1db45a9
								
							
						
					
					
						commit
						c27c3817a9
					
				
					 2 changed files with 53 additions and 34 deletions
				
			
		|  | @ -1,6 +1,7 @@ | |||
| <template> | ||||
| <div class="fcuexfpr _root"> | ||||
| 	<div v-if="note" class="note" v-anim> | ||||
| 	<transition name="fade" mode="out-in"> | ||||
| 		<div v-if="note" class="note"> | ||||
| 			<div class="_gap" v-if="showNext"> | ||||
| 				<XNotes class="_content" :pagination="next" :no-gap="true"/> | ||||
| 			</div> | ||||
|  | @ -28,10 +29,9 @@ | |||
| 				<XNotes class="_content" :pagination="prev" :no-gap="true"/> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 
 | ||||
| 	<div v-if="error"> | ||||
| 		<MkError @retry="fetch()"/> | ||||
| 	</div> | ||||
| 		<MkError v-else-if="error" @retry="fetch()"/> | ||||
| 		<MkLoading v-else/> | ||||
| 	</transition> | ||||
| </div> | ||||
| </template> | ||||
| 
 | ||||
|  | @ -106,6 +106,7 @@ export default defineComponent({ | |||
| 	}, | ||||
| 	methods: { | ||||
| 		fetch() { | ||||
| 			this.note = null; | ||||
| 			os.api('notes/show', { | ||||
| 				noteId: this.noteId | ||||
| 			}).then(note => { | ||||
|  | @ -138,6 +139,15 @@ export default defineComponent({ | |||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .fade-enter-active, | ||||
| .fade-leave-active { | ||||
| 	transition: opacity 0.125s ease; | ||||
| } | ||||
| .fade-enter-from, | ||||
| .fade-leave-to { | ||||
| 	opacity: 0; | ||||
| } | ||||
| 
 | ||||
| .fcuexfpr { | ||||
| 	> .note { | ||||
| 		> .main { | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| <template> | ||||
| <div> | ||||
| 	<div class="ftskorzw wide _section" v-if="user && narrow === false"> | ||||
| <transition name="fade" mode="out-in"> | ||||
| 	<div class="ftskorzw wide" v-if="user && narrow === false"> | ||||
| 		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/> | ||||
| 
 | ||||
| 		<div class="banner-container _gap" :style="style"> | ||||
|  | @ -212,10 +212,9 @@ | |||
| 			<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 	<div v-else-if="error"> | ||||
| 		<MkError @retry="fetch()"/> | ||||
| 	</div> | ||||
| </div> | ||||
| 	<MkError v-else-if="error" @retry="fetch()"/> | ||||
| 	<MkLoading v-else/> | ||||
| </transition> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
|  | @ -324,6 +323,7 @@ export default defineComponent({ | |||
| 
 | ||||
| 		fetch() { | ||||
| 			if (this.acct == null) return; | ||||
| 			this.user = null; | ||||
| 			Progress.start(); | ||||
| 			os.api('users/show', parseAcct(this.acct)).then(user => { | ||||
| 				this.user = user; | ||||
|  | @ -369,6 +369,15 @@ export default defineComponent({ | |||
| </script> | ||||
| 
 | ||||
| <style lang="scss" scoped> | ||||
| .fade-enter-active, | ||||
| .fade-leave-active { | ||||
| 	transition: opacity 0.125s ease; | ||||
| } | ||||
| .fade-enter-from, | ||||
| .fade-leave-to { | ||||
| 	opacity: 0; | ||||
| } | ||||
| 
 | ||||
| .ftskorzw.wide { | ||||
| 	max-width: 1150px; | ||||
| 	margin: 0 auto; | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue