icons for dashboard

This commit is contained in:
ThatOneCalculator 2023-02-15 10:27:49 -08:00
parent ec2f062ce5
commit ed24e9d6a8
3 changed files with 23 additions and 23 deletions

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -170,7 +170,7 @@ const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.dashboard,
icon: 'ti ti-dashboard',
icon: 'ph-gauge-bold ph-lg',
});
</script>