diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e500e08..850188f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Changed - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - Made reply/fav/repeat etc buttons easier to hit +- Adjusted timeline menu clickable area to match the visible button - Moved external source link from status heading to the ellipsis menu - Disabled horizontal textarea resize diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 0326342b..4c43fe5c 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -102,6 +102,7 @@ .timeline-heading { max-width: 100%; flex-wrap: nowrap; + align-items: center; .loadmore-button { flex-shrink: 0; } diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js index ef8a5813..8d6a58b1 100644 --- a/src/components/timeline_menu/timeline_menu.js +++ b/src/components/timeline_menu/timeline_menu.js @@ -59,6 +59,14 @@ const TimelineMenu = { this.isOpen = true }, 25) }, + blockOpen (event) { + // For the blank area inside the button element. + // Just setting @click.stop="" makes unintuitive behavior when + // menu is open and clicking on the blank area doesn't close it. + if (!this.isOpen) { + event.stopPropagation() + } + }, timelineName () { const route = this.$route.name if (route === 'tag-timeline') { diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index c46531be..3c86842b 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -65,10 +65,16 @@ slot="trigger" class="title timeline-menu-title" > - {{ timelineName() }} - {{ timelineName() }} + + + + @@ -117,8 +123,9 @@ cursor: pointer; user-select: none; width: 100%; + display: flex; - span { + .timeline-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -128,6 +135,11 @@ margin-left: 0.6em; transition: transform 100ms; } + + .click-blocker { + cursor: default; + flex-grow: 1; + } } &.open .timeline-menu-title svg {