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:
parent
e59870a660
commit
1cb1f8ac6a
3 changed files with 4 additions and 28 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue