= 95 ? 'danger' : percentage >= 75 ? 'warning' : 'success';
+ },
async logout() {
if (!this.logoutTigger) {
this.logoutTigger = true;
@@ -8182,30 +8202,6 @@ export default {
this.tooltipText = 'Copy to clipboard';
}, 1500);
},
- getIconName(used, total) {
- const percentage = (used / total) * 100;
- let icon;
- if (percentage <= 60) {
- icon = 'battery-full';
- } else if (percentage > 60 && percentage <= 80) {
- icon = 'battery-half';
- } else {
- icon = 'battery';
- }
- return icon;
- },
- getIconColorStyle(used, total) {
- const percentage = (used / total) * 100;
- let color;
- if (percentage <= 60) {
- color = 'green';
- } else if (percentage > 60 && percentage <= 80) {
- color = 'yellow';
- } else {
- color = 'red';
- }
- return { color };
- },
sortNameFolder(a, b) {
return (a.isDirectory ? `..${a.name}` : a.name).localeCompare(b.isDirectory ? `..${b.name}` : b.name);
},
@@ -12415,24 +12411,23 @@ td .ellipsis-wrapper {
transition: color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}
-/* Main Container */
.container {
max-width: 1500px;
- width: 100%; /* Use full available width */
+ width: 100%;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
-/* Flexbox for container selection and refresh rate */
+
.flex-container2 {
height: 50%;
justify-content: space-between;
flex-wrap: nowrap;
padding: 0.5vw;
}
-/* Chart Grid */
+
.charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -12440,9 +12435,9 @@ td .ellipsis-wrapper {
width: 100%;
margin: 1vh;
}
-/* Chart Wrapper */
+
.chart-wrapper {
- padding: 10px; /* Adjust as needed */
+ padding: 10px;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
@@ -12455,44 +12450,62 @@ td .ellipsis-wrapper {
.chart-title-container {
align-items: center;
display: flex;
- margin-right: 10px; /* Odstęp między tytułem a wykresem */
+ margin-right: 10px;
}
.table-responsive {
- overflow-x: auto; /* Enable horizontal scrolling */
+ overflow-x: auto;
box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 0;
}
.table-monitoring {
- table-layout: auto; /* Fixes the table layout so columns don't shift */
- width: 100%; /* Take full width of the container */
+ table-layout: auto;
+ width: 100%;
}
.table-monitoring th, .table-monitoring td {
- white-space: nowrap; /* Prevent text from wrapping */
- border: none; /* Remove borders */
- background-color: transparent; /* Background color for cells */
+ white-space: nowrap;
+ border: none;
+ background-color: transparent;
}
.chart-title {
- margin-left: 8px; /* Odstęp między ikoną a tytułem */
+ margin-left: 8px;
font-size: 18px;
font-weight: bold;
}
.icon-large {
- font-size: 24px !important; /* Ensure this size takes priority */
+ font-size: 24px !important;
}
-/* Chart canvas responsiveness */
.chart-wrapper canvas {
max-width: 100%;
height: 100%;
}
-/* Adjust grid for smaller screens */
+.progress-container {
+ width: 150px;
+ height: 20px;
+ position: relative;
+ background-color: #6e6b7b;
+ transition: width 0.5s;
+ border-radius: 10px;
+}
+
+.progress-center-text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+ font-weight: bold;
+ z-index: 10;
+ pointer-events: none;
+}
+
@media (max-width: 1800px) {
.charts-grid {
grid-template-columns: 1fr;
@@ -12501,17 +12514,16 @@ td .ellipsis-wrapper {
}
}
-/* Ensure grid returns to original layout */
@media (min-width: 1800px) {
.charts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1vw;
}
- /* Wyśrodkowanie ostatniego elementu, jeśli liczba elementów jest nieparzysta */
+
.charts-grid > .chart-wrapper:nth-last-child(1):nth-child(odd) {
- grid-column: 1 / -1; /* Rozciągnij na całą szerokość */
- justify-self: center; /* Wyśrodkuj poziomo */
- width: 100%; /* Ogranicz szerokość do 50%, jeśli chcesz mniejszy element */
+ grid-column: 1 / -1;
+ justify-self: center;
+ width: 100%;
}
}
From 2d2f7e516ef946ed9ed6ee123daa1479c603ecd8 Mon Sep 17 00:00:00 2001
From: XK4MiLX <62837435+XK4MiLX@users.noreply.github.com>
Date: Mon, 21 Oct 2024 11:27:18 +0200
Subject: [PATCH 10/17] UI tweaks
---
HomeUI/src/views/apps/GlobalApps.vue | 46 +++++---
HomeUI/src/views/apps/LocalApps.vue | 108 ++++++++++++------
HomeUI/src/views/apps/Management.vue | 54 ++++++++-
.../src/views/components/myApps/Locations.vue | 9 +-
.../src/views/components/myApps/MyAppsTab.vue | 14 ++-
5 files changed, 171 insertions(+), 60 deletions(-)
diff --git a/HomeUI/src/views/apps/GlobalApps.vue b/HomeUI/src/views/apps/GlobalApps.vue
index da7fda343..418923442 100644
--- a/HomeUI/src/views/apps/GlobalApps.vue
+++ b/HomeUI/src/views/apps/GlobalApps.vue
@@ -150,13 +150,16 @@
/>
-
+
Application Information
+ style="margin-top: 2px;"
+ />
+ Application Information
+
-
+
Composition
+ style="margin-top: 2px;"
+ />
+ Composition
+
-
+
Locations
+ icon="pin-map-fill"
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Locations
+
-
+
Application Information
+ style="margin-top: 2px;"
+ />
+ Application Information
+
-
+
Composition
+ style="margin-top: 2px;"
+ />
+ Composition
+
-
+
Locations
+ icon="pin-map-fill"
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Locations
+
-
+
Application Information
+ style="margin-top: 2px;"
+ />
+ Application Information
+
-
+
Composition
+ style="margin-top: 2px;"
+ />
+ Composition
+
-
+
Locations
+ icon="pin-map-fill"
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Locations
+
-
+
Application Information
+ style="margin-top: 2px;"
+ />
+ Application Information
+
-
+
Composition
+ style="margin-top: 2px;"
+ />
+ Composition
+
-
+
Locations
+ icon="pin-map-fill"
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Locations
+
-
-
-
+
+ Global Applications
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Global Applications
+
@@ -1233,13 +1251,16 @@
-
+
Application Information
+ style="margin-top: 2px;"
+ />
+ Application Information
+
-
+
Composition
+ style="margin-top: 2px;"
+ />
+ Composition
+
-
+
Locations
+ icon="pin-map-fill"
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Locations
+
-
+
Application Information
+ style="margin-top: 2px;"
+ />
+ Application Information
+
-
+
Composition
+ style="margin-top: 2px;"
+ />
+ Composition
+
-
+
Locations
+ icon="pin-map-fill"
+ style="margin-top: 2px; margin-left: 10px;"
+ />
+ Locations
+
+
+ Used: ${usedStorage} GB
+
+
+ Total: ${totalStorage} GB
+
+
+ `;
},
usagePercentage() {
return (this.storage.used / this.storage.total) * 100;
@@ -12506,6 +12543,19 @@ td .ellipsis-wrapper {
pointer-events: none;
}
+#my-id .tooltip-inner {
+ background-color: transparent !important;
+ color: #333;
+ border: none !important;
+ box-shadow: none !important;
+ margin-right: 25px;
+ margin-top: 4px;
+}
+
+#my-id .arrow {
+ display: none !important;
+}
+
@media (max-width: 1800px) {
.charts-grid {
grid-template-columns: 1fr;
diff --git a/HomeUI/src/views/components/myApps/Locations.vue b/HomeUI/src/views/components/myApps/Locations.vue
index bca52c1f7..abec45b33 100644
--- a/HomeUI/src/views/components/myApps/Locations.vue
+++ b/HomeUI/src/views/components/myApps/Locations.vue
@@ -1,11 +1,14 @@