From 30785fa9b408e620443c999196a647a57959fd58 Mon Sep 17 00:00:00 2001 From: Andreas Mair Date: Tue, 26 Nov 2024 17:39:23 +0100 Subject: [PATCH] Change items list style in compact mode to improve readability (and better match v24's style) (#2918) In detail: 1) Increase padding for rows. 2) Add a small border between the rows. 3) Center favicon vertically. --- CHANGELOG.md | 1 + src/components/feed-display/FeedItemRow.vue | 6 +++++- src/components/feed-display/VirtualScroll.vue | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 95db0a46a..a7e26e1b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the # Unreleased ## [25.x.x] ### Changed +- Items list style in compact mode to improve readability (and better match v24's style) (#2918) ### Fixed diff --git a/src/components/feed-display/FeedItemRow.vue b/src/components/feed-display/FeedItemRow.vue index 616469b9f..1983c878e 100644 --- a/src/components/feed-display/FeedItemRow.vue +++ b/src/components/feed-display/FeedItemRow.vue @@ -170,7 +170,11 @@ export default Vue.extend({ } .feed-item-row.compact { - display: flex; padding: 1px 1px !important; + display: flex; padding: 4px 4px !important; + border-bottom: 1px solid var(--color-border); + } + .feed-item-row.compact a.external { + line-height: 0; } .feed-item-row:hover { diff --git a/src/components/feed-display/VirtualScroll.vue b/src/components/feed-display/VirtualScroll.vue index bc49e4539..486a666bc 100644 --- a/src/components/feed-display/VirtualScroll.vue +++ b/src/components/feed-display/VirtualScroll.vue @@ -117,7 +117,7 @@ export default Vue.extend({ let renderedItems = 0 let upperPaddingItems = 0 let lowerPaddingItems = 0 - const itemHeight = this.compactMode ? 37 : 111 + const itemHeight = this.compactMode ? 44 : 111 const padding = GRID_ITEM_HEIGHT if (this.$slots.default && this.$el && this.$el.getBoundingClientRect) { const childComponents = this.$slots.default.filter(child => !!child.componentOptions)