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

refactor(templates): the page width, headings and paragraphs as Bootstrap sets them

Three upstream rules in webvirtcloud.css set every page's layout
against Bootstrap 5.3:
- .container { max-width: 900px } held each page to 900px at any
  screen width, below Bootstrap's own widths. Pages now take
  Bootstrap's container widths up to its lg one, 960px, and stop
  there on wider screens: its xl and xxl widths (1140px, 1320px) leave
  the panel's forms and lists too wide;
- .page-header (margins of 5px 5px 20px 20px) put headings 20px right
  of the content under them; its 14 uses are mb-3, flush with the
  content (one carried Bootstrap 4's mr-auto, now me-auto);
- p { margin: 10px } indented every paragraph 10px from the content
  beside it; paragraphs take Bootstrap's own bottom margin.
webvirtcloud.css keeps only what Bootstrap has no utility for: the
page width cap, the XML editor's place and height, the Tom Select
colour fix, the sortable table headers' arrows, the grouped VM list's
collapsed hosts and the charts' height.
This commit is contained in:
catborise 2026-10-27 17:58:59 +03:00
parent faa6e4bb14
commit 965cf0080c
10 changed files with 20 additions and 27 deletions

View file

@ -4,14 +4,12 @@
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Global Styles */
.container {
max-width: 900px;
}
.page-header {
margin: 5px 5px 20px 20px;
/* pages stop at Bootstrap's lg container width (960px): its xl and xxl
widths (1140px, 1320px) leave the panel's forms and lists too wide */
@media (min-width: 1200px) {
.container {
max-width: 960px;
}
}
#editor {
@ -62,11 +60,6 @@ th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
display: none;
}
p {
display: block;
margin: 10px 10px 10px 10px;
}
/* a live chart (static/js/charts.js) fills the width of its card at this height */
.chart {
height: 160px;