Browse Source

Verbesserung Dashboard Responsivität #1

master
Daniel Quathamer 13 hours ago
parent
commit
1d7db58bf2
  1. 368
      superx/style/sx_viz_muster.css
  2. 405
      superx/xml/viz_components.xsl
  3. 5
      superx/xml/viz_html_chart_viewer_grid.xsl

368
superx/style/sx_viz_muster.css

@ -1,10 +1,21 @@
/*dateispezifische Basics*/ /*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*/ .hero-body { margin-left: 1.5em; } /*Abstand zum Burger-Button*/
.title, .subtitle { /*für Seitentitel*/ .title, .subtitle { /*für Seitentitel*/
margin-left: 0.4em; margin-left: 0.4em;
margin-top: 0%; } margin-top: 0%; }
.columns {
display: flex;
flex-wrap: wrap; }
.card { /*für Cardposition, -style*/ .card { /*für Cardposition, -style*/
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -32,8 +43,7 @@
margin-top: 0.4em; } margin-top: 0.4em; }
.control-new { /*für einheitliche Controlbreite*/ .control-new { /*für einheitliche Controlbreite*/
width: 17.0em; width: 17.0em; }
}
.tabs { .tabs {
font-family: sans-serif; font-family: sans-serif;
@ -42,6 +52,42 @@
.tabs { /*für Tab-Namen*/ .tabs { /*für Tab-Namen*/
font-size: 2rem; } 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 { .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
font-size: 0.8rem; font-size: 0.8rem;
color: black; } color: black; }
@ -66,4 +112,322 @@
border-radius: 8px; border-radius: 8px;
pointer-events: none; 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;
}

405
superx/xml/viz_components.xsl

@ -24,7 +24,6 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sx="http://memtext.de">
<link rel="stylesheet" type="text/css" href="../style/bulma-tooltip.min.css" /> <link rel="stylesheet" type="text/css" href="../style/bulma-tooltip.min.css" />
<link rel="stylesheet" type="text/css" href="../style/sx_viz_muster.css" /> <link rel="stylesheet" type="text/css" href="../style/sx_viz_muster.css" />
</head> </head>
</xsl:template> </xsl:template>
@ -77,13 +76,27 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sx="http://memtext.de">
<xsl:if test="$css != ''"> <xsl:if test="$css != ''">
<link rel="stylesheet" type="text/css" href="$css" /> <link rel="stylesheet" type="text/css" href="$css" />
</xsl:if> </xsl:if>
</head> </head>
</xsl:template> </xsl:template>
<xsl:template name="tableJavascript_viz_alt"> <xsl:template name="tableJavascript_viz_alt">
<script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" /> <script language="Javascript" type="text/javascript" src="../xml/js/jquery-2.1.1.min.js" />
<script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script> <script language="JavaScript" type="text/javascript" src="../xml/js/memtext/sx_functions.js"></script>
<script language="JavaScript" type="text/javascript"> <!--20251011 eingefügt-->
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.dashboard-tabs li');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Alle Tabs deaktivieren
tabs.forEach(t => t.classList.remove('is-active', 'active'));
// Geklickten Tab aktivieren
tab.classList.add('is-active');
});
});
});
</script>
<xsl:call-template name="importVizJavascriptLibs" /> <xsl:call-template name="importVizJavascriptLibs" />
@ -1153,7 +1166,7 @@ Stand: <xsl:value-of select="../stand" /></p>
</xsl:call-template> </xsl:call-template>
</xsl:when> </xsl:when>
<xsl:otherwise><!--nicht dynamisch--> <xsl:otherwise><!--nicht dynamisch-->
<xsl:attribute name="class"><xsl:value-of select="concat('fixed-grid has-',$spalten_anz,'-cols')" /> <xsl:attribute name="class"><xsl:value-of select="concat('fixed-grid has-',$spalten_anz,'-cols fullwidth-grid')" />
</xsl:attribute> </xsl:attribute>
<div class="grid" style="margin-top: 1rem;"> <div class="grid" style="margin-top: 1rem;">
<xsl:call-template name="viz_viewer_grid_cells" > <xsl:call-template name="viz_viewer_grid_cells" >
@ -1719,22 +1732,25 @@ Platzhalter
<span style="font-size:1rem;font-weight:bolder;color:#C00000;"><xsl:value-of select="col[f_name='kennz']/wert"/><xsl:text> (</xsl:text><xsl:value-of select="../../../felder/feld [@varname='Bis Semester']/value_caption"/><xsl:text>)</xsl:text></span> <span style="font-size:1rem;font-weight:bolder;color:#C00000;"><xsl:value-of select="col[f_name='kennz']/wert"/><xsl:text> (</xsl:text><xsl:value-of select="../../../felder/feld [@varname='Bis Semester']/value_caption"/><xsl:text>)</xsl:text></span>
</div> </div>
</xsl:for-each> </xsl:for-each>
<div class="column"><p align="right"> <div class="column">
<p align="right">
<xsl:if test="$bookletStylesheet!=''"> <xsl:if test="$bookletStylesheet!=''">
<a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true;" > <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true;" >
<xsl:attribute name="href"><xsl:text>javascript:exportVizBooklet('application/pdf','</xsl:text><xsl:value-of select="$bookletStylesheet"/><xsl:text>');</xsl:text> <xsl:attribute name="href"><xsl:text>javascript:exportVizBooklet('application/pdf','</xsl:text><xsl:value-of select="$bookletStylesheet"/><xsl:text>');</xsl:text>
</xsl:attribute> </xsl:attribute>
<img title="Ausgabe im PDF-Querformat" alt="Ausgabe im PDF-Querformat" src="../images/icons/into_pdf.svg" style="width:30px;height:40px" border="0" /></a> <img title="Ausgabe im PDF-Querformat" alt="Ausgabe im PDF-Querformat" src="../images/icons/into_pdf.svg" style="width:30px;height:40px" border="0" /></a>
<span class="separator">&#160;</span> <!--20251001 entfernt:<span class="separator">&#160;</span>-->
<a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true"> <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true">
<xsl:attribute name="href"><xsl:text>javascript:exportVizBooklet('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','</xsl:text><xsl:value-of select="$bookletStylesheet"/><xsl:text>');</xsl:text> <xsl:attribute name="href"><xsl:text>javascript:exportVizBooklet('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','</xsl:text><xsl:value-of select="$bookletStylesheet"/><xsl:text>');</xsl:text>
</xsl:attribute> </xsl:attribute>
<img title="Ausgabe in Excel" alt="Ausgabe in Excel" src="../images/icons/into_excel_normal.svg" style="width:30px;height:40px" border="0" /></a> <img title="Ausgabe in Excel" alt="Ausgabe in Excel" src="../images/icons/into_excel_normal.svg" style="width:30px;height:40px" border="0" /></a>
<span class="separator">&#160;</span> <!--20251001 entfernt:<span class="separator">&#160;</span>-->
<a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true"> <a onmouseover="window.status='Export starten';return true" onfocus="window.status='Download starten';return true" onmouseout="window.status='Download starten';return true">
<xsl:attribute name="href"><xsl:text>javascript:exportVizBooklet('application/vnd.openxmlformats-officedocument.wordprocessingml.document','</xsl:text><xsl:value-of select="$bookletStylesheet"/><xsl:text>');</xsl:text> <xsl:attribute name="href"><xsl:text>javascript:exportVizBooklet('application/vnd.openxmlformats-officedocument.wordprocessingml.document','</xsl:text><xsl:value-of select="$bookletStylesheet"/><xsl:text>');</xsl:text>
</xsl:attribute> </xsl:attribute>
<img title="Ausgabe in Word" alt="Ausgabe in Word" width="25px" height="25px" src="../images/icons/into_word.svg" style="width:30px;height:40px" border="0" /></a> <!--20251001 entfernt wg Einheitlichkeit::width="25px" height="25px"-->
<img title="Ausgabe in Word" alt="Ausgabe in Word" src="../images/icons/into_word.svg" style="width:30px;height:40px" border="0" /></a>
</xsl:if><!-- wenn JR Stylesheet --> </xsl:if><!-- wenn JR Stylesheet -->
</p> </p>
@ -1745,7 +1761,11 @@ Platzhalter
</div> </div>
</div> </div>
</div> </div>
<div class="tabs is-boxed is-centered is-toggle is-toggle-rounded is-fullwidth" id="nav"> <!--20251001 tabs geändert in dashboard-tabs <div class="tabs is-boxed is-centered is-toggle is-toggle-rounded is-fullwidth" id="nav">-->
<!--20251001 tabs geändert in dashboard-tabs-->
<!--<div class="dashboard-tabs is-boxed is-centered is-toggle is-toggle-rounded is-fullwidth" id="nav">-->
<div class="tab-container" id="nav">
<script language="Javascript"> <script language="Javascript">
<xsl:text> <xsl:text>
var optionalFilters = new Array(); var optionalFilters = new Array();
@ -1776,13 +1796,11 @@ Platzhalter
</xsl:for-each> </xsl:for-each>
</ul> </ul>
<xsl:call-template name="vizGridTitle" >
</div><!--Ende grauer Hintergrund der tabs--> </xsl:call-template>
</div><!--Ende grauer Hintergrund der tabs-->
</div> </div>
</header> </header>
@ -2156,368 +2174,7 @@ td.integer {
</div> </div>
</div> </div>
</xsl:template> </xsl:template>
<xsl:template name="vizTableCSS">
<!-- aus 800000280_datencockpit.xsl -->
<style type="text/css">
.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;
}
@media print{
.dontprint{display:none;}
}
html, body {
height: auto;
min-height: 100vh;
overflow-x: auto;
overflow-y: auto;
}
/*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;
}
.cockpit_title {
color: white;
font-size: 2rem;
font-weight: 800;
background-color: #004c93;
padding-left:20px;
}
.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);*/
}
.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;
}
/*--20250917 eingefügt, klappt nicht bei fester Spaltenanzahl:--*/
/*.grid { display: flex;
flex-wrap: wrap; erlaubt Umbruch
}*/
.dashboard-tabs {
display: flex;
flex-wrap: wrap; /* erlaubt Umbruch */
list-style: none;
margin: 1rem;
padding: 0;
/*border-bottom: 1px solid #ccc;*/
}
.dashboard-tabs li {
flex: 1 1 auto; /* alle Tabs gleich breit, aber flexibel */
text-align: center;
/*border: 1px solid #ccc;
border-bottom: none;
background: #f9f9f9;*/
}
.dashboard-tabs li a {
display: block;
padding: 0.75em 1em;
text-decoration: none;
font-weight: bold;
color: #333;
height: 2.5rem;
}
.dashboard-tabs li a:hover {
background: #e0e0e0;
}
.columns {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 475px) {
/* 20250920 eingefügt */
.columns { padding-top: 2.5rem; }
.grid { padding-top: 17.5rem; }
}
@media (min-width: 476px) and (max-width: 576px) {
/* 20250920 eingefügt */
.grid { padding-top: 15rem; }
}
@media (min-width: 577px) and (max-width: 621px) {
/* 20250920 eingefügt */
.grid { padding-top: 10rem; }
}
@media (min-width: 622px) and (max-width: 639px) {
/* 20250920 eingefügt */
.grid { padding-top: 8rem; }
}
@media (min-width: 640px) and (max-width: 768px) {
.grid { padding-top: 5rem; }
}
@media (min-width: 769px) and (max-width: 1070px) {
/* 20250919 eingefügt: bis 769px: mobile; ab 769px: tablet and up; ab 1024px: desctop an up */
.grid { padding-top: 5rem; }
}
@media (min-width: 1071px) and (max-width: 1094px) {
/* 20250919 eingefügt */
.grid { padding-top: 1.5rem; }
}
@media (min-width: 1095px) {
/* 20250919 eingefügt*/
.grid { padding-top: 0.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;
}
.vizTitle
{
margin-top: 2em;
white-space: normal;
word-wrap: normal;
overflow-wrap: break-word;
hyphens: auto;
font-size:1.2em;
font-weight:bolder;
}
</style>
</xsl:template>
<xsl:template name="nd_legendeHeaderContent"> <xsl:template name="nd_legendeHeaderContent">
<xsl:param name="ergebniselement_ordnr" select="0" /> <xsl:param name="ergebniselement_ordnr" select="0" />

5
superx/xml/viz_html_chart_viewer_grid.xsl

@ -42,13 +42,13 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
</xsl:call-template> </xsl:call-template>
<link rel="stylesheet" href="../style/sx_tabelle.css" /> <link rel="stylesheet" href="../style/sx_tabelle.css" />
<link rel="stylesheet" type="text/css" href="../style/sx_viz_muster.css" />
<!--<link rel="stylesheet" href="../style/superx.css" />--> <!--<link rel="stylesheet" href="../style/superx.css" />-->
</head> </head>
<xsl:call-template name="nd_htmlscript" /> <xsl:call-template name="nd_htmlscript" />
<xsl:call-template name="nd_tableJavascript" /> <xsl:call-template name="nd_tableJavascript" />
<xsl:call-template name="nd_tableCSS" /> <xsl:call-template name="nd_tableCSS" />
<xsl:call-template name="vizTableCSS" />
<xsl:call-template name="importVizViewer"></xsl:call-template> <xsl:call-template name="importVizViewer"></xsl:call-template>
<body class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();"> <body class="has-navbar-fixed-top" onload="document.getElementById('progressbar').style.display='none';initPage();">
@ -75,9 +75,6 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
<div id="content" style="padding-left:1rem;padding-top:6rem"> <div id="content" style="padding-left:1rem;padding-top:6rem">
<!--#Template Beginn Seitentitel--> <!--#Template Beginn Seitentitel-->
<xsl:variable name="masken_tid"><xsl:value-of select="/ergebnisse/ergebnis[@ordnr='0']/maskenname/@id"/></xsl:variable> <xsl:variable name="masken_tid"><xsl:value-of select="/ergebnisse/ergebnis[@ordnr='0']/maskenname/@id"/></xsl:variable>
<xsl:call-template name="vizGridTitle" >
<xsl:with-param name="icon_classname" select="/ergebnisse/menue/eintraege/eintrag[@isMaske='true' and tid=$masken_tid]/css_class" />
</xsl:call-template>
<!--#Template Krümelpfad--> <!--#Template Krümelpfad-->
<!--<xsl:call-template name="nd_breadcrumb" />--> <!--<xsl:call-template name="nd_breadcrumb" />-->

Loading…
Cancel
Save