KevinMidboe/seasoned
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasoned.git synced 2026-03-11 11:55:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor and optimize admin page components

Browse Source 
- Remove unused imports and auto-refresh functionality
- Reduce padding and spacing for more compact admin layout
- Simplify stats generation and remove unused variables
- Adjust font sizes and icon sizes for better consistency
- Improve line-height on admin page title
- Minor performance optimizations
This commit is contained in:
Kevin
2026-02-27 17:31:38 +01:00
parent 0a2e721cfc
commit 9c7e0bd3b3
5 changed files with 117 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/admin/AdminStats.vue
View File

@@ -59,7 +59,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue"; import { ref, computed, onMounted } from "vue";
import IconProfile from "@/icons/IconProfile.vue"; import IconProfile from "@/icons/IconProfile.vue";
import IconPlay from "@/icons/IconPlay.vue"; import IconPlay from "@/icons/IconPlay.vue";
import IconRequest from "@/icons/IconRequest.vue"; import IconRequest from "@/icons/IconRequest.vue";
@@ -95,7 +95,6 @@
const loading = ref(false); const loading = ref(false);
const timeRange = ref("week"); const timeRange = ref("week");
let refreshInterval: number | null = null;
const statCards = computed<Stat[]>(() => [ const statCards = computed<Stat[]>(() => [
{ {
@@ -155,7 +154,7 @@
baseValue: number, baseValue: number,
points: number = 7 points: number = 7
): number[] => { ): number[] => {
return Array.from({ length: points }, (_, i) => { return Array.from({ length: points }, () => {
const variance = Math.random() * 0.3 - 0.15; const variance = Math.random() * 0.3 - 0.15;
return Math.max(0, Math.floor(baseValue * (1 + variance))); return Math.max(0, Math.floor(baseValue * (1 + variance)));
}); });
@@ -197,29 +196,7 @@
console.log(`Stat card clicked: ${key}`); console.log(`Stat card clicked: ${key}`);
} }
function startAutoRefresh() { onMounted(() => fetchStats());
refreshInterval = window.setInterval(() => {
if (!loading.value) {
fetchStats();
}
}, 60000);
}
function stopAutoRefresh() {
if (refreshInterval) {
clearInterval(refreshInterval);
refreshInterval = null;
}
}
onMounted(() => {
fetchStats();
startAutoRefresh();
});
onUnmounted(() => {
stopAutoRefresh();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -229,7 +206,7 @@
.admin-stats { .admin-stats {
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
@@ -246,26 +223,26 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.5rem;
@include mobile-only { @include mobile-only {
margin-bottom: 0.75rem; margin-bottom: 0.6rem;
width: 100%; width: 100%;
} }
} }
&__title { &__title {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.1rem;
font-weight: 400; font-weight: 400;
color: $text-color; color: $text-color;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
@include mobile-only { @include mobile-only {
font-size: 1rem; font-size: 0.95rem;
} }
} }
@@ -294,11 +271,11 @@
&__grid { &__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 0.75rem;
@include mobile-only { @include mobile-only {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; gap: 0.6rem;
width: 100%; width: 100%;
} }
} }
@@ -373,7 +350,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 1rem; padding: 0.75rem;
background-color: var(--background-ui); background-color: var(--background-ui);
border-radius: 0.5rem; border-radius: 0.5rem;
text-align: center; text-align: center;
@@ -382,7 +359,7 @@
min-width: 0; min-width: 0;
@include mobile-only { @include mobile-only {
padding: 0.65rem 0.4rem; padding: 0.6rem 0.4rem;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -412,22 +389,22 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
@include mobile-only { @include mobile-only {
margin-bottom: 0.35rem; margin-bottom: 0.3rem;
} }
} }
&__icon { &__icon {
width: 24px; width: 20px;
height: 24px; height: 20px;
fill: var(--highlight-color); fill: var(--highlight-color);
opacity: 0.8; opacity: 0.8;
@include mobile-only { @include mobile-only {
width: 18px; width: 16px;
height: 18px; height: 16px;
} }
} }
@@ -454,31 +431,33 @@
} }
&__value { &__value {
font-size: 1.75rem; font-size: 2.2rem;
font-weight: 600; font-weight: 600;
color: var(--highlight-color); color: var(--highlight-color);
margin-bottom: 0.25rem; margin-bottom: 0.15rem;
line-height: 1.1;
padding: 1rem 0;
@include mobile-only { @include mobile-only {
font-size: 1.4rem; font-size: 1.25rem;
margin-bottom: 0.15rem; margin-bottom: 0.1rem;
} }
} }
&__label { &__label {
font-size: 0.85rem; font-size: 0.75rem;
color: $text-color-70; color: $text-color-70;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.4px;
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
word-break: break-word; word-break: break-word;
max-width: 100%; max-width: 100%;
line-height: 1.2;
@include mobile-only { @include mobile-only {
font-size: 0.68rem; font-size: 0.65rem;
margin-bottom: 0.35rem; margin-bottom: 0.3rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.2;
} }
} }
@@ -487,13 +466,13 @@
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: 30px; height: 24px;
margin-top: 0.5rem; margin-top: 0.4rem;
gap: 2px; gap: 2px;
@include mobile-only { @include mobile-only {
height: 20px; height: 18px;
margin-top: 0.35rem; margin-top: 0.3rem;
gap: 1px; gap: 1px;
} }
} }

81
src/components/admin/RecentActivityFeed.vue
View File

@@ -121,7 +121,6 @@
const timeFilter = ref("24h"); const timeFilter = ref("24h");
const hasMore = ref(true); const hasMore = ref(true);
const page = ref(1); const page = ref(1);
let refreshInterval: number | null = null;
const filteredActivities = computed(() => { const filteredActivities = computed(() => {
let result = [...activities.value]; let result = [...activities.value];
@@ -265,29 +264,7 @@
console.log("Activity clicked:", activity); console.log("Activity clicked:", activity);
} }
function startAutoRefresh() { onMounted(fetchActivities);
refreshInterval = window.setInterval(() => {
if (!loading.value && !loadingMore.value) {
fetchActivities();
}
}, 30000);
}
function stopAutoRefresh() {
if (refreshInterval) {
clearInterval(refreshInterval);
refreshInterval = null;
}
}
onMounted(() => {
fetchActivities();
startAutoRefresh();
});
onUnmounted(() => {
stopAutoRefresh();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -297,7 +274,7 @@
.activity-feed { .activity-feed {
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
@@ -314,26 +291,26 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 0.75rem;
@include mobile-only { @include mobile-only {
gap: 0.75rem; gap: 0.6rem;
margin-bottom: 0.75rem; margin-bottom: 0.6rem;
} }
} }
&__title { &__title {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.1rem;
font-weight: 400; font-weight: 400;
color: $text-color; color: $text-color;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
@include mobile-only { @include mobile-only {
font-size: 1rem; font-size: 0.95rem;
width: 100%; width: 100%;
} }
} }
@@ -391,14 +368,14 @@
&__list { &__list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.4rem;
max-height: 500px; max-height: 450px;
overflow-y: auto; overflow-y: auto;
padding-right: 0.25rem; padding-right: 0.25rem;
@include mobile-only { @include mobile-only {
max-height: 400px; max-height: 350px;
gap: 0.4rem; gap: 0.35rem;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -453,8 +430,8 @@
.activity-item { .activity-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: 0.75rem;
padding: 0.75rem; padding: 0.65rem;
background-color: var(--background-ui); background-color: var(--background-ui);
border-radius: 0.5rem; border-radius: 0.5rem;
transition: background-color 0.2s; transition: background-color 0.2s;
@@ -462,8 +439,8 @@
min-width: 0; min-width: 0;
@include mobile-only { @include mobile-only {
gap: 0.65rem; gap: 0.6rem;
padding: 0.65rem; padding: 0.6rem;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -484,16 +461,16 @@
&__icon { &__icon {
flex-shrink: 0; flex-shrink: 0;
width: 32px; width: 28px;
height: 32px; height: 28px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
@include mobile-only { @include mobile-only {
width: 28px; width: 26px;
height: 28px; height: 26px;
} }
&--request { &--request {
@@ -513,13 +490,13 @@
} }
svg { svg {
width: 16px; width: 14px;
height: 16px; height: 14px;
fill: $white; fill: $white;
@include mobile-only { @include mobile-only {
width: 14px; width: 13px;
height: 14px; height: 13px;
} }
} }
} }
@@ -528,11 +505,11 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.35rem; gap: 0.25rem;
min-width: 0; min-width: 0;
@include mobile-only { @include mobile-only {
gap: 0.25rem; gap: 0.2rem;
} }
} }
@@ -540,11 +517,11 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 0.5rem; gap: 0.4rem;
} }
&__message { &__message {
font-size: 0.9rem; font-size: 0.85rem;
color: $text-color; color: $text-color;
line-height: 1.3; line-height: 1.3;
flex: 1; flex: 1;
@@ -552,7 +529,7 @@
overflow-wrap: break-word; overflow-wrap: break-word;
@include mobile-only { @include mobile-only {
font-size: 0.8rem; font-size: 0.78rem;
line-height: 1.25; line-height: 1.25;
} }
} }

107
src/components/admin/SystemStatusPanel.vue
View File

@@ -124,7 +124,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted } from "vue";
import IconActivity from "@/icons/IconActivity.vue"; import IconActivity from "@/icons/IconActivity.vue";
import IconClose from "@/icons/IconClose.vue"; import IconClose from "@/icons/IconClose.vue";
@@ -152,7 +152,6 @@
const systemItems = ref<SystemItem[]>([]); const systemItems = ref<SystemItem[]>([]);
const loading = ref(false); const loading = ref(false);
const selectedItem = ref<SystemItem | null>(null); const selectedItem = ref<SystemItem | null>(null);
let refreshInterval: number | null = null;
const getMetricClass = (value: number) => { const getMetricClass = (value: number) => {
if (value >= 90) return "metric__fill--critical"; if (value >= 90) return "metric__fill--critical";
@@ -238,29 +237,7 @@
alert(`Full logs for ${item.name} would open here`); alert(`Full logs for ${item.name} would open here`);
} }
function startAutoRefresh() { onMounted(fetchSystemStatus);
refreshInterval = window.setInterval(() => {
if (!loading.value && !selectedItem.value) {
fetchSystemStatus();
}
}, 30000);
}
function stopAutoRefresh() {
if (refreshInterval) {
clearInterval(refreshInterval);
refreshInterval = null;
}
}
onMounted(() => {
fetchSystemStatus();
startAutoRefresh();
});
onUnmounted(() => {
stopAutoRefresh();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -270,7 +247,7 @@
.system-status { .system-status {
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
@@ -287,41 +264,41 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.75rem;
@include mobile-only { @include mobile-only {
margin-bottom: 0.75rem; margin-bottom: 0.6rem;
} }
} }
&__title { &__title {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.1rem;
font-weight: 400; font-weight: 400;
color: $text-color; color: $text-color;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
@include mobile-only { @include mobile-only {
font-size: 1rem; font-size: 0.95rem;
} }
} }
&__loading { &__loading {
padding: 2rem; padding: 1.5rem;
text-align: center; text-align: center;
color: $text-color-70; color: $text-color-70;
@include mobile-only { @include mobile-only {
padding: 1.5rem; padding: 1rem;
font-size: 0.9rem; font-size: 0.85rem;
} }
} }
&__items { &__items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.6rem;
@include mobile-only { @include mobile-only {
gap: 0.5rem; gap: 0.5rem;
@@ -373,7 +350,7 @@
} }
.status-item { .status-item {
padding: 0.75rem; padding: 0.65rem;
background-color: var(--background-ui); background-color: var(--background-ui);
border-radius: 0.5rem; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
@@ -381,7 +358,7 @@
min-width: 0; min-width: 0;
@include mobile-only { @include mobile-only {
padding: 0.65rem; padding: 0.6rem;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -406,16 +383,17 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 0.25rem; margin-bottom: 0.2rem;
} }
&__name { &__name {
font-weight: 500; font-weight: 500;
color: $text-color; color: $text-color;
font-size: 0.95rem; font-size: 0.9rem;
line-height: 1.2;
@include mobile-only { @include mobile-only {
font-size: 0.85rem; font-size: 0.82rem;
} }
} }
@@ -469,43 +447,45 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
@include mobile-only { @include mobile-only {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 0.25rem; gap: 0.15rem;
margin-bottom: 0.35rem; margin-bottom: 0.3rem;
} }
} }
&__value { &__value {
font-size: 0.85rem; font-size: 0.8rem;
color: $text-color-70; color: $text-color-70;
line-height: 1.2;
@include mobile-only {
font-size: 0.8rem;
}
}
&__description {
font-size: 0.8rem;
color: $text-color-50;
@include mobile-only { @include mobile-only {
font-size: 0.75rem; font-size: 0.75rem;
} }
} }
&__metrics { &__description {
margin-top: 0.5rem; font-size: 0.75rem;
display: flex; color: $text-color-50;
flex-direction: column; line-height: 1.2;
gap: 0.5rem;
@include mobile-only { @include mobile-only {
margin-top: 0.35rem; font-size: 0.7rem;
gap: 0.35rem; }
}
&__metrics {
margin-top: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
@include mobile-only {
margin-top: 0.3rem;
gap: 0.3rem;
} }
} }
} }
@@ -513,17 +493,18 @@
.metric { .metric {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.4rem;
font-size: 0.75rem; font-size: 0.7rem;
&__label { &__label {
min-width: 70px; min-width: 65px;
color: $text-color-70; color: $text-color-70;
line-height: 1;
} }
&__bar { &__bar {
flex: 1; flex: 1;
height: 6px; height: 5px;
background-color: var(--background-40); background-color: var(--background-40);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;

18
src/components/admin/TorrentManagementGrid.vue
View File

@@ -306,9 +306,7 @@
); );
} }
onMounted(() => { onMounted(fetchTorrents);
fetchTorrents();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -318,7 +316,7 @@
.torrent-management { .torrent-management {
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 100%; max-width: 100%;
@@ -335,26 +333,26 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 0.75rem;
@include mobile-only { @include mobile-only {
gap: 0.75rem; gap: 0.6rem;
margin-bottom: 0.75rem; margin-bottom: 0.6rem;
} }
} }
&__title { &__title {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.1rem;
font-weight: 400; font-weight: 400;
color: $text-color; color: $text-color;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
@include mobile-only { @include mobile-only {
font-size: 1rem; font-size: 0.95rem;
width: 100%; width: 100%;
} }
} }

1
src/pages/AdminPage.vue
View File

@@ -44,6 +44,7 @@
font-size: 2rem; font-size: 2rem;
font-weight: 300; font-weight: 300;
color: $text-color; color: $text-color;
line-height: 1;
@include mobile-only { @include mobile-only {
font-size: 1.5rem; font-size: 1.5rem;