diff --git a/src/client/components/error.vue b/src/client/components/error.vue index f4698247b2..7446a7cb5d 100644 --- a/src/client/components/error.vue +++ b/src/client/components/error.vue @@ -27,8 +27,6 @@ export default Vue.extend({ <style lang="scss" scoped> .mjndxjcg { - max-width: 350px; - margin: 0 auto; padding: 32px; text-align: center; diff --git a/src/client/components/index.ts b/src/client/components/index.ts index 9e95fba873..87547599a9 100644 --- a/src/client/components/index.ts +++ b/src/client/components/index.ts @@ -9,7 +9,6 @@ import ellipsis from './ellipsis.vue'; import time from './time.vue'; import url from './url.vue'; import loading from './loading.vue'; -import SequentialEntrance from './sequential-entrance.vue'; import error from './error.vue'; import streamIndicator from './stream-indicator.vue'; @@ -23,5 +22,4 @@ Vue.component('mk-time', time); Vue.component('mk-url', url); Vue.component('mk-loading', loading); Vue.component('mk-error', error); -Vue.component('sequential-entrance', SequentialEntrance); Vue.component('stream-indicator', streamIndicator); diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue index 6fee809c40..74e9a29ccf 100644 --- a/src/client/components/menu.vue +++ b/src/client/components/menu.vue @@ -1,6 +1,6 @@ <template> <x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap"> - <sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction" ref="items"> + <div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items"> <template v-for="(item, i) in items.filter(item => item !== undefined)"> <div v-if="item === null" class="divider" :key="i"></div> <span v-else-if="item.type === 'label'" class="label item" :key="i"> @@ -28,7 +28,7 @@ <i v-if="item.indicate"><fa :icon="faCircle"/></i> </button> </template> - </sequential-entrance> + </div> </x-popup> </template> @@ -91,7 +91,7 @@ export default Vue.extend({ mounted() { if (this.viaKeyboard) { this.$nextTick(() => { - focusNext(this.$refs.items.$slots.default[0].elm, true); + focusNext(this.$refs.items.children[0], true); }); } }, diff --git a/src/client/components/sequential-entrance.vue b/src/client/components/sequential-entrance.vue deleted file mode 100644 index 50113cff1c..0000000000 --- a/src/client/components/sequential-entrance.vue +++ /dev/null @@ -1,40 +0,0 @@ -<template> -<transition-group v-if="$store.state.device.animation" - class="uupnnhew" - name="staggered" - tag="div" - appear -> - <slot></slot> -</transition-group> -<div v-else> - <slot></slot> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - methods: { - focus() { - this.$slots.default[0].elm.focus(); - } - }, -}); -</script> - -<style lang="scss"> -.uupnnhew { - > .staggered-enter { - opacity: 0; - transform: translateY(-64px); - } - - @for $i from 1 through 30 { - > .staggered-enter-active:nth-child(#{$i}) { - transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)); - } - } -} -</style> diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue index 7f04b35de1..e888b7420c 100644 --- a/src/client/components/ui/pagination.vue +++ b/src/client/components/ui/pagination.vue @@ -1,5 +1,5 @@ <template> -<sequential-entrance class="cxiknjgy" :class="{ autoMargin }"> +<div class="cxiknjgy" :class="{ autoMargin }"> <slot :items="items"></slot> <div class="empty" v-if="empty" key="_empty_"> <slot name="empty"></slot> @@ -10,7 +10,7 @@ <template v-if="moreFetching"><mk-loading inline/></template> </mk-button> </div> -</sequential-entrance> +</div> </template> <script lang="ts"> diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue index a70b3c2d13..9d0c5e4251 100644 --- a/src/client/components/users-dialog.vue +++ b/src/client/components/users-dialog.vue @@ -6,15 +6,15 @@ <button class="_button" @click="close()"><fa :icon="faTimes"/></button> </div> - <sequential-entrance class="users"> - <router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage"> + <div class="users"> + <router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage"> <mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/> <div class="body"> <mk-user-name :user="extract ? extract(item) : item" class="name"/> <mk-acct :user="extract ? extract(item) : item" class="acct"/> </div> </router-link> - </sequential-entrance> + </div> <button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching"> <template v-if="!moreFetching">{{ $t('loadMore') }}</template> diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue index 28413fd837..dc7b41e286 100644 --- a/src/client/components/visibility-chooser.vue +++ b/src/client/components/visibility-chooser.vue @@ -1,6 +1,6 @@ <template> <x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }"> - <sequential-entrance class="gqyayizv" :delay="30"> + <div class="gqyayizv"> <button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public"> <div><fa :icon="faGlobe"/></div> <div> @@ -29,7 +29,7 @@ <span>{{ $t('_visibility.specifiedDescription') }}</span> </div> </button> - </sequential-entrance> + </div> </x-popup> </template> diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue index 710f4ec099..7f0fc7d2bc 100644 --- a/src/client/pages/instance/queue.queue.vue +++ b/src/client/pages/instance/queue.queue.vue @@ -11,12 +11,12 @@ <canvas ref="chart"></canvas> </div> <div class="_content" style="max-height: 180px; overflow: auto;"> - <sequential-entrance :delay="15" v-if="jobs.length > 0"> - <div v-for="(job, i) in jobs" :key="job[0]"> + <div v-if="jobs.length > 0"> + <div v-for="job in jobs" :key="job[0]"> <span>{{ job[0] }}</span> <span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span> </div> - </sequential-entrance> + </div> <span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span> </div> </section> diff --git a/src/client/pages/messaging.vue b/src/client/pages/messaging.vue index bc85e7a56b..2179115dea 100644 --- a/src/client/pages/messaging.vue +++ b/src/client/pages/messaging.vue @@ -5,7 +5,7 @@ <mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button> - <sequential-entrance class="history" v-if="messages.length > 0" :delay="30"> + <div class="history" v-if="messages.length > 0"> <router-link v-for="(message, i) in messages" class="message _panel" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" @@ -30,7 +30,7 @@ </div> </div> </router-link> - </sequential-entrance> + </div> <div class="no-history" v-if="!fetching && messages.length == 0"> <img src="https://xn--931a.moe/assets/info.png" class="_ghost"/> <div>{{ $t('noHistory') }}</div> diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue index f7fabd1786..f7a51c1fbc 100644 --- a/src/client/pages/user/index.vue +++ b/src/client/pages/user/index.vue @@ -80,9 +80,9 @@ </div> <router-view :user="user"></router-view> <template v-if="$route.name == 'user'"> - <sequential-entrance class="pins"> - <x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/> - </sequential-entrance> + <div class="pins"> + <x-note v-for="note in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/> + </div> <mk-container :body-togglable="true" class="content"> <template #header><fa :icon="faImage"/>{{ $t('images') }}</template> <div> diff --git a/src/client/style.scss b/src/client/style.scss index b698f2c04f..da0c20d990 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -3,7 +3,7 @@ :root { --radius: 8px; --marginFull: 16px; - --marginHalf: 8px; + --marginHalf: 10px; --margin: var(--marginFull);