diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index f4efc5e8..b7414610 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -69,6 +69,13 @@ const Timeline = { return `${this.$t('timeline.show_new')} (${this.newStatusCount})` } }, + mobileLoadButtonString () { + if (this.timeline.flushMarker !== 0) { + return '+' + } else { + return this.newStatusCount > 99 ? '∞' : this.newStatusCount + } + }, classes () { let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel'] if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention']) diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss index 9fc2aeab..24a45070 100644 --- a/src/components/timeline/timeline.scss +++ b/src/components/timeline/timeline.scss @@ -13,6 +13,21 @@ background-color: var(--badgeNeutral); } + .alert-badge { + font-size: 0.75em; + line-height: 1; + text-align: right; + border-radius: var(--tooltipRadius); + position: absolute; + left: calc(50% - 0.5em); + top: calc(50% - 0.4em); + padding: 0.2em; + margin-left: 0.7em; + margin-top: -1em; + background-color: var(--badgeNeutral); + color: var(--badgeNeutralText); + } + .loadmore-button { position: relative } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index e6038830..8a036fd0 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -38,7 +38,9 @@ fixed-width icon="circle-plus" /> -
+
+ {{ mobileLoadButtonString }} +