oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues 1 Pull Requests Packages Releases 2 Activity

Resolve #5928

Browse Source
This commit is contained in:
syuilo 2020-02-15 02:16:11 +09:00
parent 55bdf0d618
commit d5c1e7e579
1 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/client/widgets/trends.vue
View File

@ -4,10 +4,11 @@
<template #header><fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template> <template #header><fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template>
<div class="wbrkwala"> <div class="wbrkwala">
<transition-group tag="div" name="chart"> <mk-loading v-if="fetching"/>
<transition-group tag="div" name="chart" class="tags" v-else>
<div v-for="stat in stats" :key="stat.tag"> <div v-for="stat in stats" :key="stat.tag">
<div class="tag"> <div class="tag">
<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link> <router-link class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p> <p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
</div> </div>
<x-chart class="chart" :src="stat.chart"/> <x-chart class="chart" :src="stat.chart"/>
@ -66,20 +67,10 @@ export default define({
<style lang="scss" scoped> <style lang="scss" scoped>
.wbrkwala { .wbrkwala {
> .fetching, height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
> .empty { overflow: hidden;
margin: 0;
padding: 16px;
text-align: center;
color: var(--text);
opacity: 0.7;
> [data-icon] { > .tags {
margin-right: 4px;
}
}
> div {
.chart-move { .chart-move {
transition: transform 1s ease; transition: transform 1s ease;
} }
@ -96,22 +87,23 @@ export default define({
> .tag { > .tag {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 0.9em;
color: var(--fg); color: var(--fg);
> a { > .a {
display: block; display: block;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: inherit; line-height: 18px;
} }
> p { > p {
margin: 0; margin: 0;
font-size: 75%; font-size: 75%;
opacity: 0.7; opacity: 0.7;
line-height: 16px;
} }
} }