diff --git a/package.json b/package.json
index c6f5bbeb3..30ad8489d 100644
--- a/package.json
+++ b/package.json
@@ -225,6 +225,7 @@
"vue-loader": "15.4.2",
"vue-marquee-text-component": "1.1.0",
"vue-router": "3.0.2",
+ "vue-sequential-entrance": "1.1.3",
"vue-style-loader": "4.1.2",
"vue-svg-inline-loader": "1.2.4",
"vue-template-compiler": "2.5.17",
diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue
index 2872155b6..c3a3a4064 100644
--- a/src/client/app/admin/views/drive.vue
+++ b/src/client/app/admin/views/drive.vue
@@ -18,29 +18,31 @@
-
-
-
-
-
- {{ file.name }}
- @{{ file.user | acct }}
-
+
+
+
+
+
+ {{ file.name }}
+ @{{ file.user | acct }}
+
-
{{ file.type }}
-
{{ file.datasize | bytes }}
+
+ {{ file.type }}
+ {{ file.datasize | bytes }}
+
+
-
+
+ {{ $t('delete') }}
+
-
- {{ $t('delete') }}
-
-
+
{{ $t('@.load-more') }}
diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue
index b0821c245..21d41efba 100644
--- a/src/client/app/admin/views/users.vue
+++ b/src/client/app/admin/views/users.vue
@@ -38,25 +38,27 @@
-
-
-
-
+
+
-
{{ $t('users.updatedAt') }}:
+
+
+
-
{{ $t('users.createdAt') }}:
+
+
+ {{ $t('users.updatedAt') }}:
+
+
+ {{ $t('users.createdAt') }}:
+
-
+
{{ $t('@.load-more') }}
diff --git a/src/client/app/animation.styl b/src/client/app/animation.styl
index 8f121b313..a62916520 100644
--- a/src/client/app/animation.styl
+++ b/src/client/app/animation.styl
@@ -10,3 +10,19 @@
opacity: 0;
transform: scaleY(0);
}
+
+.entranceFromTop {
+ animation-duration: 0.5s;
+ animation-name: entranceFromTop;
+}
+
+@keyframes entranceFromTop {
+ from {
+ opacity: 0;
+ transform: translateY(-64px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/src/client/app/desktop/views/pages/favorites.vue b/src/client/app/desktop/views/pages/favorites.vue
index e7e02c848..066ce3f53 100644
--- a/src/client/app/desktop/views/pages/favorites.vue
+++ b/src/client/app/desktop/views/pages/favorites.vue
@@ -1,9 +1,11 @@
-
-
-
+
+
+
+
+
{{ $t('@.load-more') }}
@@ -75,7 +77,7 @@ main
padding 16px
max-width 700px
- > .post
+ > * > .post
margin-bottom 16px
> .more
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 183ed90ed..d7dd1efed 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
import VAnimateCss from 'v-animate-css';
import VModal from 'vue-js-modal';
import VueI18n from 'vue-i18n';
+import SequentialEntrance from 'vue-sequential-entrance';
import VueHotkey from './common/hotkey';
import App from './app.vue';
@@ -287,6 +288,7 @@ Vue.use(VAnimateCss);
Vue.use(VModal);
Vue.use(VueHotkey);
Vue.use(VueI18n);
+Vue.use(SequentialEntrance);
Vue.component('fa', FontAwesomeIcon);
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 6ca584ec8..61dd1526b 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -3,9 +3,11 @@
{{ $t('title') }}
-
-
-
+
+
+
+
+
{{ $t('@.load-more') }}
@@ -79,13 +81,13 @@ main
margin 0 auto
padding 8px
- > .post
+ > * > .post
margin-bottom 8px
@media (min-width 500px)
padding 16px
- > .post
+ > * > .post
margin-bottom 16px
@media (min-width 600px)