freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Responsive statistics card in admin dashboard.

Browse source
This commit is contained in:
baldo 2022-08-02 17:21:05 +02:00
parent e885975aff
commit 33f076b1b6
2 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/scss/_variables.scss
View file

@ -89,6 +89,14 @@ $nav-header-logo-margin: 0 0.5em 0 0;
$nav-footer-padding: 0.75em; $nav-footer-padding: 0.75em;
// Statistics // Statistics
$statistics-card-widths: (
xs: 100%,
sm: 50%,
md: 50%,
lg: 33.3333%,
xl: 33.3333%,
xxl: 33.3333%,
);
$statistics-card-height: 4.5em; $statistics-card-height: 4.5em;
$statistics-card-margin: 0.5em; $statistics-card-margin: 0.5em;
$statistics-card-padding: 0.3em 0.5em; $statistics-card-padding: 0.3em 0.5em;

29
frontend/src/views/AdminDashboardView.vue
View file

@ -2,6 +2,7 @@
import StatisticsCard from "@/components/admin/StatisticsCard.vue"; import StatisticsCard from "@/components/admin/StatisticsCard.vue";
import {useStatisticsStore} from "@/stores/statistics"; import {useStatisticsStore} from "@/stores/statistics";
import {ComponentVariant, MonitoringState} from "@/types"; import {ComponentVariant, MonitoringState} from "@/types";
import PageContainer from "@/components/page/PageContainer.vue";
const statistics = useStatisticsStore(); const statistics = useStatisticsStore();
@ -13,7 +14,7 @@ refresh();
</script> </script>
<template> <template>
<div v-if="statistics.getStatistics"> <PageContainer v-if="statistics.getStatistics">
<h2>Knotenstatistik</h2> <h2>Knotenstatistik</h2>
<div class="statistics"> <div class="statistics">
@ -23,7 +24,7 @@ refresh();
:variant="ComponentVariant.INFO" :variant="ComponentVariant.INFO"
:value="statistics.getStatistics.nodes.registered" :value="statistics.getStatistics.nodes.registered"
link="/admin/nodes" link="/admin/nodes"
/> />
<StatisticsCard <StatisticsCard
title="Mit hinterlegtem fastd-Key" title="Mit hinterlegtem fastd-Key"
icon="lock" icon="lock"
@ -31,7 +32,7 @@ refresh();
:value="statistics.getStatistics.nodes.withVPN" :value="statistics.getStatistics.nodes.withVPN"
link="/admin/nodes" link="/admin/nodes"
:filter="{hasKey: true}" :filter="{hasKey: true}"
/> />
<StatisticsCard <StatisticsCard
title="Mit Koordinaten" title="Mit Koordinaten"
icon="map-marker" icon="map-marker"
@ -39,7 +40,7 @@ refresh();
:value="statistics.getStatistics.nodes.withCoords" :value="statistics.getStatistics.nodes.withCoords"
link="/admin/nodes" link="/admin/nodes"
:filter="{hasCoords: true}" :filter="{hasCoords: true}"
/> />
<StatisticsCard <StatisticsCard
title="Monitoring aktiv" title="Monitoring aktiv"
icon="heartbeat" icon="heartbeat"
@ -47,7 +48,7 @@ refresh();
:value="statistics.getStatistics.nodes.monitoring.active" :value="statistics.getStatistics.nodes.monitoring.active"
link="/admin/nodes" link="/admin/nodes"
:filter="{monitoringState: MonitoringState.ACTIVE}" :filter="{monitoringState: MonitoringState.ACTIVE}"
/> />
<StatisticsCard <StatisticsCard
title="Monitoring noch nicht bestätigt" title="Monitoring noch nicht bestätigt"
icon="envelope" icon="envelope"
@ -55,15 +56,25 @@ refresh();
:value="statistics.getStatistics.nodes.monitoring.pending" :value="statistics.getStatistics.nodes.monitoring.pending"
link="/admin/nodes" link="/admin/nodes"
:filter="{monitoringState: MonitoringState.PENDING}" :filter="{monitoringState: MonitoringState.PENDING}"
/> />
</div> </div>
</div> </PageContainer>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../scss/variables";
@import "../scss/mixins";
.statistics { .statistics {
display: grid; display: grid;
// TODO: Responsive sizes
grid-template-columns: repeat(auto-fill, minmax(25%, 100%));
} }
@each $breakpoint, $width in $statistics-card-widths {
@include page-breakpoint($breakpoint) {
.statistics {
grid-template-columns: repeat(auto-fill, $width);
}
}
}
</style> </style>