Cyber/peartainer
1
0
Fork 0
forked from snxraven/peardock
Code Pull Requests Activity

better table

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
index.html
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;
@ -79,13 +80,17 @@
#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;
/* Leave space for the sidebar */
flex: 1;
/* Allow the content to grow */
padding: 30px; padding: 30px;
overflow-y: auto; /* Allow scrolling if content overflows */ overflow-y: auto;
/* Allow scrolling if content overflows */
position: relative; position: relative;
} }
#sidebar.collapsed~#content { #sidebar.collapsed~#content {
margin-left: 50px; margin-left: 50px;
@ -170,8 +175,32 @@
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;
/* Ensure it's hidden by default */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -181,7 +210,7 @@
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75);
z-index: 1050; z-index: 1050;
} }
#status-indicator .spinner-border { #status-indicator .spinner-border {
width: 3rem; width: 3rem;
@ -196,105 +225,144 @@
#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;
/* Center content horizontally */
text-align: center;
/* Center-align text */
position: absolute;
/* Overlay it over the content area */
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); /* Center it perfectly in the content */ transform: translate(-50%, -50%);
max-width: 800px; /* Restrict the width of the welcome page */ /* Center it perfectly in the content */
width: 100%; /* Allow it to scale */ max-width: 800px;
/* Restrict the width of the welcome page */
width: 100%;
/* Allow it to scale */
padding: 20px; padding: 20px;
background-color: transparent; /* Match the theme */ 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 { }
#alert-container {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
z-index: 1055; /* Ensure it overlays other elements */ z-index: 1055;
/* Ensure it overlays other elements */
display: flex; display: flex;
flex-direction: column-reverse; /* Stack alerts upwards */ flex-direction: column-reverse;
gap: 10px; /* Add space between alerts */ /* Stack alerts upwards */
} gap: 10px;
/* Add space between alerts */
}
.alert { .alert {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
max-width: 80%; /* Ensure the alert doesn't stretch too wide */ max-width: 80%;
padding: 12px 20px; /* Adjust padding for a more balanced look */ /* Ensure the alert doesn't stretch too wide */
background-color: #2b2b2b; /* Slightly lighter background for better contrast */ padding: 12px 20px;
color: #e0e0e0; /* Softer white text for readability */ /* Adjust padding for a more balanced look */
border-radius: 6px; /* Round corners for a modern look */ background-color: #2b2b2b;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add subtle shadow for depth */ /* 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-family: Arial, sans-serif;
font-size: 14px; /* Adjust font size for readability */ font-size: 14px;
/* Adjust font size for readability */
animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards; animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
white-space: nowrap; /* Prevent text wrapping */ white-space: nowrap;
overflow: hidden; /* Hide overflow for long text */ /* Prevent text wrapping */
text-overflow: ellipsis; /* Add ellipsis for overflowed text */ overflow: hidden;
} /* Hide overflow for long text */
text-overflow: ellipsis;
/* Add ellipsis for overflowed text */
}
.alert.success { .alert.success {
border-left: 6px solid #28a745; /* Green border for success */ border-left: 6px solid #28a745;
} /* Green border for success */
}
.alert.danger { .alert.danger {
border-left: 6px solid #dc3545; /* Red border for danger */ border-left: 6px solid #dc3545;
} /* Red border for danger */
}
.alert .close-btn { .alert .close-btn {
background: none; background: none;
border: none; border: none;
color: #e0e0e0; /* Use the same text color for consistency */ color: #e0e0e0;
/* Use the same text color for consistency */
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
margin-left: 15px; /* Space between text and close button */ margin-left: 15px;
} /* Space between text and close button */
}
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes fadeOut { @keyframes fadeOut {
0% { 0% {
opacity: 1; opacity: 1;
} }
90% { 90% {
opacity: 0.3; opacity: 0.3;
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
} }
</style> </style>
</head> </head>
@ -325,6 +393,7 @@
</div> </div>
<div id="dashboard" class="hidden"> <div id="dashboard" class="hidden">
<h2>Containers</h2> <h2>Containers</h2>
<div class="table-responsive">
<table class="table table-dark table-striped"> <table class="table table-dark table-striped">
<thead> <thead>
<tr> <tr>
@ -341,6 +410,7 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<!-- Duplicate Container Modal --> <!-- Duplicate Container Modal -->
@ -425,13 +495,13 @@
<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> </div>
<p class="mt-3 text-light">Processing...</p> <p class="mt-3 text-light">Processing...</p>
</div> </div>
</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"

4
package.json
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",