[Client] Add some animations 🎨
This commit is contained in:
parent
a70070ac7d
commit
d18ee12d2f
|
@ -225,6 +225,7 @@
|
||||||
"vue-loader": "15.4.2",
|
"vue-loader": "15.4.2",
|
||||||
"vue-marquee-text-component": "1.1.0",
|
"vue-marquee-text-component": "1.1.0",
|
||||||
"vue-router": "3.0.2",
|
"vue-router": "3.0.2",
|
||||||
|
"vue-sequential-entrance": "1.1.3",
|
||||||
"vue-style-loader": "4.1.2",
|
"vue-style-loader": "4.1.2",
|
||||||
"vue-svg-inline-loader": "1.2.4",
|
"vue-svg-inline-loader": "1.2.4",
|
||||||
"vue-template-compiler": "2.5.17",
|
"vue-template-compiler": "2.5.17",
|
||||||
|
|
|
@ -18,29 +18,31 @@
|
||||||
<option value="remote">{{ $t('origin.remote') }}</option>
|
<option value="remote">{{ $t('origin.remote') }}</option>
|
||||||
</ui-select>
|
</ui-select>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
<div class="kidvdlkg" v-for="file in files">
|
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||||
<div @click="file._open = !file._open">
|
<div class="kidvdlkg" v-for="file in files">
|
||||||
<div>
|
<div @click="file._open = !file._open">
|
||||||
<div class="thumbnail" :style="thumbnail(file)"></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<header>
|
|
||||||
<b>{{ file.name }}</b>
|
|
||||||
<span class="username">@{{ file.user | acct }}</span>
|
|
||||||
</header>
|
|
||||||
<div>
|
<div>
|
||||||
|
<div class="thumbnail" :style="thumbnail(file)"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<header>
|
||||||
|
<b>{{ file.name }}</b>
|
||||||
|
<span class="username">@{{ file.user | acct }}</span>
|
||||||
|
</header>
|
||||||
<div>
|
<div>
|
||||||
<span style="margin-right:16px;">{{ file.type }}</span>
|
<div>
|
||||||
<span>{{ file.datasize | bytes }}</span>
|
<span style="margin-right:16px;">{{ file.type }}</span>
|
||||||
|
<span>{{ file.datasize | bytes }}</span>
|
||||||
|
</div>
|
||||||
|
<div><mk-time :time="file.createdAt" mode="detail"/></div>
|
||||||
</div>
|
</div>
|
||||||
<div><mk-time :time="file.createdAt" mode="detail"/></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-show="file._open">
|
||||||
|
<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="file._open">
|
</sequential-entrance>
|
||||||
<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
|
<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
|
||||||
</section>
|
</section>
|
||||||
</ui-card>
|
</ui-card>
|
||||||
|
|
|
@ -38,25 +38,27 @@
|
||||||
<option value="remote">{{ $t('users.origin.remote') }}</option>
|
<option value="remote">{{ $t('users.origin.remote') }}</option>
|
||||||
</ui-select>
|
</ui-select>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
<div class="kofvwchc" v-for="user in users">
|
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||||
<div>
|
<div class="kofvwchc" v-for="user in users">
|
||||||
<a :href="user | userPage(null, true)">
|
|
||||||
<mk-avatar class="avatar" :user="user" :disable-link="true"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<header>
|
|
||||||
<b><mk-user-name :user="user"/></b>
|
|
||||||
<span class="username">@{{ user | acct }}</span>
|
|
||||||
</header>
|
|
||||||
<div>
|
<div>
|
||||||
<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
|
<a :href="user | userPage(null, true)">
|
||||||
|
<mk-avatar class="avatar" :user="user" :disable-link="true"/>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
|
<header>
|
||||||
|
<b><mk-user-name :user="user"/></b>
|
||||||
|
<span class="username">@{{ user | acct }}</span>
|
||||||
|
</header>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</sequential-entrance>
|
||||||
<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
|
<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
|
||||||
</section>
|
</section>
|
||||||
</ui-card>
|
</ui-card>
|
||||||
|
|
|
@ -10,3 +10,19 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scaleY(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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<mk-ui>
|
<mk-ui>
|
||||||
<main v-if="!fetching">
|
<main v-if="!fetching">
|
||||||
<template v-for="favorite in favorites">
|
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||||
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
<template v-for="favorite in favorites">
|
||||||
</template>
|
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
||||||
|
</template>
|
||||||
|
</sequential-entrance>
|
||||||
<div class="more" v-if="existMore">
|
<div class="more" v-if="existMore">
|
||||||
<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
|
<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,7 +77,7 @@ main
|
||||||
padding 16px
|
padding 16px
|
||||||
max-width 700px
|
max-width 700px
|
||||||
|
|
||||||
> .post
|
> * > .post
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
|
|
||||||
> .more
|
> .more
|
||||||
|
|
|
@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
|
||||||
import VAnimateCss from 'v-animate-css';
|
import VAnimateCss from 'v-animate-css';
|
||||||
import VModal from 'vue-js-modal';
|
import VModal from 'vue-js-modal';
|
||||||
import VueI18n from 'vue-i18n';
|
import VueI18n from 'vue-i18n';
|
||||||
|
import SequentialEntrance from 'vue-sequential-entrance';
|
||||||
|
|
||||||
import VueHotkey from './common/hotkey';
|
import VueHotkey from './common/hotkey';
|
||||||
import App from './app.vue';
|
import App from './app.vue';
|
||||||
|
@ -287,6 +288,7 @@ Vue.use(VAnimateCss);
|
||||||
Vue.use(VModal);
|
Vue.use(VModal);
|
||||||
Vue.use(VueHotkey);
|
Vue.use(VueHotkey);
|
||||||
Vue.use(VueI18n);
|
Vue.use(VueI18n);
|
||||||
|
Vue.use(SequentialEntrance);
|
||||||
|
|
||||||
Vue.component('fa', FontAwesomeIcon);
|
Vue.component('fa', FontAwesomeIcon);
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,11 @@
|
||||||
<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</span>
|
<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</span>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<template v-for="favorite in favorites">
|
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||||
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
<template v-for="favorite in favorites">
|
||||||
</template>
|
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
||||||
|
</template>
|
||||||
|
</sequential-entrance>
|
||||||
<ui-button v-if="existMore" @click="more">{{ $t('@.load-more') }}</ui-button>
|
<ui-button v-if="existMore" @click="more">{{ $t('@.load-more') }}</ui-button>
|
||||||
</main>
|
</main>
|
||||||
</mk-ui>
|
</mk-ui>
|
||||||
|
@ -79,13 +81,13 @@ main
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 8px
|
padding 8px
|
||||||
|
|
||||||
> .post
|
> * > .post
|
||||||
margin-bottom 8px
|
margin-bottom 8px
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
||||||
> .post
|
> * > .post
|
||||||
margin-bottom 16px
|
margin-bottom 16px
|
||||||
|
|
||||||
@media (min-width 600px)
|
@media (min-width 600px)
|
||||||
|
|
Loading…
Reference in New Issue