From 0e39ea522b976b19eb59ead88901c0dede82a1d4 Mon Sep 17 00:00:00 2001 From: MattyaDaihuku <87429435+MattyaDaihuku@users.noreply.github.com> Date: Fri, 18 Oct 2024 04:11:55 +0000 Subject: [PATCH 1/2] =?UTF-8?q?refactor(frontend):=202024.10.1=E3=81=A7?= =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF=E3=83=AA?= =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=81=AB=E4=BC=B4=E3=81=86=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/MkInstanceIcon.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/MkInstanceIcon.vue b/packages/frontend/src/components/MkInstanceIcon.vue index 4ddd2a94931d..f43a0ed6125b 100644 --- a/packages/frontend/src/components/MkInstanceIcon.vue +++ b/packages/frontend/src/components/MkInstanceIcon.vue @@ -26,8 +26,8 @@ const faviconUrl = computed(() => getProxiedImageUrlNullable(props.instance?.fav height: 25px; border-radius: 50%; opacity: 0.7; - background: var(--panel); - box-shadow: 0 0 0 2px var(--panel); + background: var(--MI_THEME-panel); + box-shadow: 0 0 0 2px var(--MI_THEME-panel); } @container (max-width: 580px) { From 7e483cb406138a262b6492cce836184de6e04754 Mon Sep 17 00:00:00 2001 From: MattyaDaihuku <87429435+MattyaDaihuku@users.noreply.github.com> Date: Fri, 18 Oct 2024 08:46:05 +0000 Subject: [PATCH 2/2] =?UTF-8?q?fix(frontend):=20MkInstanceIcon=E3=82=92MkA?= =?UTF-8?q?vatar=E5=86=85=E3=81=A7=E8=A1=A8=E7=A4=BA=E3=81=95=E3=81=9B?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/MkNote.vue | 32 +------------------ .../src/components/global/MkAvatar.vue | 30 +++++++++++++++++ 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 2a4a3f0b1ec6..42ed872d91ec 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -47,8 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- - +
@@ -186,7 +185,6 @@ 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 MkInstanceIcon from '@/components/MkInstanceIcon.vue'; import { pleaseLogin, type OpenOnRemoteOptions } from '@/scripts/please-login.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; import { userPage } from '@/filters/user.js'; @@ -814,16 +812,6 @@ function emitUpdReaction(emoji: string, delta: number) { left: 0; } -.instanceicon { - display: block !important; - padding-top: 33px; - width: 0; - height: 25px; - z-index: 10; - position: sticky !important; - top: calc(22px + var(--stickyTop, 0px)); -} - .main { flex: 1; min-width: 0; @@ -964,12 +952,6 @@ function emitUpdReaction(emoji: string, delta: number) { width: 50px; height: 50px; } - - .instanceicon { - padding-top: 29px; - height: 21px; - width: 0; - } } @container (max-width: 500px) { @@ -1016,13 +998,6 @@ function emitUpdReaction(emoji: string, delta: number) { height: 46px; top: calc(14px + var(--MI-stickyTop, 0px)); } - - .instanceicon { - padding-top: 27px; - height: 19px; - width: 0; - top: calc(14px + var(--stickyTop, 0px)); - } } @container (max-width: 400px) { @@ -1058,11 +1033,6 @@ function emitUpdReaction(emoji: string, delta: number) { height: 44px; } - .instanceicon { - margin-right: -17px; - height: 17px; - } - .root:not(.showActionsOnlyHover) { .footerButton { &:not(:last-child) { diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 35c07bc80ca3..13c39a5f29dc 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only }" alt="" > + @@ -49,6 +50,7 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js'; import { acct, userPage } from '@/filters/user.js'; import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue'; import { defaultStore } from '@/store.js'; +import MkInstanceIcon from '@/components/MkInstanceIcon.vue'; const animation = ref(defaultStore.state.animation); const squareAvatars = ref(defaultStore.state.squareAvatars); @@ -62,6 +64,7 @@ const props = withDefaults(defineProps<{ indicator?: boolean; decorations?: (Omit & { blink?: boolean; })[]; forceShowDecoration?: boolean; + showInstance?: boolean; }>(), { target: null, link: false, @@ -69,6 +72,7 @@ const props = withDefaults(defineProps<{ indicator: false, decorations: undefined, forceShowDecoration: false, + showInstance: false, }); const emit = defineEmits<{ @@ -343,4 +347,30 @@ watch(() => props.user.avatarBlurhash, () => { filter: brightness(1); } } + +.instanceicon { + height: 25px; + z-index: 2; + position: absolute; + left: 0; + bottom: 0; +} + +@container (max-width: 580px) { + .instanceicon { + height: 21px; + } +} + +@container (max-width: 450px) { + .instanceicon { + height: 19px; + } +} + +@container (max-width: 300px) { + .instanceicon { + height: 17px; + } +}