Michcio/lost-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

show software name and version in instance ticker

Browse source
This commit is contained in:
Johann150 2022-08-25 18:49:28 +02:00 committed by Gitea
parent d945a5247d
commit 09ebbe1d49
1 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/client/src/components/instance-ticker.vue
View file

@ -1,7 +1,8 @@
<template>
<div class="hpaizdrt" :style="bg">
<div class="hpaizdrt" :style="bg" v-tooltip="instance.softwareName + ' ' + instance.softwareVersion">
<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
<span class="name">{{ instance.name }}</span>
<span v-if="instance.softwareName" class="software">{{ instance.softwareName }}</span>
</div>
</template>
@ -13,6 +14,8 @@ const props = defineProps<{
faviconUrl?: string;
name: string;
themeColor?: string;
softwareName?: string;
softwareVersion?: string;
};
}>();
@ -21,6 +24,8 @@ const instance = props.instance ?? {
faviconUrl: '/favicon.ico',
name: instanceName,
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
softwareName: 'misskey',
softwareVersion: '',
};
const themeColor = instance.themeColor ?? '#777777';
@ -33,6 +38,7 @@ const bg = {
<style lang="scss" scoped>
.hpaizdrt {
$height: 1.1rem;
position: relative;
height: $height;
border-radius: 4px 0 0 4px;
@ -59,11 +65,24 @@ const bg = {
}
> .name {
margin-left: 4px;
margin-left: .3em;
line-height: $height;
font-size: 0.9em;
vertical-align: top;
font-weight: bold;
}
> .software {
float: right;
margin-right: .3em;
line-height: $height;
font-size: 0.9em;
vertical-align: top;
color: var(--fg);
text-shadow: none;
text-transform: capitalize;
}
}
</style>