natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

icons for dashboard

This commit is contained in:
ThatOneCalculator 2023-02-15 10:27:49 -08:00
parent 688368e4e1
commit 79f3052907
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
3 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/pages/admin/overview.federation.vue
View File

@ -16,7 +16,7 @@
</div> </div>
<div v-if="!fetching" class="items"> <div v-if="!fetching" class="items">
<div class="item _panel sub"> <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="body">
<div class="value"> <div class="value">
{{ number(federationSubActive) }} {{ number(federationSubActive) }}
@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="item _panel pub"> <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="body">
<div class="value"> <div class="value">
{{ number(federationPubActive) }} {{ number(federationPubActive) }}
@ -59,7 +59,7 @@ let federationSubActiveDiff = $ref<number | null>(null);
let fetching = $ref(true); let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip(); const { handler: externalTooltipHandler } = useChartTooltip();
onMounted(async () => { onMounted(async () => {
const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' }); const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
federationPubActive = chart.pubActive[0]; federationPubActive = chart.pubActive[0];
@ -147,15 +147,15 @@ onMounted(async () => {
&.sub { &.sub {
> .icon { > .icon {
background: #d5ba0026; background: #907aa9;
color: #dfc300; color: #c4a7e7;
} }
} }
&.pub { &.pub {
> .icon { > .icon {
background: #00cf2326; background: #56949f;
color: #00cd5b; color: #9ccfd8;
} }
} }

30
packages/client/src/pages/admin/overview.stats.vue
View File

@ -4,7 +4,7 @@
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<div v-else :class="$style.root"> <div v-else :class="$style.root">
<div class="item _panel users"> <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="body">
<div class="value"> <div class="value">
<MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/> <MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
@ -14,17 +14,17 @@
</div> </div>
</div> </div>
<div class="item _panel notes"> <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="body">
<div class="value"> <div class="value">
<MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/> <MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff> <MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
</div> </div>
<div class="label">Notes</div> <div class="label">Posts</div>
</div> </div>
</div> </div>
<div class="item _panel instances"> <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="body">
<div class="value"> <div class="value">
<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/> <MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<div class="item _panel online"> <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="body">
<div class="value"> <div class="value">
<MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/> <MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/>
@ -106,36 +106,36 @@ onMounted(async () => {
&.users { &.users {
> .icon { > .icon {
background: #0088d726; background: #56949f;
color: #3d96c1; color: #9ccfd8;
} }
} }
&.notes { &.notes {
> .icon { > .icon {
background: #86b30026; background: #286983;
color: #86b300; color: #31748f;
} }
} }
&.instances { &.instances {
> .icon { > .icon {
background: #e96b0026; background: #d7827e;
color: #d76d00; color: #ebbcba;
} }
} }
&.emojis { &.emojis {
> .icon { > .icon {
background: #d5ba0026; background: #ea9d34;
color: #dfc300; color: #f6c177;
} }
} }
&.online { &.online {
> .icon { > .icon {
background: #8a00d126; background: #907aa9;
color: #c01ac3; color: #c4a7e7;
} }
} }

2
packages/client/src/pages/admin/overview.vue
View File

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