Retropex/custom-ocean.xyz-dashboard
1
0
Fork 0
mirror of https://github.com/Retropex/custom-ocean.xyz-dashboard.git synced 2025-05-12 19:20:45 +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);
}
/* Adjust the height of the body to allow space for other elements */
body {
background: var(--console-bg-gradient);
color: var(--console-text);
@ -21,7 +22,8 @@ body {
line-height: 1.4;
overflow-x: hidden;
text-shadow: var(--terminal-glow);
height: 100vh;
height: auto; /* Changed from 100vh to auto */
min-height: 100vh;
display: flex;
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 {
display: flex;
flex-direction: column;
height: 100vh;
height: 50vh; /* Change from 100vh to 50vh to make it half height */
width: 100%;
max-width: 100%;
background: transparent;
animation: flicker 4s infinite;
margin: 20px auto; /* Add some margin top and bottom */
max-height: 500px; /* Add a maximum height */
}
.console-header {
@ -113,7 +117,7 @@ body {
/* Fix the console wrapper to be a controlled height */
.console-wrapper {
flex: 0 1 auto; /* Don't allow this to grow arbitrarily */
flex: 0 1 auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--console-text) var(--console-bg);
@ -123,6 +127,9 @@ body {
position: relative;
box-sizing: border-box;
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 {

33
static/js/console.js
View File

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