limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-14 14:07:38 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2020-02-12 02:52:37 +09:00
parent ba11ebc279
commit 4f05bd3b19
3 changed files with 38 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/client/components/loading.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="yxspomdl"> <div class="yxspomdl" :class="{ inline }">
<div class="ring"></div> <div class="ring"></div>
</div> </div>
</template> </template>
@ -8,6 +8,13 @@
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: {
inline: {
type: Boolean,
required: false,
default: false
}
}
}); });
</script> </script>
@ -25,6 +32,16 @@ export default Vue.extend({
padding: 32px; padding: 32px;
text-align: center; text-align: center;
&.inline {
display: inline;
padding: 0;
> .ring:after {
width: 32px;
height: 32px;
}
}
> .ring { > .ring {
display: inline-block; display: inline-block;
opacity: 0.7; opacity: 0.7;

40
src/client/components/notes.vue
View file

@ -11,28 +11,28 @@
<x-note :note="note" :detail="detail" :key="note.id"/> <x-note :note="note" :detail="detail" :key="note.id"/>
</x-list> </x-list>
<footer v-if="more"> <footer class="more" v-if="more">
<button @click="fetchMore()" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" class="_buttonPrimary"> <mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
<template v-if="!moreFetching">{{ $t('loadMore') }}</template> <template v-if="!moreFetching">{{ $t('loadMore') }}</template>
<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template> <template v-if="moreFetching"><mk-loading inline/></template>
</button> </mk-button>
</footer> </footer>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import i18n from '../i18n'; import i18n from '../i18n';
import paging from '../scripts/paging'; import paging from '../scripts/paging';
import XNote from './note.vue'; import XNote from './note.vue';
import XList from './date-separated-list.vue'; import XList from './date-separated-list.vue';
import MkButton from './ui/button.vue';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
components: { components: {
XNote, XList XNote, XList, MkButton
}, },
mixins: [ mixins: [
@ -63,12 +63,6 @@ export default Vue.extend({
} }
}, },
data() {
return {
faSpinner
};
},
computed: { computed: {
notes(): any[] { notes(): any[] {
return this.extract ? this.extract(this.items) : this.items; return this.extract ? this.extract(this.items) : this.items;
@ -113,23 +107,11 @@ export default Vue.extend({
} }
} }
> footer { > .more > .button {
text-align: center; margin-left: auto;
margin-right: auto;
&:empty { height: 48px;
display: none; width: 100%;
}
> button {
margin: 0;
padding: 16px;
width: 100%;
border-radius: var(--radius);
&:disabled {
opacity: 0.7;
}
}
} }
} }
</style> </style>

18
src/client/components/ui/pagination.vue
View file

@ -5,9 +5,9 @@
<slot name="empty"></slot> <slot name="empty"></slot>
</div> </div>
<div class="more" v-if="more" key="_more_"> <div class="more" v-if="more" key="_more_">
<mk-button :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()"> <mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
<template v-if="!moreFetching">{{ $t('loadMore') }}</template> <template v-if="!moreFetching">{{ $t('loadMore') }}</template>
<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template> <template v-if="moreFetching"><mk-loading inline/></template>
</mk-button> </mk-button>
</div> </div>
</sequential-entrance> </sequential-entrance>
@ -15,7 +15,6 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import MkButton from './button.vue'; import MkButton from './button.vue';
import paging from '../../scripts/paging'; import paging from '../../scripts/paging';
@ -37,12 +36,6 @@ export default Vue.extend({
default: true default: true
} }
}, },
data() {
return {
faSpinner
};
},
}); });
</script> </script>
@ -55,5 +48,12 @@ export default Vue.extend({
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
> .more > .button {
margin-left: auto;
margin-right: auto;
height: 48px;
min-width: 150px;
}
} }
</style> </style>