diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2020-03-20 18:55:15 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2020-03-20 18:55:15 +0900 |
| commit | 07ce365bfd63e00d3ef74c68b9bad83e538da357 (patch) | |
| tree | 83fbe5b6eea9ba4977d6dd92096f79889013b344 /src/client | |
| parent | wip (diff) | |
| download | sharkey-07ce365bfd63e00d3ef74c68b9bad83e538da357.tar.gz sharkey-07ce365bfd63e00d3ef74c68b9bad83e538da357.tar.bz2 sharkey-07ce365bfd63e00d3ef74c68b9bad83e538da357.zip | |
wip
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/components/date-separated-list.vue | 6 | ||||
| -rw-r--r-- | src/client/components/notes.vue | 14 | ||||
| -rw-r--r-- | src/client/style.scss | 1 |
3 files changed, 13 insertions, 8 deletions
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue index 10f6dea517..d41dd9d521 100644 --- a/src/client/components/date-separated-list.vue +++ b/src/client/components/date-separated-list.vue @@ -1,5 +1,5 @@ <template> -<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" appear :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'"> +<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'"> <template v-for="(item, i) in items"> <slot :item="item" :i="i"></slot> <div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)"> @@ -76,6 +76,10 @@ export default Vue.extend({ transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); } + > .list-enter-active { + transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1); + } + &[data-direction="up"] { > .list-enter { opacity: 0; diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index 9bbde6293a..deb682d586 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -8,10 +8,10 @@ <mk-error v-if="error" @retry="init()"/> <div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);"> - <mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary> + <div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary> <template v-if="!moreFetching">{{ $t('loadMore') }}</template> <template v-if="moreFetching"><mk-loading inline/></template> - </mk-button> + </div> </div> <x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> @@ -19,10 +19,10 @@ </x-list> <div class="more" v-if="more && !reversed" style="margin-top: var(--margin);"> - <mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary> + <div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary> <template v-if="!moreFetching">{{ $t('loadMore') }}</template> <template v-if="moreFetching"><mk-loading inline/></template> - </mk-button> + </div> </div> </div> </template> @@ -118,10 +118,10 @@ export default Vue.extend({ } > .more > .button { - margin-left: auto; - margin-right: auto; + display: flex; + align-items: center; + justify-content: center; height: 48px; - width: 100%; } } </style> diff --git a/src/client/style.scss b/src/client/style.scss index 2d80e6f6f8..5f10893a8f 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -279,6 +279,7 @@ hr { position: relative; background: var(--panel); border-radius: var(--radius); + box-shadow: 0 0 0 1px var(--shadow); } main ._panel { |