From 1d7db58bf259fd234cbebad14ca10c8a48249906 Mon Sep 17 00:00:00 2001 From: Daniel Quathamer Date: Mon, 13 Oct 2025 09:38:50 +0200 Subject: [PATCH] =?UTF-8?q?Verbesserung=20Dashboard=20Responsivit=C3=A4t?= =?UTF-8?q?=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- superx/style/sx_viz_muster.css | 374 +++++++++++++++- superx/xml/viz_components.xsl | 501 ++++------------------ superx/xml/viz_html_chart_viewer_grid.xsl | 5 +- 3 files changed, 449 insertions(+), 431 deletions(-) diff --git a/superx/style/sx_viz_muster.css b/superx/style/sx_viz_muster.css index 5ba6b8e..05e1096 100644 --- a/superx/style/sx_viz_muster.css +++ b/superx/style/sx_viz_muster.css @@ -1,17 +1,28 @@ /*dateispezifische Basics*/ +html, body { + height: auto; + min-height: 100vh; + overflow-x: auto; + overflow-y: auto; +} + .hero-body { margin-left: 1.5em; } /*Abstand zum Burger-Button*/ .title, .subtitle { /*für Seitentitel*/ margin-left: 0.4em; margin-top: 0%; } - + +.columns { + display: flex; + flex-wrap: wrap; } + .card { /*für Cardposition, -style*/ display: flex; flex-flow: column; margin-left: 0em; /*1.5em bei farbigem Hintergrund*/ margin-top: 0em; /*-1.2em bei farbigem Hintergrund*/ box-shadow: none; } - + /*Buttonleiste, Legende*/ .legende { /*für Berichtslegende*/ margin-left: 0.15em; @@ -32,8 +43,7 @@ margin-top: 0.4em; } .control-new { /*für einheitliche Controlbreite*/ - width: 17.0em; - } + width: 17.0em; } .tabs { font-family: sans-serif; @@ -42,6 +52,42 @@ .tabs { /*für Tab-Namen*/ font-size: 2rem; } +.grid { /*20250917 eingefügt*/ + display: flex; + flex-wrap: wrap; } /*erlaubt Umbruch'*/ + +/*20251007 eingefügt*/ +.fullwidth-grid { + width: 100vw; /* gesamte Viewport-Breite */ + padding-right: 2em; } + +.dashboard-tabs { /*20250917 eingefügt*/ + display: flex; + flex-wrap: wrap; /* erlaubt Umbruch */ + list-style: none; + margin: 1rem; + padding: 0; + cursor: pointer; } + +.dashboard-tabs li { /*20250917 eingefügt*/ + flex: 1 1 auto; /* alle Tabs gleich breit, aber flexibel */ + text-align: center; + border: 1px solid #ccc; + background: #f9f9f9; } + +.dashboard-tabs li a { /*20250917 eingefügt*/ + display: block; + text-decoration: none; + font-weight: bold; + color: #333; } + +.dashboard-tabs li a:hover, .dashboard-tabs li a:focus { /*20250917 eingefügt*/ + background: #e0e0e0; } + +.dashboard-tabs li.is-active { /*20251007 eingefügt*/ + background: #ebf1f3; + color: midnightblue; } + .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { font-size: 0.8rem; color: black; } @@ -66,4 +112,322 @@ border-radius: 8px; pointer-events: none; } - +.dojoDialog {background : #eee; border : 1px solid #999;-moz-border-radius : 5px;padding : 4px;width:650;height:420px;overflow:scroll} + +.treebutton { + border:none; + margin: 0 4px 0 0; + } + +/*Cockpit-Header*/ +.hs_header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 20; /*positioniert sich im flow am nähesten zum Betrachter*/ + background-color:white; + padding-top: 3rem; } + +.hs_header_box1 { /*für Balken-Box über/unter Cockpittitel*/ + background: white; + height: 1.0rem; + color: black; } + +.hs_header_box2 { /*für Logo-/Cockpittitel-Box*/ + display: flex; + /* height: 4.0rem;*/ + padding: 0.3rem 17.0rem 0rem 9.0rem; /*für Padding: ob re un li*/ + align-items: left; /*für vertikale Ausrichtung d Elemente*/ + /*justify-content: space-between;*/ /*für gleichm. Leerraum zw. Elementen*/ + background-color: #004c93; } + +.cockpit_title { + color: white; + font-size: 2rem; + font-weight: 800; + background-color: #004c93; + padding-left:20px; } + +.vizTitle { + margin-left: 0.8em; + margin-right: 0.8em; + white-space: normal; + word-wrap: normal; + overflow-wrap: break-word; + hyphens: auto; + text-align: center; + font-size:1.2em; + font-weight:bolder; + color: midnightblue; + background: #ebf1f3; } + +.navbar {background-color: white;} /*20250221 eingefügt*/ +.navbar-item img, .navbar-item svg { /*20250221 eingefügt*/ + max-height: unset !important; } /*var(--bulma-navbar-item-img-max-height);*/ + +/*Media-queries**/ +@media print{ +.dontprint {display:none;} +} + +/* 20250919 eingefügt: bis 769px: mobile; ab 769px: tablet and up; ab 1024px: desctop an up */ +@media (max-width: 403px) { + .columns { padding-top: 2.5rem; } + .grid { padding-top: 18.5rem; } +} + +@media (min-width: 404px) and (max-width: 468px) { + .grid { padding-top: 17rem; } +} + +@media (min-width: 469px) and (max-width: 473px) { + .grid { padding-top: 15.5rem; } +} + +@media (min-width: 474px) and (max-width: 549px) { + .grid { padding-top: 14rem; } +} + +@media (min-width: 550px) and (max-width: 552px) { + .grid { padding-top: 12rem; } +} + +@media (min-width: 553px) and (max-width: 576px) { + .grid { padding-top: 10.5rem; } +} + +@media (min-width: 577px) and (max-width: 636px) { + .grid { padding-top: 7.5rem; } +} +@media (min-width: 637px) and (max-width: 917px) { + .grid { padding-top: 6rem; } +} + +@media (min-width: 918px) and (max-width: 927px) { + .grid { padding-top: 5rem; } +} + +@media (min-width: 928px) and (max-width: 1644px) { + .grid { padding-top: 3rem; } +} + +@media (min-width: 1645px) { + .grid { padding-top: 1.5rem; } +} + +.buttons-container { /* 300425BF eingefügt*/ + display: flex; + justify-content: flex-end; /* rechts ausrichten */ + align-items: center; /* vertikal zentrieren */ + flex-wrap: wrap; /* für kleine Viewports */ + padding-top: 1.0rem; +} + +.button.is-link { + background-color: white; /*link-Blau:#3273dc; UDE-Blau:#004C93*/ + border-color: transparent; + color: #004C93; } +.button.is-link:hover, .button.is-link.is-hovered { + background-color: #276cda; + border-color: transparent; + color: #004C93; } +.button.is-link:focus, .button.is-link.is-focused { + border-color: transparent; + color: #004C93; } +.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } +.button.is-link:active, .button.is-link.is-active { + background-color: white; + border-color: transparent; + color: #004C93; } +.button.is-link[disabled], + fieldset[disabled] .button.is-link { + background-color: #004C93; + border-color: transparent; + box-shadow: none; } +.button.is-link.is-inverted { + background-color: #fff; + color: #004C93; } +.button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { + background-color: #f2f2f2; } +.button.is-link.is-inverted[disabled], + fieldset[disabled] .button.is-link.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #004C93; } +.button.is-link.is-loading::after { + border-color: transparent transparent #fff #fff !important; } +.button.is-link.is-outlined { + background-color: white; + border-color: #004C93; + color: #004C93; } +.button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { + background-color: #004C93; + border-color: #004C93; + color: #fff; } +.button.is-link.is-outlined.is-loading::after { + border-color: transparent transparent #004C93; #004C93; !important; } +.button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; } +.button.is-link.is-outlined[disabled], + fieldset[disabled] .button.is-link.is-outlined { + background-color: transparent; + border-color: #004C93; + box-shadow: none; + color: #004C93; } +.button.is-link.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } +.button.is-link.is-inverted.is-outlined:hover, +.button.is-link.is-inverted.is-outlined.is-hovered, +.button.is-link.is-inverted.is-outlined:focus, +.button.is-link.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #004C93; } +.button.is-link.is-inverted.is-outlined.is-loading:hover::after, +.button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, +.button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #004C93; #004C93; !important; } + +.button.is-link.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; } +.button.is-link.is-inverted.is-outlined:hover, +.button.is-link.is-inverted.is-outlined.is-hovered, +.button.is-link.is-inverted.is-outlined:focus, +.button.is-link.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #004C93; } + +.button.is-small.is-rounded.is-link.has-tooltip-bottom { background-color: #004C93; /*UDE-Blau*/ } /*20250711 eingefügt*/ + +.exportoptions { + margin-top: 2.0em; +} + +.buttonlist{ /*für resposive Buttonleiste*/ + display: flex; + flex-flow: no wrap; + justify-content: flex-start; + padding: 0.3rem 0rem 0.3rem 0rem; /*für Padding: ob re un li*/ + } + +.buttonlist img { /*für Icongröße in Buttonleiste*/ + height: 2.5rem; + width: auto; + margin-top: 0em; } + +/*Auswahlfelder*/ +.card { /*für Auswahlfeldercard-Position*/ + display: flex; + flex-flow: column; + margin-left: 0em; + margin-top: 8em; + min-width: 10.0em; + width: 100%; + } + +.card.is-shady { border: unset !important; } /*20250709 eingefügt */ + +.label-container, .button-label { /*für einh.responsive Feldbezeichner*/ + display: flex; + justify-content: left; + background: ; + min-width: 10.0em; /*für kleine Viewports*/ + width: 10%; } /*für kleine Viewports*/ + +.control-new { /*für einheitliche Controls*/ + min-width: 10.0em; /*für kleine Viewports*/ + width: 10%; /*für große Viewports*/ + } + +.button { /*für Button-Bezeichner-Ausrichtung*/ + display: flex; + justify-content: left; } + +/*Erläuterungen/Legende*/ +.box-new { /*für Kopfzeile mit Close-Button*/ + display: flex; + justify-content: space-between; + font-weight: bold; +} + +.leg_erl { + background-color: whitesmoke; /*für Abschnitthintergrund, Schrift*/ + font-size: 0.8em; +} + +.dl_title { /*für Texthervorhebungen*/ + display: flex; + justify-content: center; + background: inherit; + font-size: 1.2em; + font-weight: 400; + } + /*Datentabellen*/ +.table-container { + z-index: 10; /*positioniert sich im flow hinter dem hs_header*/ + } + table.ergtabelle tr.listRowOdd td.leer + { + border:thin solid white; + background-color:white; + } + table.ergtabelle tr.listRowEven td.leer + { + border:thin solid white; + background-color:white; + } + table.ergtabelle tr td.leer + { + border:thin solid white; + background-color:white; + } + table.ergtabelle tr th.leer + { + border:thin solid white; + background-color:white; + } + table.ergtabelle tr th.header + { + vertical-align:center; + text-align:center; + } + + table.ergtabelle + { + border:thin solid white; + font-size:1.5rem; + } + + /* Zahlen rechtsbündig:*/ + table.ergtabelle tbody tr.listRowEven td.integer + { + text-align:right; + empty-cells:show + vertical-align:center; + } + table.ergtabelle tbody tr.listRowOdd td.integer + { + text-align:right; + empty-cells:show + vertical-align:center; + } + table.ergtabelle tbody tr.listRowEven td.decimal + { + text-align:right; + empty-cells:show + vertical-align:center; + } + table.ergtabelle tbody tr.listRowOdd td.decimal + { + text-align:right; + empty-cells:show + vertical-align:center; + } + + diff --git a/superx/xml/viz_components.xsl b/superx/xml/viz_components.xsl index f680bd4..06e5be4 100644 --- a/superx/xml/viz_components.xsl +++ b/superx/xml/viz_components.xsl @@ -6,31 +6,30 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sx="http://memtext.de"> - + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - + + + + @@ -61,13 +60,13 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sx="http://memtext.de"> - + - - + + @@ -77,13 +76,27 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sx="http://memtext.de"> - - + + @@ -1153,7 +1166,7 @@ Stand:

- +
@@ -1710,8 +1723,8 @@ Platzhalter
-
-
+
-