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

Improve console layout and update branding

Browse Source 
Updated CSS for better height management and responsiveness.
Adjusted `.console-container`, `.console-wrapper`, and `.console-output` for improved layout stability and overflow handling.
Set minimum heights for `.console-stats` and added padding for better spacing.
Changed title from "BITCOIN MINING TERMINAL v1.0" to "BTC OS LOG TERMINAL v1.0".
This commit is contained in:
DJObleezy 2025-04-12 13:44:30 -07:00
parent 898652b754
commit f718647966
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/console.css
View File

@ -81,14 +81,17 @@ body {
} }
} }
/* Update container to use specific heights rather than 100vh */
.console-container { .console-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh; /* Keep this */
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
background: transparent; background: transparent;
animation: flicker 4s infinite; animation: flicker 4s infinite;
/* Add this to ensure proper sizing */
box-sizing: border-box;
} }
.console-header { .console-header {
@ -110,6 +113,7 @@ body {
font-size: 18px; font-size: 18px;
} }
/* Update the wrapper to have a controlled height */
.console-wrapper { .console-wrapper {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@ -117,8 +121,13 @@ body {
scrollbar-color: var(--console-text) var(--console-bg); scrollbar-color: var(--console-text) var(--console-bg);
padding: 10px; padding: 10px;
max-width: 900px; max-width: 900px;
/*margin: 0 auto;*/ width: 100%; /* Add this */
margin: 0 auto; /* Uncomment this */
position: relative; position: relative;
/* Add these properties to control height */
max-height: calc(100vh - 150px); /* Adjust based on header + stats height */
min-height: 150px;
box-sizing: border-box;
} }
.console-wrapper::-webkit-scrollbar { .console-wrapper::-webkit-scrollbar {
@ -135,13 +144,19 @@ body {
box-shadow: 0 0 5px rgba(247, 147, 26, 0.8); box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
} }
/* Fix the console output positioning */
.console-output { .console-output {
font-size: 20px; font-size: 20px;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
position: absolute; /* Change from absolute to relative positioning */
bottom: 0; position: relative;
bottom: auto;
width: 100%; width: 100%;
height: 100%;
/* Add this for better spacing */
padding-bottom: 10px;
box-sizing: border-box;
} }
.console-line { .console-line {
@ -158,11 +173,16 @@ body {
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8); text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
} }
/* Ensure the stats bar has a fixed height */
.console-stats { .console-stats {
border-top: 1px solid var(--console-text); border-top: 1px solid var(--console-text);
padding: 15px; padding: 15px;
box-shadow: 0 0 15px rgba(247, 147, 26, 0.5); box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
background-color: var(--console-header); background-color: var(--console-header);
/* Add this to ensure it has a consistent height */
height: auto;
min-height: 80px;
box-sizing: border-box;
} }
.stats-container { .stats-container {

2
templates/console.html
View File

@ -15,7 +15,7 @@
{% block content %} {% block content %}
<div class="console-container"> <div class="console-container">
<div class="console-header"> <div class="console-header">
<div class="console-title">BITCOIN MINING TERMINAL v1.0</div> <div class="console-title">BTC OS LOG TERMINAL v1.0</div>
<div class="console-info"> <div class="console-info">
<span id="current-time">{{ current_time }}</span> <span id="current-time">{{ current_time }}</span>
<span class="blink">█</span> <span class="blink">█</span>