From 781343953641ab7763241b870c2faa1877541bf2 Mon Sep 17 00:00:00 2001 From: NoriDev Date: Mon, 2 Oct 2023 23:41:14 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=A6=E3=83=BC?= =?UTF-8?q?=E3=82=B6=E3=83=BC=E5=90=8D=E3=80=81=E5=90=8D=E5=89=8D=E3=80=81?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=B9=E3=82=BF=E3=83=B3=E3=82=B9=E5=90=8D?= =?UTF-8?q?=E3=81=8C=E9=95=B7=E3=81=84=E5=A0=B4=E5=90=88=E3=81=AF=E3=82=B9?= =?UTF-8?q?=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=97=E3=81=A6=E8=A6=8B?= =?UTF-8?q?=E3=82=8B=E3=81=93=E3=81=A8=E3=81=8C=E3=81=A7=E3=81=8D=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG_CHERRYPICK.md | 1 + .../src/components/MkInstanceTicker.vue | 15 +++++++++- packages/frontend/src/components/MkNote.vue | 1 - .../src/components/MkNoteDetailed.vue | 29 ++++++++++++++++--- .../frontend/src/components/MkNoteHeader.vue | 16 ++++++++-- 5 files changed, 53 insertions(+), 9 deletions(-) diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md index e8c090436a..d22c4b950d 100644 --- a/CHANGELOG_CHERRYPICK.md +++ b/CHANGELOG_CHERRYPICK.md @@ -36,6 +36,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE - 일정 시간이 경과하면 이미지 재생을 중지 - Feat: 미디어가 포함된 모든 노트를 접을 수 있음 - Feat: 클라이언트 업데이트가 있으면 알림 +- Enhance: 유저명, 이름, 인스턴스 이름이 길면 스크롤해서 볼 수 있음 - Fix: 로그인하지 않은 상태에서 노트 상세 페이지의 노트 작성 폼을 조작할 수 있음 - Fix: Chromium 기반 브라우저에서 노트 작성 폼의 스크롤 영역이 잘못된 디자인을 표시함 diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue index bbde1fc7fe..2ec7a04173 100644 --- a/packages/frontend/src/components/MkInstanceTicker.vue +++ b/packages/frontend/src/components/MkInstanceTicker.vue @@ -77,6 +77,19 @@ $height: 2ex; font-size: 0.9em; font-weight: bold; white-space: nowrap; - overflow: visible; + overflow: scroll; + overflow-wrap: anywhere; + max-width: 300px; + text-overflow: ellipsis; + + &::-webkit-scrollbar { + display: none; + } +} + +@container (max-width: 500px) { + .name { + max-width: 100px; + } } diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 237dbbdd03..a6ca7f80e6 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -188,7 +188,6 @@ import MkCwButton from '@/components/MkCwButton.vue'; import MkPoll from '@/components/MkPoll.vue'; import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; -import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import MkEvent from '@/components/MkEvent.vue'; import { pleaseLogin } from '@/scripts/please-login.js'; import { focusPrev, focusNext } from '@/scripts/focus.js'; diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 0814107cd5..a05d78f1ed 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -51,12 +51,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-
- + +
-
+
- + bot @@ -829,12 +829,21 @@ onMounted(() => { justify-content: center; padding-left: 16px; font-size: 0.95em; + max-width: 300px; } .noteHeaderName { font-weight: bold; line-height: 1.3; margin: 0 .5em 0 0; + overflow: scroll; + overflow-wrap: anywhere; + text-overflow: ellipsis; + white-space: nowrap; + + &::-webkit-scrollbar { + display: none; + } &:hover { color: var(--nameHover); @@ -861,6 +870,14 @@ onMounted(() => { margin-bottom: 2px; line-height: 1.3; word-wrap: anywhere; + overflow: scroll; + overflow-wrap: anywhere; + text-overflow: ellipsis; + white-space: nowrap; + + &::-webkit-scrollbar { + display: none; + } } .noteContent { @@ -1012,6 +1029,10 @@ onMounted(() => { .root { font-size: 0.9em; } + + .noteHeaderBody { + max-width: 180px; + } } @container (max-width: 480px) { diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index bb4109823d..89c8db9bd9 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -87,13 +87,18 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS display: block; margin: 0 .5em 0 0; padding: 0; - overflow: hidden; + overflow: scroll; + overflow-wrap: anywhere; font-size: 1em; font-weight: bold; text-decoration: none; text-overflow: ellipsis; max-width: 300px; + &::-webkit-scrollbar { + display: none; + } + &:hover { color: var(--nameHover); text-decoration: none; @@ -113,9 +118,14 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS .username { flex-shrink: 9999999; margin: 0 .5em 0 0; - overflow: hidden; + overflow: scroll; text-overflow: ellipsis; font-size: .95em; + max-width: 300px; + + &::-webkit-scrollbar { + display: none; + } } .info { @@ -150,7 +160,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS } @container (max-width: 500px) { - .name { + .name, .username { max-width: 200px; } }