icons for dashboard
This commit is contained in:
parent
688368e4e1
commit
79f3052907
3 changed files with 23 additions and 23 deletions
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div v-if="!fetching" class="items">
|
||||
<div class="item _panel sub">
|
||||
<div class="icon"><i class="ti ti-world-download"></i></div>
|
||||
<div class="icon"><i class="ph-download-bold ph-xl"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
{{ number(federationSubActive) }}
|
||||
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item _panel pub">
|
||||
<div class="icon"><i class="ti ti-world-upload"></i></div>
|
||||
<div class="icon"><i class="ph-upload-bold ph-xl"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
{{ number(federationPubActive) }}
|
||||
|
@ -59,7 +59,7 @@ let federationSubActiveDiff = $ref<number | null>(null);
|
|||
let fetching = $ref(true);
|
||||
|
||||
const { handler: externalTooltipHandler } = useChartTooltip();
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
|
||||
federationPubActive = chart.pubActive[0];
|
||||
|
@ -147,15 +147,15 @@ onMounted(async () => {
|
|||
|
||||
&.sub {
|
||||
> .icon {
|
||||
background: #d5ba0026;
|
||||
color: #dfc300;
|
||||
background: #907aa9;
|
||||
color: #c4a7e7;
|
||||
}
|
||||
}
|
||||
|
||||
&.pub {
|
||||
> .icon {
|
||||
background: #00cf2326;
|
||||
color: #00cd5b;
|
||||
background: #56949f;
|
||||
color: #9ccfd8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<MkLoading v-if="fetching"/>
|
||||
<div v-else :class="$style.root">
|
||||
<div class="item _panel users">
|
||||
<div class="icon"><i class="ti ti-users"></i></div>
|
||||
<div class="icon"><i class="ph-users-bold ph-xl"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
<MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
|
||||
|
@ -14,17 +14,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item _panel notes">
|
||||
<div class="icon"><i class="ti ti-pencil"></i></div>
|
||||
<div class="icon"><i class="ph-pencil-bold ph-xl"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
<MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
|
||||
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
|
||||
</div>
|
||||
<div class="label">Notes</div>
|
||||
<div class="label">Posts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item _panel instances">
|
||||
<div class="icon"><i class="ti ti-planet"></i></div>
|
||||
<div class="icon"><i class="ph-planet-bold ph-xl"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
|
||||
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item _panel online">
|
||||
<div class="icon"><i class="ti ti-access-point"></i></div>
|
||||
<div class="icon"><i class="ph-broadcast-bold ph-xl"></i></div>
|
||||
<div class="body">
|
||||
<div class="value">
|
||||
<MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/>
|
||||
|
@ -106,36 +106,36 @@ onMounted(async () => {
|
|||
|
||||
&.users {
|
||||
> .icon {
|
||||
background: #0088d726;
|
||||
color: #3d96c1;
|
||||
background: #56949f;
|
||||
color: #9ccfd8;
|
||||
}
|
||||
}
|
||||
|
||||
&.notes {
|
||||
> .icon {
|
||||
background: #86b30026;
|
||||
color: #86b300;
|
||||
background: #286983;
|
||||
color: #31748f;
|
||||
}
|
||||
}
|
||||
|
||||
&.instances {
|
||||
> .icon {
|
||||
background: #e96b0026;
|
||||
color: #d76d00;
|
||||
background: #d7827e;
|
||||
color: #ebbcba;
|
||||
}
|
||||
}
|
||||
|
||||
&.emojis {
|
||||
> .icon {
|
||||
background: #d5ba0026;
|
||||
color: #dfc300;
|
||||
background: #ea9d34;
|
||||
color: #f6c177;
|
||||
}
|
||||
}
|
||||
|
||||
&.online {
|
||||
> .icon {
|
||||
background: #8a00d126;
|
||||
color: #c01ac3;
|
||||
background: #907aa9;
|
||||
color: #c4a7e7;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -170,7 +170,7 @@ const headerTabs = $computed(() => []);
|
|||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.dashboard,
|
||||
icon: 'ti ti-dashboard',
|
||||
icon: 'ph-gauge-bold ph-lg',
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in a new issue