mirror of
https://github.com/paricafe/misskey.git
synced 2024-11-24 15:16:44 -06:00
[Client] Add some animations 🎨
This commit is contained in:
parent
a70070ac7d
commit
d18ee12d2f
7 changed files with 67 additions and 40 deletions
|
@ -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",
|
||||
|
|
|
@ -18,29 +18,31 @@
|
|||
<option value="remote">{{ $t('origin.remote') }}</option>
|
||||
</ui-select>
|
||||
</ui-horizon-group>
|
||||
<div class="kidvdlkg" v-for="file in files">
|
||||
<div @click="file._open = !file._open">
|
||||
<div>
|
||||
<div class="thumbnail" :style="thumbnail(file)"></div>
|
||||
</div>
|
||||
<div>
|
||||
<header>
|
||||
<b>{{ file.name }}</b>
|
||||
<span class="username">@{{ file.user | acct }}</span>
|
||||
</header>
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<div class="kidvdlkg" v-for="file in files">
|
||||
<div @click="file._open = !file._open">
|
||||
<div>
|
||||
<div class="thumbnail" :style="thumbnail(file)"></div>
|
||||
</div>
|
||||
<div>
|
||||
<header>
|
||||
<b>{{ file.name }}</b>
|
||||
<span class="username">@{{ file.user | acct }}</span>
|
||||
</header>
|
||||
<div>
|
||||
<span style="margin-right:16px;">{{ file.type }}</span>
|
||||
<span>{{ file.datasize | bytes }}</span>
|
||||
<div>
|
||||
<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><mk-time :time="file.createdAt" mode="detail"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="file._open">
|
||||
<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="file._open">
|
||||
<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
|
||||
</div>
|
||||
</div>
|
||||
</sequential-entrance>
|
||||
<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
|
|
@ -38,25 +38,27 @@
|
|||
<option value="remote">{{ $t('users.origin.remote') }}</option>
|
||||
</ui-select>
|
||||
</ui-horizon-group>
|
||||
<div class="kofvwchc" v-for="user in users">
|
||||
<div>
|
||||
<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>
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<div class="kofvwchc" v-for="user in users">
|
||||
<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>
|
||||
<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>
|
||||
</sequential-entrance>
|
||||
<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<main v-if="!fetching">
|
||||
<template v-for="favorite in favorites">
|
||||
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
||||
</template>
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<template v-for="favorite in favorites">
|
||||
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
||||
</template>
|
||||
</sequential-entrance>
|
||||
<div class="more" v-if="existMore">
|
||||
<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
|
||||
</div>
|
||||
|
@ -75,7 +77,7 @@ main
|
|||
padding 16px
|
||||
max-width 700px
|
||||
|
||||
> .post
|
||||
> * > .post
|
||||
margin-bottom 16px
|
||||
|
||||
> .more
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -3,9 +3,11 @@
|
|||
<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</span>
|
||||
|
||||
<main>
|
||||
<template v-for="favorite in favorites">
|
||||
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
|
||||
</template>
|
||||
<sequential-entrance animation="entranceFromTop" delay="25">
|
||||
<template v-for="favorite in favorites">
|
||||
<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>
|
||||
</main>
|
||||
</mk-ui>
|
||||
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue