better table
This commit is contained in:
Raven Scott
parent
830d72608b
commit
0a31b03601
340
index.html
340
index.html
@ -22,9 +22,10 @@
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
-webkit-app-region: drag;
|
||||
@ -78,14 +79,18 @@
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-direction: column; /* Keep vertical stacking for child elements */
|
||||
margin-left: 250px; /* Leave space for the sidebar */
|
||||
flex: 1; /* Allow the content to grow */
|
||||
padding: 30px;
|
||||
overflow-y: auto; /* Allow scrolling if content overflows */
|
||||
position: relative;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Keep vertical stacking for child elements */
|
||||
margin-left: 250px;
|
||||
/* Leave space for the sidebar */
|
||||
flex: 1;
|
||||
/* Allow the content to grow */
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
/* Allow scrolling if content overflows */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidebar.collapsed~#content {
|
||||
margin-left: 50px;
|
||||
@ -170,18 +175,42 @@
|
||||
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 {
|
||||
display: none; /* Ensure it's hidden by default */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1050;
|
||||
}
|
||||
display: none;
|
||||
/* Ensure it's hidden by default */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
#status-indicator .spinner-border {
|
||||
width: 3rem;
|
||||
@ -195,106 +224,145 @@
|
||||
}
|
||||
|
||||
#welcome-page {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack child elements vertically */
|
||||
justify-content: center; /* Center content vertically */
|
||||
align-items: center; /* Center content horizontally */
|
||||
text-align: center; /* Center-align text */
|
||||
position: absolute; /* Overlay it over the content area */
|
||||
top: 50%;
|
||||
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 */
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Stack child elements vertically */
|
||||
justify-content: center;
|
||||
/* Center content vertically */
|
||||
align-items: center;
|
||||
/* Center content horizontally */
|
||||
text-align: center;
|
||||
/* Center-align text */
|
||||
position: absolute;
|
||||
/* Overlay it over the content area */
|
||||
top: 50%;
|
||||
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 {
|
||||
display: none !important; /* Completely hide when not needed */
|
||||
}
|
||||
#welcome-page.hidden {
|
||||
display: none !important;
|
||||
/* Completely hide when not needed */
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
display: flex; /* Use flex layout for content within the dashboard */
|
||||
flex-direction: column; /* Stack elements vertically */
|
||||
flex: 1; /* Ensure it uses all available space */
|
||||
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 {
|
||||
display: flex;
|
||||
/* Use flex layout for content within the dashboard */
|
||||
flex-direction: column;
|
||||
/* Stack elements vertically */
|
||||
flex: 1;
|
||||
/* Ensure it uses all available space */
|
||||
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 {
|
||||
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 */
|
||||
}
|
||||
#dashboard.hidden {
|
||||
display: none !important;
|
||||
/* Hide the dashboard completely when not needed */
|
||||
}
|
||||
|
||||
.alert {
|
||||
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-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.success {
|
||||
border-left: 6px solid #28a745; /* Green border for success */
|
||||
}
|
||||
.alert {
|
||||
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 {
|
||||
border-left: 6px solid #dc3545; /* Red border for danger */
|
||||
}
|
||||
.alert.success {
|
||||
border-left: 6px solid #28a745;
|
||||
/* Green border for success */
|
||||
}
|
||||
|
||||
.alert .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #e0e0e0; /* Use the same text color for consistency */
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-left: 15px; /* Space between text and close button */
|
||||
}
|
||||
.alert.danger {
|
||||
border-left: 6px solid #dc3545;
|
||||
/* Red border for danger */
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.alert .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
/* Use the same text color for consistency */
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
/* Space between text and close button */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -325,23 +393,25 @@
|
||||
</div>
|
||||
<div id="dashboard" class="hidden">
|
||||
<h2>Containers</h2>
|
||||
<table class="table table-dark table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Image</th>
|
||||
<th>Status</th>
|
||||
<th>CPU (%)</th>
|
||||
<th>Memory (MB)</th>
|
||||
<th>IP Address</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="container-list"></tbody>
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Image</th>
|
||||
<th>Status</th>
|
||||
<th>CPU (%)</th>
|
||||
<th>Memory (MB)</th>
|
||||
<th>IP Address</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="container-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Duplicate Container Modal -->
|
||||
<div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel" aria-hidden="true">
|
||||
@ -423,15 +493,15 @@
|
||||
|
||||
<!-- Status Indicator Overlay -->
|
||||
<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"
|
||||
style="display: none; z-index: 1050;">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
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;">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-light">Processing...</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3 text-light">Processing...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Container -->
|
||||
<div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3"
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
"type": "desktop",
|
||||
"gui": {
|
||||
"backgroundColor": "#1F2430",
|
||||
"height": "540",
|
||||
"width": "720"
|
||||
"height": "400",
|
||||
"width": "950"
|
||||
},
|
||||
"links": [
|
||||
"http://127.0.0.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user