mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 00:38:14 +09:00
Code

Add animation

Browse Source
This commit is contained in:
syuilo 2018-09-08 04:54:11 +09:00
parent 1c84c0828e
commit 2824d8a5b6
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
1 changed files with 70 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/client/app/common/views/components/welcome-timeline.vue
View File

@ -1,22 +1,24 @@
<template> <template>
<div class="mk-welcome-timeline"> <div class="mk-welcome-timeline">
<div v-for="note in notes"> <transition-group name="ldzpakcixzickvggyixyrhqwjaefknon" tag="div">
<mk-avatar class="avatar" :user="note.user" target="_blank"/> <div v-for="note in notes" :key="note.id">
<div class="body"> <mk-avatar class="avatar" :user="note.user" target="_blank"/>
<header> <div class="body">
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link> <header>
<span class="username">@{{ note.user | acct }}</span> <router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
<div class="info"> <span class="username">@{{ note.user | acct }}</span>
<router-link class="created-at" :to="note | notePage"> <div class="info">
<mk-time :time="note.createdAt"/> <router-link class="created-at" :to="note | notePage">
</router-link> <mk-time :time="note.createdAt"/>
</router-link>
</div>
</header>
<div class="text">
<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
</div> </div>
</header>
<div class="text">
<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
</div> </div>
</div> </div>
</div> </transition-group>
</div> </div>
</template> </template>
@ -83,64 +85,73 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.ldzpakcixzickvggyixyrhqwjaefknon-enter
.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
opacity 0
transform translateY(-30px)
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
> div > div
padding 16px > *
overflow-wrap break-word transition transform .3s ease, opacity .3s ease
font-size .9em
color isDark ? #fff : #4C4C4C
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
&:after > div
content "" padding 16px
display block overflow-wrap break-word
clear both font-size .9em
color isDark ? #fff : #4C4C4C
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
> .avatar &:after
display block content ""
float left display block
position -webkit-sticky clear both
position sticky
top 16px
width 42px
height 42px
border-radius 6px
> .body > .avatar
float right display block
width calc(100% - 42px) float left
padding-left 12px position -webkit-sticky
position sticky
top 16px
width 42px
height 42px
border-radius 6px
> header > .body
display flex float right
align-items center width calc(100% - 42px)
margin-bottom 4px padding-left 12px
white-space nowrap
> .name > header
display block display flex
margin 0 .5em 0 0 align-items center
padding 0 margin-bottom 4px
overflow hidden white-space nowrap
font-weight bold
text-overflow ellipsis
color isDark ? #fff : #627079
> .username > .name
margin 0 .5em 0 0 display block
color isDark ? #606984 : #ccc margin 0 .5em 0 0
padding 0
overflow hidden
font-weight bold
text-overflow ellipsis
color isDark ? #fff : #627079
> .info > .username
margin-left auto margin 0 .5em 0 0
font-size 0.9em color isDark ? #606984 : #ccc
> .created-at > .info
color isDark ? #606984 : #c0c0c0 margin-left auto
font-size 0.9em
> .text > .created-at
text-align left color isDark ? #606984 : #c0c0c0
> .text
text-align left
.mk-welcome-timeline[data-darkmode] .mk-welcome-timeline[data-darkmode]
root(true) root(true)