Retropex/custom-ocean.xyz-dashboard
1
0
Fork 0
mirror of https://github.com/Retropex/custom-ocean.xyz-dashboard.git synced 2025-05-13 03:30:46 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adjust console layout for improved responsiveness

Browse Source 
Modified `console.css` to change body and container heights for better spacing. Added maximum height and margins to `.console-container`. Updated `.console-wrapper` to have a calculated height based on available space.

Introduced `adjustConsoleLayout` function in `console.js` to dynamically adjust wrapper height based on viewport size, ensuring consistent layout on load and resize.
This commit is contained in:
DJObleezy 2025-04-12 13:58:59 -07:00
parent a60d21521d
commit 60d716f429
2 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/css/console.css
View File

@ -11,6 +11,7 @@
--terminal-glow: 0 0 10px rgba(247, 147, 26, 0.4); --terminal-glow: 0 0 10px rgba(247, 147, 26, 0.4);
} }
/* Adjust the height of the body to allow space for other elements */
body { body {
background: var(--console-bg-gradient); background: var(--console-bg-gradient);
color: var(--console-text); color: var(--console-text);
@ -21,7 +22,8 @@ body {
line-height: 1.4; line-height: 1.4;
overflow-x: hidden; overflow-x: hidden;
text-shadow: var(--terminal-glow); text-shadow: var(--terminal-glow);
height: 100vh; height: auto; /* Changed from 100vh to auto */
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -81,15 +83,17 @@ body {
} }
} }
/* Fix the console container to use the full viewport */ /* Fix the console container to use a controlled height */
.console-container { .console-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 50vh; /* Change from 100vh to 50vh to make it half height */
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
background: transparent; background: transparent;
animation: flicker 4s infinite; animation: flicker 4s infinite;
margin: 20px auto; /* Add some margin top and bottom */
max-height: 500px; /* Add a maximum height */
} }
.console-header { .console-header {
@ -113,7 +117,7 @@ body {
/* Fix the console wrapper to be a controlled height */ /* Fix the console wrapper to be a controlled height */
.console-wrapper { .console-wrapper {
flex: 0 1 auto; /* Don't allow this to grow arbitrarily */ flex: 0 1 auto;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--console-text) var(--console-bg); scrollbar-color: var(--console-text) var(--console-bg);
@ -123,6 +127,9 @@ body {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--console-bg); background-color: var(--console-bg);
/* Control the height precisely */
height: calc(100% - 130px); /* Account for header and footer height */
min-height: 150px; /* Set a minimum height */
} }
.console-wrapper::-webkit-scrollbar { .console-wrapper::-webkit-scrollbar {

33
static/js/console.js
View File

@ -473,35 +473,32 @@ function generateRandomHex(length) {
return result; return result;
} }
// Add this function to your console.js file - this will fix the layout issue /**
* Adjust console layout to ensure proper proportions
*/
function adjustConsoleLayout() { function adjustConsoleLayout() {
// Get the elements
const container = document.querySelector('.console-container'); const container = document.querySelector('.console-container');
const header = document.querySelector('.console-header'); const header = document.querySelector('.console-header');
const stats = document.querySelector('.console-stats'); const stats = document.querySelector('.console-stats');
const wrapper = document.querySelector('.console-wrapper'); const wrapper = document.querySelector('.console-wrapper');
const output = document.querySelector('.console-output');
if (container && header && stats && wrapper && output) { if (container && header && stats && wrapper) {
// Calculate available height for the wrapper // Calculate the proper height for wrapper
const viewportHeight = window.innerHeight; const containerHeight = container.clientHeight;
const headerHeight = header.offsetHeight; const headerHeight = header.clientHeight;
const statsHeight = stats.offsetHeight; const statsHeight = stats.clientHeight;
const wrapperHeight = viewportHeight - headerHeight - statsHeight - 2; // 2px for borders
// Apply the calculated height to the wrapper // Set the wrapper height to fill the space between header and stats
wrapper.style.height = `${wrapperHeight}px`; const wrapperHeight = containerHeight - headerHeight - statsHeight;
wrapper.style.maxHeight = `${wrapperHeight}px`; wrapper.style.height = `${Math.max(wrapperHeight, 150)}px`; // Min height of 150px
wrapper.style.position = 'relative';
// Make the output relative instead of absolute
output.style.position = 'relative';
output.style.bottom = 'auto';
} }
} }
// Call the function on load and whenever the window is resized // Add this to your document.addEventListener('DOMContentLoaded',...) function
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Existing code...
// Add layout adjustment
adjustConsoleLayout(); adjustConsoleLayout();
window.addEventListener('resize', adjustConsoleLayout); window.addEventListener('resize', adjustConsoleLayout);
}); });