better table

This commit is contained in:
Raven Scott 2024-11-29 23:37:39 -05:00
parent 830d72608b
commit 0a31b03601
2 changed files with 207 additions and 137 deletions

View File

@ -22,9 +22,10 @@
color: white; color: white;
overflow: hidden; overflow: hidden;
} }
.hidden { .hidden {
display: none !important; display: none !important;
} }
#titlebar { #titlebar {
-webkit-app-region: drag; -webkit-app-region: drag;
@ -78,14 +79,18 @@
} }
#content { #content {
display: flex; display: flex;
flex-direction: column; /* Keep vertical stacking for child elements */ flex-direction: column;
margin-left: 250px; /* Leave space for the sidebar */ /* Keep vertical stacking for child elements */
flex: 1; /* Allow the content to grow */ margin-left: 250px;
padding: 30px; /* Leave space for the sidebar */
overflow-y: auto; /* Allow scrolling if content overflows */ flex: 1;
position: relative; /* Allow the content to grow */
} padding: 30px;
overflow-y: auto;
/* Allow scrolling if content overflows */
position: relative;
}
#sidebar.collapsed~#content { #sidebar.collapsed~#content {
margin-left: 50px; margin-left: 50px;
@ -170,18 +175,42 @@
cursor: pointer; cursor: pointer;
} }
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Enable smooth scrolling on touch devices */
}
.table th,
.table td {
white-space: nowrap;
/* Prevent table cells from wrapping text */
}
@media (max-width: 768px) {
.table th,
.table td {
font-size: 0.9rem;
/* Adjust font size for smaller screens */
padding: 0.5rem;
/* Reduce padding */
}
}
#status-indicator { #status-indicator {
display: none; /* Ensure it's hidden by default */ display: none;
position: fixed; /* Ensure it's hidden by default */
top: 0; position: fixed;
left: 0; top: 0;
width: 100%; left: 0;
height: 100%; width: 100%;
align-items: center; height: 100%;
justify-content: center; align-items: center;
background-color: rgba(0, 0, 0, 0.75); justify-content: center;
z-index: 1050; background-color: rgba(0, 0, 0, 0.75);
} z-index: 1050;
}
#status-indicator .spinner-border { #status-indicator .spinner-border {
width: 3rem; width: 3rem;
@ -195,106 +224,145 @@
} }
#welcome-page { #welcome-page {
display: flex; display: flex;
flex-direction: column; /* Stack child elements vertically */ flex-direction: column;
justify-content: center; /* Center content vertically */ /* Stack child elements vertically */
align-items: center; /* Center content horizontally */ justify-content: center;
text-align: center; /* Center-align text */ /* Center content vertically */
position: absolute; /* Overlay it over the content area */ align-items: center;
top: 50%; /* Center content horizontally */
left: 50%; text-align: center;
transform: translate(-50%, -50%); /* Center it perfectly in the content */ /* Center-align text */
max-width: 800px; /* Restrict the width of the welcome page */ position: absolute;
width: 100%; /* Allow it to scale */ /* Overlay it over the content area */
padding: 20px; top: 50%;
background-color: transparent; /* Match the theme */ left: 50%;
} transform: translate(-50%, -50%);
/* Center it perfectly in the content */
max-width: 800px;
/* Restrict the width of the welcome page */
width: 100%;
/* Allow it to scale */
padding: 20px;
background-color: transparent;
/* Match the theme */
}
#welcome-page.hidden { #welcome-page.hidden {
display: none !important; /* Completely hide when not needed */ display: none !important;
} /* Completely hide when not needed */
}
#dashboard { #dashboard {
display: flex; /* Use flex layout for content within the dashboard */ display: flex;
flex-direction: column; /* Stack elements vertically */ /* Use flex layout for content within the dashboard */
flex: 1; /* Ensure it uses all available space */ flex-direction: column;
width: 100%; /* Take up the full width of the content area */ /* Stack elements vertically */
padding: 0; /* Remove extra padding */ flex: 1;
overflow-y: auto; /* Allow vertical scrolling if needed */ /* Ensure it uses all available space */
position: relative; /* Prevent overlap with other elements */ width: 100%;
} /* Take up the full width of the content area */
padding: 0;
/* Remove extra padding */
overflow-y: auto;
/* Allow vertical scrolling if needed */
position: relative;
/* Prevent overlap with other elements */
}
#dashboard.hidden { #dashboard.hidden {
display: none !important; /* Hide the dashboard completely when not needed */ display: none !important;
} /* Hide the dashboard completely when not needed */
#alert-container { }
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1055; /* Ensure it overlays other elements */
display: flex;
flex-direction: column-reverse; /* Stack alerts upwards */
gap: 10px; /* Add space between alerts */
}
.alert { #alert-container {
display: flex; position: fixed;
align-items: center; bottom: 20px;
justify-content: space-between; right: 20px;
max-width: 80%; /* Ensure the alert doesn't stretch too wide */ z-index: 1055;
padding: 12px 20px; /* Adjust padding for a more balanced look */ /* Ensure it overlays other elements */
background-color: #2b2b2b; /* Slightly lighter background for better contrast */ display: flex;
color: #e0e0e0; /* Softer white text for readability */ flex-direction: column-reverse;
border-radius: 6px; /* Round corners for a modern look */ /* Stack alerts upwards */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add subtle shadow for depth */ gap: 10px;
font-family: Arial, sans-serif; /* Add space between alerts */
font-size: 14px; /* Adjust font size for readability */ }
animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
white-space: nowrap; /* Prevent text wrapping */
overflow: hidden; /* Hide overflow for long text */
text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}
.alert.success { .alert {
border-left: 6px solid #28a745; /* Green border for success */ display: flex;
} align-items: center;
justify-content: space-between;
max-width: 80%;
/* Ensure the alert doesn't stretch too wide */
padding: 12px 20px;
/* Adjust padding for a more balanced look */
background-color: #2b2b2b;
/* Slightly lighter background for better contrast */
color: #e0e0e0;
/* Softer white text for readability */
border-radius: 6px;
/* Round corners for a modern look */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
/* Add subtle shadow for depth */
font-family: Arial, sans-serif;
font-size: 14px;
/* Adjust font size for readability */
animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
white-space: nowrap;
/* Prevent text wrapping */
overflow: hidden;
/* Hide overflow for long text */
text-overflow: ellipsis;
/* Add ellipsis for overflowed text */
}
.alert.danger { .alert.success {
border-left: 6px solid #dc3545; /* Red border for danger */ border-left: 6px solid #28a745;
} /* Green border for success */
}
.alert .close-btn { .alert.danger {
background: none; border-left: 6px solid #dc3545;
border: none; /* Red border for danger */
color: #e0e0e0; /* Use the same text color for consistency */ }
font-size: 16px;
cursor: pointer;
margin-left: 15px; /* Space between text and close button */
}
@keyframes fadeIn { .alert .close-btn {
from { background: none;
opacity: 0; border: none;
transform: translateY(10px); color: #e0e0e0;
} /* Use the same text color for consistency */
to { font-size: 16px;
opacity: 1; cursor: pointer;
transform: translateY(0); margin-left: 15px;
} /* Space between text and close button */
} }
@keyframes fadeOut { @keyframes fadeIn {
0% { from {
opacity: 1; opacity: 0;
} transform: translateY(10px);
90% { }
opacity: 0.3;
} to {
100% { opacity: 1;
opacity: 0; transform: translateY(0);
transform: translateY(10px); }
} }
}
@keyframes fadeOut {
0% {
opacity: 1;
}
90% {
opacity: 0.3;
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
</style> </style>
</head> </head>
@ -325,20 +393,22 @@
</div> </div>
<div id="dashboard" class="hidden"> <div id="dashboard" class="hidden">
<h2>Containers</h2> <h2>Containers</h2>
<table class="table table-dark table-striped"> <div class="table-responsive">
<thead> <table class="table table-dark table-striped">
<tr> <thead>
<th>Name</th> <tr>
<th>Image</th> <th>Name</th>
<th>Status</th> <th>Image</th>
<th>CPU (%)</th> <th>Status</th>
<th>Memory (MB)</th> <th>CPU (%)</th>
<th>IP Address</th> <th>Memory (MB)</th>
<th>Actions</th> <th>IP Address</th>
</tr> <th>Actions</th>
</thead> </tr>
<tbody id="container-list"></tbody> </thead>
</table> <tbody id="container-list"></tbody>
</table>
</div>
</div> </div>
</div> </div>
@ -423,15 +493,15 @@
<!-- Status Indicator Overlay --> <!-- Status Indicator Overlay -->
<div id="status-indicator" <div id="status-indicator"
class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-75" class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-75"
style="display: none; z-index: 1050;"> style="display: none; z-index: 1050;">
<div class="text-center"> <div class="text-center">
<div class="spinner-border text-light" role="status"> <div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-light">Processing...</p>
</div>
</div> </div>
<p class="mt-3 text-light">Processing...</p>
</div>
</div>
<!-- Alert Container --> <!-- Alert Container -->
<div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3" <div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3"

View File

@ -6,8 +6,8 @@
"type": "desktop", "type": "desktop",
"gui": { "gui": {
"backgroundColor": "#1F2430", "backgroundColor": "#1F2430",
"height": "540", "height": "400",
"width": "720" "width": "950"
}, },
"links": [ "links": [
"http://127.0.0.1", "http://127.0.0.1",