From d5c1e7e5791f0829848b14d912627b30a9e2f96a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 15 Feb 2020 02:16:11 +0900
Subject: [PATCH] Resolve #5928
---
src/client/widgets/trends.vue | 28 ++++++++++------------------
1 file changed, 10 insertions(+), 18 deletions(-)
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index 51ef80bfeb..f7580bd839 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -4,10 +4,11 @@
<template #header><fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template>
<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 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>
</div>
<x-chart class="chart" :src="stat.chart"/>
@@ -66,20 +67,10 @@ export default define({
<style lang="scss" scoped>
.wbrkwala {
- > .fetching,
- > .empty {
- margin: 0;
- padding: 16px;
- text-align: center;
- color: var(--text);
- opacity: 0.7;
+ height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
+ overflow: hidden;
- > [data-icon] {
- margin-right: 4px;
- }
- }
-
- > div {
+ > .tags {
.chart-move {
transition: transform 1s ease;
}
@@ -96,22 +87,23 @@ export default define({
> .tag {
flex: 1;
overflow: hidden;
- font-size: 14px;
+ font-size: 0.9em;
color: var(--fg);
- > a {
+ > .a {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- color: inherit;
+ line-height: 18px;
}
> p {
margin: 0;
font-size: 75%;
opacity: 0.7;
+ line-height: 16px;
}
}