From b19c2eb0fb45aca4f4a59c4afacaffddf695987d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 20 Oct 2020 22:13:19 +0300 Subject: More stuff. Buttons in user card's corner now have MUCH bigger hitboxes --- src/hocs/with_load_more/with_load_more.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'src/hocs/with_load_more') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 6142f513..afb51a0f 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_load_more.scss' +import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faCircleNotch +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faCircleNotch +) + const withLoadMore = ({ fetch, // function to fetch entries and return a promise select, // function to select data from store @@ -82,7 +92,7 @@ const withLoadMore = ({
{this.error && {this.$t('general.generic_error')}} - {!this.error && this.loading && } + {!this.error && this.loading && } {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}}
-- cgit v1.2.3-70-g09d2 From 8b775f94a99b4cdda2c8581d1803a0599c8b0e3a Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 24 Nov 2020 14:52:01 +0200 Subject: more fixes, add fullwidth --- src/App.scss | 34 +++++++++++++++--------- src/components/emoji_input/emoji_input.vue | 6 ++--- src/components/extra_buttons/extra_buttons.vue | 10 ++++--- src/components/notifications/notifications.vue | 2 +- src/components/popover/popover.js | 2 +- src/components/popover/popover.vue | 5 ++-- src/components/react_button/react_button.vue | 13 ++++----- src/components/scope_selector/scope_selector.vue | 24 ++++++++--------- src/components/side_drawer/side_drawer.vue | 5 ++-- src/components/timeline/timeline.vue | 2 +- src/components/timeline_menu/timeline_menu.vue | 1 + src/hocs/with_load_more/with_load_more.js | 6 ++++- 12 files changed, 63 insertions(+), 47 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/src/App.scss b/src/App.scss index ef2a13b1..1d0abb51 100644 --- a/src/App.scss +++ b/src/App.scss @@ -163,6 +163,8 @@ a { padding: 0; line-height: unset; cursor: pointer; + box-sizing: content-box; + color: inherit; &.-link { color: $fallback--link; @@ -170,8 +172,12 @@ a { } &.-padded { - padding: 5px; - margin: -5px; + padding: 10px; + margin: -10px; + } + + &.-fullwidth { + width: 100%; } } @@ -468,6 +474,7 @@ main-router { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } + .faint-link { color: $fallback--faint; color: var(--faintLink, $fallback--faint); @@ -479,11 +486,8 @@ main-router { overflow-x: hidden; } - button { - flex-shrink: 0; - } - - button, .alert { + .button-default, + .alert { // height: 100%; line-height: 21px; min-height: 0; @@ -494,8 +498,11 @@ main-router { align-self: stretch; } - button { - &, i[class*=icon-] { + .button-default { + flex-shrink: 0; + + &, + i[class*=icon-] { color: $fallback--text; color: var(--btnPanelText, $fallback--text); } @@ -518,7 +525,8 @@ main-router { } } - a { + a, + .-link { color: $fallback--link; color: var(--panelLink, $fallback--link) } @@ -533,15 +541,15 @@ main-router { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); - .faint { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } - a { + a, + .-link { color: $fallback--link; - color: var(--panelLink, $fallback--link) + color: var(--panelLink, $fallback--link); } } diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 224e72cf..d308bf86 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -6,13 +6,13 @@ > @@ -117,6 +117,8 @@ .ExtraButtons { cursor: pointer; position: static; + padding: 10px; + margin: -10px; &:hover .svg-inline--fa { color: $fallback--text; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 663f623b..725d1ad4 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -43,7 +43,7 @@
- + @@ -105,8 +104,10 @@ } } -.add-reaction-button { +.AddReaction { cursor: pointer; + padding: 10px; + margin: -10px; &:hover .svg-inline--fa { color: $fallback--text; diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue index a22a4fda..66ac612e 100644 --- a/src/components/scope_selector/scope_selector.vue +++ b/src/components/scope_selector/scope_selector.vue @@ -3,9 +3,9 @@ v-if="!showNothing" class="ScopeSelector" > - - - + diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 1c14c1ab..695ae03b 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -145,7 +145,7 @@
  • + } {!this.error && this.loading && } {!this.error && !this.loading && !this.bottomedOut && {this.$t('general.more')}} -- cgit v1.2.3-70-g09d2 From 243383852ba59d5787eaccdca157c6e809f49449 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 28 Dec 2020 17:08:15 +0200 Subject: make with-load-more not use computeds when they don't work for it --- CHANGELOG.md | 2 ++ src/hocs/with_load_more/with_load_more.js | 16 ++++++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) (limited to 'src/hocs/with_load_more') diff --git a/CHANGELOG.md b/CHANGELOG.md index 243435f1..9f516b8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Fixed +- Follows/Followers tabs on user profiles now display the content properly. ## [2.2.2] - 2020-12-22 ### Added diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 7df9dbb2..671b2b6f 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -29,12 +29,8 @@ const withLoadMore = ({ return { loading: false, bottomedOut: false, - error: false - } - }, - computed: { - entries () { - return select(this.$props, this.$store) || [] + error: false, + entries: [] } }, created () { @@ -48,6 +44,11 @@ const withLoadMore = ({ destroy && destroy(this.$props, this.$store) }, methods: { + // Entries is not a computed because computed can't track the dynamic + // selector for changes and won't trigger after fetch. + updateEntries () { + this.entries = select(this.$props, this.$store) || [] + }, fetchEntries () { if (!this.loading) { this.loading = true @@ -61,6 +62,9 @@ const withLoadMore = ({ this.loading = false this.error = true }) + .finally(() => { + this.updateEntries() + }) } }, scrollLoad (e) { -- cgit v1.2.3-70-g09d2