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

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

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

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

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

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

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

1
src/pages/AdminPage.vue
View File

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