amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak UI

Browse Source
This commit is contained in:
syuilo 2021-04-17 11:40:47 +09:00
parent 08e1db45a9
commit c27c3817a9
2 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/client/pages/note.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="fcuexfpr _root"> <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"> <div class="_gap" v-if="showNext">
<XNotes class="_content" :pagination="next" :no-gap="true"/> <XNotes class="_content" :pagination="next" :no-gap="true"/>
</div> </div>
@ -28,10 +29,9 @@
<XNotes class="_content" :pagination="prev" :no-gap="true"/> <XNotes class="_content" :pagination="prev" :no-gap="true"/>
</div> </div>
</div> </div>
<MkError v-else-if="error" @retry="fetch()"/>
<div v-if="error"> <MkLoading v-else/>
<MkError @retry="fetch()"/> </transition>
</div>
</div> </div>
</template> </template>
@ -106,6 +106,7 @@ export default defineComponent({
}, },
methods: { methods: {
fetch() { fetch() {
this.note = null;
os.api('notes/show', { os.api('notes/show', {
noteId: this.noteId noteId: this.noteId
}).then(note => { }).then(note => {
@ -138,6 +139,15 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fcuexfpr { .fcuexfpr {
> .note { > .note {
> .main { > .main {

21
src/client/pages/user/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <transition name="fade" mode="out-in">
<div class="ftskorzw wide _section" v-if="user && narrow === false"> <div class="ftskorzw wide" v-if="user && narrow === false">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/> <MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
<div class="banner-container _gap" :style="style"> <div class="banner-container _gap" :style="style">
@ -212,10 +212,9 @@
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/> <XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
</div> </div>
</div> </div>
<div v-else-if="error"> <MkError v-else-if="error" @retry="fetch()"/>
<MkError @retry="fetch()"/> <MkLoading v-else/>
</div> </transition>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -324,6 +323,7 @@ export default defineComponent({
fetch() { fetch() {
if (this.acct == null) return; if (this.acct == null) return;
this.user = null;
Progress.start(); Progress.start();
os.api('users/show', parseAcct(this.acct)).then(user => { os.api('users/show', parseAcct(this.acct)).then(user => {
this.user = user; this.user = user;
@ -369,6 +369,15 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <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 { .ftskorzw.wide {
max-width: 1150px; max-width: 1150px;
margin: 0 auto; margin: 0 auto;