1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 19:26:48 +00:00

refactor(console): the console pages on Bootstrap classes instead of their own style blocks

The console pages carried style blocks for what Bootstrap 5.3 has:
- the page's column (flex, no padding, a #494949 background) is
  d-flex flex-column p-0 bg-dark; its height stays 100dvh inline, as
  vh-100 would run under a phone browser's bar;
- the VNC screen and the serial terminal fill the rest with
  flex-grow-1, the screen overflow-hidden, the terminal bg-black; their
  min-height: 0 stays inline (Bootstrap has no class for it);
- the rule centring the VNC canvas goes: noVNC centres its own canvas
  and draws its own background.
The unused main_container id goes with its style block.
This commit is contained in:
catborise 2026-10-27 19:45:47 +03:00
parent e59870a660
commit 1cb1f8ac6a
3 changed files with 4 additions and 28 deletions

View file

@ -12,32 +12,14 @@
{% with theme=app_settings.BOOTSTRAP_THEME|default:"zephyr" %}<link rel="stylesheet" href="{% static "css/themes/"|add:theme|add:".min.css" %}" id="wvc_css">{% endwith %}
<link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
<style>
#main_container {
padding: 0;
width: 100%;
max-width: none;
height: 100dvh;
display: flex;
flex-direction: column;
background-color: #494949;
}
#main_container canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
{% block head %}{% endblock %}
</head>
<body>
<div id="main_container">
{# the whole window, 100dvh: vh-100 would run under a phone browser's bar #}
<div class="d-flex flex-column p-0 bg-dark" style="height: 100dvh;">
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1" aria-label="{% trans "Console" %}">
<div class="container-fluid">
<span class="navbar-brand py-0">{{ instance.name }}</span>

View file

@ -3,9 +3,6 @@
{% load static %}
{% block head %}
<style>
#screen { flex: 1 1 auto; min-height: 0; overflow: hidden; }
</style>
{{ vnc|json_script:"vnc-config" }}
{{ layouts|json_script:"keyboard-layouts" }}
<script type="module" src="{% static "js/console_vnc.js" %}"></script>
@ -66,7 +63,7 @@
{% endblock %}
{% block content %}
<div id="screen"></div>
<div id="screen" class="flex-grow-1 overflow-hidden" style="min-height: 0;"></div>
<textarea id="keyboard_input" class="visually-hidden" autocapitalize="off" autocomplete="off"
spellcheck="false" tabindex="-1" aria-label="{% trans "Keyboard" %}"></textarea>

View file

@ -7,9 +7,6 @@
<script src="{% static 'js/xterm/xterm.js' %}"></script>
<script src="{% static 'js/xterm/addon-fit.js' %}"></script>
<script src="{% static 'js/socket.io.js' %}"></script>
<style>
#terminal { flex: 1 1 auto; min-height: 0; background: #000; }
</style>
{{ token|json_script:"serial-token" }}
<script type="module" src="{% static "js/console_serial.js" %}"></script>
{% endblock %}
@ -29,5 +26,5 @@
{% endblock %}
{% block content %}
<div id="terminal"></div>
<div id="terminal" class="flex-grow-1 bg-black" style="min-height: 0;"></div>
{% endblock %}