diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue index a5ff656f6d..d8228b2c0f 100644 --- a/packages/client/src/components/MkInstanceTicker.vue +++ b/packages/client/src/components/MkInstanceTicker.vue @@ -1,7 +1,7 @@ <template> -<div class="hpaizdrt" :style="bg"> - <img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/> - <span class="name">{{ instance.name }}</span> +<div :class="$style.root" :style="bg"> + <img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/> + <div :class="$style.name">{{ instance.name }}</div> </div> </template> @@ -21,11 +21,12 @@ const props = defineProps<{ // if no instance data is given, this is for the local instance const instance = props.instance ?? { - faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.faviconUrl) ?? '/favicon.ico', name: instanceName, themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content, }; +const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico'); + const themeColor = instance.themeColor ?? '#777777'; const bg = { @@ -33,13 +34,15 @@ const bg = { }; </script> -<style lang="scss" scoped> -.hpaizdrt { - $height: 1.1rem; +<style lang="scss" module> +$height: 2ex; +.root { + display: flex; + align-items: center; height: $height; border-radius: 4px 0 0 4px; - overflow: hidden; + overflow: clip; color: #fff; text-shadow: /* .866 ≈ sin(60deg) */ 1px 0 1px #000, @@ -54,17 +57,16 @@ const bg = { 0 -1px 1px #000, .5px -.866px 1px #000, .866px -.5px 1px #000; +} - > .icon { - height: 100%; - } +.icon { + height: $height; +} - > .name { - margin-left: 4px; - line-height: $height; - font-size: 0.9em; - vertical-align: top; - font-weight: bold; - } +.name { + margin-left: 4px; + line-height: 1; + font-size: 0.9em; + font-weight: bold; } </style> diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts index 76e20786f4..506cb78291 100644 --- a/packages/client/src/scripts/media-proxy.ts +++ b/packages/client/src/scripts/media-proxy.ts @@ -1,13 +1,14 @@ import { query } from '@/scripts/url'; import { url } from '@/config'; -export function getProxiedImageUrl(imageUrl: string): string { +export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string { return `${url}/proxy/image.webp?${query({ url: imageUrl, + ...(type ? { [type]: "1" } : {}), })}`; } -export function getProxiedImageUrlNullable(imageUrl: string | null | undefined): string | null { +export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null { if (imageUrl == null) return null; - return getProxiedImageUrl(imageUrl); + return getProxiedImageUrl(imageUrl, type); }