mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-28 20:13:09 +02:00
🎨
This commit is contained in:
parent
3961fd08c9
commit
c7988fb6f5
6 changed files with 28 additions and 18 deletions
|
@ -9,7 +9,7 @@
|
|||
<button @click="resolveInitPromise">%i18n:@retry%</button>
|
||||
</div>
|
||||
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
|
@ -232,7 +232,7 @@ export default Vue.extend({
|
|||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .skeleton
|
||||
> .placeholder
|
||||
padding 32px
|
||||
opacity 0.3
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="mk-notifications">
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
|
@ -207,7 +207,7 @@ export default Vue.extend({
|
|||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .skeleton
|
||||
> .placeholder
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
|
|
|
@ -2,6 +2,12 @@
|
|||
<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
|
||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
||||
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="!fetching && requestInitPromise != null">
|
||||
<p>%i18n:@error%</p>
|
||||
<button @click="resolveInitPromise">%i18n:@retry%</button>
|
||||
|
@ -205,6 +211,10 @@ export default Vue.extend({
|
|||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .placeholder
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
> .notes
|
||||
> .date
|
||||
display block
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
|
||||
<template v-for="(notification, i) in _notifications">
|
||||
|
@ -14,7 +20,6 @@
|
|||
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
|
||||
</button>
|
||||
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
|
||||
<p class="loading" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -161,6 +166,10 @@ export default Vue.extend({
|
|||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .placeholder
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
> .notifications
|
||||
|
||||
> .notification:not(:last-child)
|
||||
|
@ -207,13 +216,4 @@ export default Vue.extend({
|
|||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .loading
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
||||
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
|
@ -253,7 +253,7 @@ export default Vue.extend({
|
|||
[data-fa]
|
||||
margin-right 8px
|
||||
|
||||
> .skeleton
|
||||
> .placeholder
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="mk-notifications">
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<div class="placeholder" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
|
@ -184,7 +184,7 @@ export default Vue.extend({
|
|||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .skeleton
|
||||
> .placeholder
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
|
|
Loading…
Reference in a new issue