From 83c7dd177ba38105bf5920e272c9f542c37ba0bf Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 26 Mar 2023 03:33:44 +0000 Subject: [PATCH] note-improvements (#9768) Fixes #9745, quote icon, note spacing adjustments, border radius's in noGap Co-authored-by: Freeplay Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9768 Co-authored-by: Free Co-committed-by: Free --- .../src/components/MkDateSeparatedList.vue | 7 +++++++ packages/client/src/components/MkMention.vue | 1 - packages/client/src/components/MkNote.vue | 16 +++++----------- packages/client/src/components/MkNoteHeader.vue | 4 ++-- packages/client/src/components/MkNoteSub.vue | 4 ++-- packages/client/src/components/MkNotes.vue | 1 + .../client/src/components/MkNotifications.vue | 1 + .../client/src/components/MkSubNoteContent.vue | 2 +- 8 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue index e8896a2a2..41e7ac376 100644 --- a/packages/client/src/components/MkDateSeparatedList.vue +++ b/packages/client/src/components/MkDateSeparatedList.vue @@ -178,6 +178,13 @@ export default defineComponent({ border-radius: 0; box-shadow: none; + &:first-child { + border-radius: var(--radius) var(--radius) 0 0; + } + &:last-child { + border-radius: 0 0 var(--radius) var(--radius); + } + &:not(:last-child) { border-bottom: solid 0.5px var(--divider); } diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue index 4b2e0d518..2a7340421 100644 --- a/packages/client/src/components/MkMention.vue +++ b/packages/client/src/components/MkMention.vue @@ -47,7 +47,6 @@ const bgCss = bg.toRgbString(); border-radius: 999px; max-width: 100%; white-space: nowrap; - overflow: clip; text-overflow: ellipsis; color: var(--mention); diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 852eb48b5..c02e79d00 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -382,7 +382,6 @@ function readPromo() { width: 0; flex-grow: 1; position: relative; - margin-bottom: -10px; line-height: 28px; } > .line { @@ -452,17 +451,13 @@ function readPromo() { } } } - - & + .article { - padding-top: 10px !important; - } - } > .article { - padding: 28px 32px 16px; + padding: 4px 32px 10px; cursor: pointer; + @media (pointer: coarse) { cursor: default; } @@ -662,17 +657,16 @@ function readPromo() { padding-top: 6px; > .note-context { padding-inline: 16px; - margin-top: 0; + margin-top: 8px; > :not(.line) { - margin-top: 5px; + margin-top: 0px; } > .line { margin-right: 10px; } } > .article { - padding: 16px 16px 9px; - + padding: 4px 16px 8px; > .main > .header-container > .avatar { margin-right: 10px; // top: calc(14px + var(--stickyTop, 0px)); diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue index 0d0b2183d..6d55bcff5 100644 --- a/packages/client/src/components/MkNoteHeader.vue +++ b/packages/client/src/components/MkNoteHeader.vue @@ -56,7 +56,6 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS border-radius: 100px; font-size: .8em; text-shadow: 0 2px 2px var(--shadow); - > .avatar { width: 3.7em; height: 3.7em; @@ -74,10 +73,11 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS width: 0; overflow: hidden; text-overflow: ellipsis; + gap: .1em 0; } &:last-child { max-width: 50%; - gap: .2em .5em; + gap: .3em .5em; } .article > .main & { display: flex; diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 5b9d4b33a..401d33ca8 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -17,7 +17,7 @@ - + @@ -373,7 +373,7 @@ function noteClick(e) { &.reply-to, &.reply-to-more { padding-bottom: 0; &:first-child { - padding-top: 30px; + padding-top: 24px; } .line::before { margin-bottom: -16px; diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue index a67b59d73..f1c8aab46 100644 --- a/packages/client/src/components/MkNotes.vue +++ b/packages/client/src/components/MkNotes.vue @@ -42,6 +42,7 @@ defineExpose({ &.noGap { > .notes { background: var(--panel); + border-radius: var(--radius); } } &:not(.noGap) { diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue index 1aa33e74d..a38c0e0b2 100644 --- a/packages/client/src/components/MkNotifications.vue +++ b/packages/client/src/components/MkNotifications.vue @@ -100,5 +100,6 @@ onUnmounted(() => { diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index abb0def32..f58e9b763 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -6,7 +6,7 @@ - +