diff --git a/superx/edit/kern/maske_sicht_laden.jsp b/superx/edit/kern/maske_sicht_laden.jsp index e0d8579..62f6b3f 100644 --- a/superx/edit/kern/maske_sicht_laden.jsp +++ b/superx/edit/kern/maske_sicht_laden.jsp @@ -44,8 +44,7 @@ callurl+=params; Auswahl <%=fname %> - + - -
- +
-
+
-
+
- -
<% if(zeilenanzahl!=null && !zeilenanzahl.equals("1")) @@ -413,20 +408,19 @@ function ndSichtEintraegeSuchen(was) {
  alle markieren
+
<% } %> - -
keine Auswahl möglich - -
+
keine Auswahl möglich +
-
+ diff --git a/superx/style/sx_field_dialogue.css b/superx/style/sx_field_dialogue.css index 17c591f..d1a1189 100644 --- a/superx/style/sx_field_dialogue.css +++ b/superx/style/sx_field_dialogue.css @@ -1,92 +1,192 @@ +@charset "UTF-8"; +button.button-dialogue { + border: thin solid hsl(0, 0%, 71%); + border-radius: 0.3em; + background-color: white; + color: black; + padding: 8px; + width: 11em; +} + +input.input { + border: thin solid hsl(0, 0%, 71%); + border-radius: 0.3em; + background-color: white; + color: black; + line-height: 2.5em; +} + /*dateispezifische Basics*/ -body, .label, .searchresult, .placeholder { /*Schrift für Kopf, Suchform.Teile, Suchergebnisse*/ - font-family: sans serif; - font-weight: normal; - font-size: 12px; /*20241102 geändert BF von 0.9rem;*/ -} - -input[type="checkbox"] { - vertical-align: bottom; - line-height: 1.25; } - -.combodiv { - display: flex; - justify-content: left; } - -ul { list-style: none; } - +body { + padding-top: 0px; /*202606 ergänzt die höhe der navbar*/ +} + +body, .label, .searchresult, .placeholder { /*Schrift für Kopf, Suchform.Teile, Suchergebnisse*/ + font-family: sans serif; + font-weight: normal; + font-size: 15px; /*202604 geändert von ursprgl. 12px;*/ +} + hr { background-color: whitesmoke; margin-top: -1rem; - margin-bottom: 0.5rem; } + margin-bottom: 0.5rem; +} + +/*HS-spezifische Anpassungen*/ +.navbar-dialogue { + position: sticky; /* 202606 ergänzt:Kopfzeile bleibt beim Scrollen "kleben"*/ + top: 0; + left: 0; + width: 100%; + height: 105px; + background: #ECF0F3; + z-index: 1000; + margin-top: -55px; +} + +.title-dialogue.is-4:before { + content: ""; +} + +.title-dialogue.is-4:after { + content: " Filter"; +} + +.title-dialogue.is-4 { + color: hsl(0, 0%, 21%); + font-weight: bold; + font-size: 25px; +} + +/**20260611 auskomm zum Test.button-dialogue { + background-color: $button-dialogue-background; /*202604 für ok/reset/sbbruch-button*/ +/* padding: 8px; + border: thin solid black; + width: 11em; +}*/ +.a-dialogue { + color: black; + font-family: sans-serif; + font-weight: bold; + font-size: 15px; +} + +input[type=checkbox] { + vertical-align: bottom; + line-height: 1.25; + /*20260611 auskommentiert zum Test background: $input-background;*/ +} + +.input::placeholder, .textarea::placeholder, .select select::placeholder { /*202604 eingefügt*/ + /*20260611 auskomentiert zum Test color: $input-color; */ + font-size: 15px; +} + +.comboDiv-dialogue { /*202605 ergänzt*/ + margin-left: 1.6rem; +} + +/* Standarddarstellung für größere Viewports */ +.comboDiv { + display: flex; + justify-content: left; +} + +.input-container.sticky-filter { /*202606 neu: äußerer Container*/ + position: sticky; /*202606 neu: bleibt beim Scrollen sichtbar*/ + top: 105px; /* Höhe der Navbar > siehe oben */ + z-index: 999; + background: #ECF0F3; + padding: 0.5rem 0; +} -/* Standarddarstellung für größere Viewports */ .input-container { - display: flex; - flex-direction: row; /* Ordnet Felder horizontal*/ - margin-top: 0.2rem;} - -.input-container > .label { - margin-bottom: 0; - margin-right: 1.2rem;} + display: flex; + flex-direction: row; /* Ordnet Felder horizontal*/ + margin-top: 0.2rem; + background: #ECF0F3; +} + +.input-container > .label { + margin-bottom: 1rem; /*202604 geänd. v urprgl. 0*/ + margin-right: 0.5rem; /*202606 geänd v. 2.2rem*; 202604 geänd. v. 1.2em*/ + text-align: right; /*202606 ergänzt*/ +} .field is-grouped is-grouped-multiline { display: flex; - flex-direction: row; + flex-direction: row; flex-wrap: wrap; - gap: 1rem; } - + gap: 1rem; +} + .field.is-grouped { display: flex; - flex-direction: row; + flex-direction: row; flex-wrap: nowrap; margin-left: 0.5rem; - gap: 1rem; } + gap: 1rem; +} + +.field { + align-items: flex-start; /*für gleiche vertik. Feldausrichtung*/ +} -.field {align-items: flex-start;} /*für gleiche vertik. Feldausrichtung*/ .label { - margin-top: 5px; - width: 2em; } + margin-top: 5px; + width: 8em; /*202604 geänd. v urprgl. 2em*/ + font-weight: bold; /*202604: ergänzt*/ +} -.select select, .input { /*für Auswahlfeldstyle*/ - border: thin solid hsl(0, 0%, 71%); /*hellgrau*/ - border-radius: 0.3em; - padding-left: 5px;} +.select select, .input { /*für Auswahlfeldstyle*/ + border: thin solid hsl(0, 0%, 71%); + border-radius: 0.3em; + /*20260611 auskommentiert zum Test color: $input-color; */ /*202604 ergänzt*/ + font-size: 16px; /*202604 ergänzt*/ + padding-left: 5px; +} -/*Anpassungen für Viewports bis 768px=tablet-Hochformat */ -@media screen and (min-width: 585px) and (max-width: 768px) { +/*Anpassungen für Viewports Mobile bis 768px=tablet-Hochformat */ +@media screen and (min-width: 585px) and (max-width: 768px) { .input-container { - flex-direction: row; - gap: 1px; /* Fügt Abstand zwischen den Feldern hinzu */ + flex-direction: row; + gap: 1px; /* Fügt Abstand zwischen den Feldern hinzu */ + } + .input-container > .label { /*202605 ergänzt*/ + margin-bottom: 0rem; + text-align: right; /*202606 ergänzt*/ + } + .field.is-grouped { + flex-direction: row; + } + .field { + align-items: flex-start; } - - .field.is-grouped { flex-direction: row; } - .field {align-items: flex-start;} - } - -/*Anpassung für kleine Viewports */ +/*Anpassung für kleine Viewports (Mobile)*/ @media screen and (max-width: 584px) { -.input-container { - flex-direction: column; /* Stapelt Felder*/ - margin-top: 1rem; + .input-container { + flex-direction: column; /* Stapelt Felder*/ + margin-top: 0rem; /*202604 geändert v ursprgl. 1rem*/ + padding-bottom: 0.2rem; /*202604 eingefügt*/ + } + .input-container > .label { /*202605 ergänzt*/ + margin-bottom: 0rem; + text-align: left; /*202606 ergänzt*/ } .field.is-grouped { - flex-direction: row; - column-gap: 5px; /* Abstand label und Input/Select-Felder */ - row-gap: 1px; /* Höhneabstand zwischen Feldern; ohne Angabe wird Abstand zu groß*/ + flex-direction: row; + column-gap: 5px; /* Abstand label und Input/Select-Felder */ + row-gap: 1px; /* Höhenabstand zwischen Feldern; ohne Angabe wird Abstand zu groß*/ } - - .label {width: 3em;} -} - -/*** style-Abschnitt von maske_combo_laden.jsp und html-Datei***/ -/* so. Zeile 16 +} +/* Ergebnislisten von Sichten und gesuchten Elementen */ ul { - list-style-type: none; -}*/ + list-style: none; +} -#sichtentreeUL { +.sichtentreeUL { list-style-type: none; margin-left: 2em; padding: 0; @@ -101,7 +201,7 @@ ul { } .sichtentreeCaret::before { - content: "\25B6"; + content: "▶"; color: #014A7B; display: inline-block; margin-right: 0px; @@ -109,12 +209,12 @@ ul { .sichtentreeCaret-down::before { -ms-transform: rotate(90deg); /* IE 9 */ - -webkit-transform: rotate(90deg); /* Safari */' - transform: rotate(90deg); + -webkit-transform: rotate(90deg); /* Safari */ + transform: rotate(90deg); } .sichtentreePlaceholder { - margin-left: 16px; + margin-left: 16px; } .sichtentreeNested { @@ -130,59 +230,26 @@ ul { } .sichtentreeSpacer { - padding-left: 10px; /*wofür nötig?*/ + padding-left: 10px; /*wofür nötig?*/ } .sichtentreeLink { -text-decoration: none; /* keine Unterstreichung für links */ + text-decoration: none; /* keine Unterstreichung für links */ } .sichtentreeLinkWithSpace { - text-decoration: none; /* keine Unterstreichung für links */ - margin-left:10px; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; + text-decoration: none; /* keine Unterstreichung für links */ + margin-left: 10px; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; } ul.sichtentreeChildUL { -margin: 0px; -padding-left: 10px; -list-style-type: none; -list-style-position: inside; -list-style-image: none; -} -/* cells entfernt -.cell { - position: sticky; - top: 0; - z-index: 10; - -} */ - -/*so. Zeile 43 -.label { - font-size: 14px; }*/ - -/*so. Zeile 24 -.input-container { - display: flex; - flex-direction: column; - align-items: flex-start; -}*/ - -/*.input-container > .label { - margin-bottom: 0.25rem; -}*/ + margin: 0px; + padding-left: 10px; + list-style-type: none; + list-style-position: inside; + list-style-image: none; +} -/*so. Zeile 52 -@media (min-width: 768px) { - .input-container { - flex-direction: row; - align-items: center; - } - - .input-container > .label { - margin-bottom: 0; - margin-right: 1rem; - } -}*/ +/*# sourceMappingURL=sx_field_dialogue.css.map */ diff --git a/superx/style/sx_field_dialogue.css.map b/superx/style/sx_field_dialogue.css.map new file mode 100644 index 0000000..211927e --- /dev/null +++ b/superx/style/sx_field_dialogue.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["sx_field_dialogue.scss"],"names":[],"mappings":";AA6DA;EApCE;EACA;EACA;EACA;EACA;EACA;;;AAkCF;EA9BE;EACA;EACA;EACA;EACA;;;AA8BF;AACA;EAAO;;;AAEP;EACG;EACA;EACA;;;AAGH;EACE,kBAzDoB;EA0DpB;EACA;;;AAGF;AACA;EACI;EACA;EACA;EACA;EACA;EACA,YAhFc;EAiFd;EACA;;;AAGJ;EAA8B;;;AAC9B;EAA6B;;;AAC7B;EACG,OAzFM;EA0FN;EACA;;;AAGH;AAAA;AAEE;AAAA;AAAA;AAAA;AAKF;EACG;EACA;EACA;EACA;;;AAGH;EACE;EACA;AACA;;;AAEF;AACE;EACA;;;AAGF;EACG;;;AAEH;AACA;EACG;EACA;;;AAGH;EACI;EACA;EACA;EACA,YAlIc;EAmId;;;AAGJ;EACI;EACA;EACA;EACA,YA1Ic;;;AA6IlB;EACI;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EAAQ;;;AAGR;EACE;EACA;EACA;;;AAGF;EACG,QA9Ja;EA+Jb;AACA;EACA;EACA;;;AAGH;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGH;IAAoB;;EACpB;IAAQ;;;AAGT;AACA;EACE;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;AACA;EAAK;;;AAEL;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,OA9NsB;EA+NtB;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACA;;;AAGA;EACC;EACA;EACA;EACA;;;AAGD;EACA;EACA;EACA;EACA;EACA","file":"sx_field_dialogue.css"} \ No newline at end of file diff --git a/superx/style/sx_field_dialogue.scss b/superx/style/sx_field_dialogue.scss new file mode 100644 index 0000000..6a50c54 --- /dev/null +++ b/superx/style/sx_field_dialogue.scss @@ -0,0 +1,292 @@ +@charset "utf-8"; +// ***Auswahleigenschaften***. +// *Brand colors* +$purple: #8a4d76; +$pink: #fa7c91; +$brown: #757763; +$beige-light: #d0d1cd; +$beige-lighter: #eff0eb; +$blue: #3333ff; +$dklgrau:hsl(0, 0%, 21%); +$memtext-blaugrau:#ECF0F3; +$mittelgrau:hsl(0, 0%, 60%); +$hellgrau:hsl(0, 0%, 71%); +$grün:hsl(141, 71%, 48%); +$gelb-orange:hsl(48, 100%, 67%); + +// ***SuperX-Default*** +$navbar-dialogue-background: $memtext-blaugrau; +$title-dialogue-color: $dklgrau; +$input-container-background: $memtext-blaugrau; +$sichtentreeCaret-color:#014A7B; +$hr-background-color: whitesmoke; +$select-border: thin solid $hellgrau; + +@mixin default-button-dialogue { + border: thin solid $hellgrau; + border-radius: 0.3em; + background-color: white; + color: black; + padding: 8px; + width: 11em; + } + +@mixin default-input { + border: thin solid $hellgrau; + border-radius: 0.3em; + background-color: white; + color: black; + line-height: 2.5em; + } + +// ***Hochschul-Spezifika*** +//$navbar-dialogue-background:#003c7aff; //UDE-Blau +//$title-dialogue-color: white; //passend zum dunklen background +//$input-container-background:#d9d9d9ff; //UDE-Grau + +@mixin hochschul-button-dialogue { + border: thin solid black; + background-color: #d9d9d9; //UDE-Grau + color: black; + padding: 8px; + width: 11em; + } + +@mixin hochschul-input { + background-color: white; + color: black; + line-height: 2.5em; + } + +// ***Aktuelle Konfiguration via mixins*** +button.button-dialogue {@include default-button-dialogue;} +//button.button-dialogue {@include hochschul-button-dialogue;} + +input.input {@include default-input;} +//input.input {@include hochschul-input;} + + +/*dateispezifische Basics*/ +body { padding-top: 0px; /*202606 ergänzt die höhe der navbar*/} + +body, .label, .searchresult, .placeholder { /*Schrift für Kopf, Suchform.Teile, Suchergebnisse*/ + font-family: sans serif; + font-weight: normal; + font-size: 15px; /*202604 geändert von ursprgl. 12px;*/ +} + +hr { + background-color: $hr-background-color; + margin-top: -1rem; + margin-bottom: 0.5rem; +} + +/*HS-spezifische Anpassungen*/ +.navbar-dialogue { + position: sticky; /* 202606 ergänzt:Kopfzeile bleibt beim Scrollen "kleben"*/ + top:0; + left: 0; + width: 100%; + height:105px; + background: $navbar-dialogue-background; + z-index: 1000; + margin-top: -55px; +} + +.title-dialogue.is-4:before { content:""; } +.title-dialogue.is-4:after { content:" Filter"; } +.title-dialogue.is-4 { + color: $title-dialogue-color; + font-weight: bold; + font-size: 25px; + } + +/**20260611 auskomm zum Test.button-dialogue { + background-color: $button-dialogue-background; /*202604 für ok/reset/sbbruch-button*/ + /* padding: 8px; + border: thin solid black; + width: 11em; +}*/ + +.a-dialogue { + color: black; + font-family: sans-serif; + font-weight: bold; + font-size: 15px; +} + +input[type="checkbox"] { + vertical-align: bottom; + line-height: 1.25; + /*20260611 auskommentiert zum Test background: $input-background;*/ } + +.input::placeholder, .textarea::placeholder, .select select::placeholder { /*202604 eingefügt*/ + /*20260611 auskomentiert zum Test color: $input-color; */ + font-size: 15px; +} + +.comboDiv-dialogue { /*202605 ergänzt*/ + margin-left: 1.6rem;} + +/* Standarddarstellung für größere Viewports */ +.comboDiv { + display: flex; + justify-content: left; } + + +.input-container.sticky-filter { /*202606 neu: äußerer Container*/ + position: sticky; /*202606 neu: bleibt beim Scrollen sichtbar*/ + top: 105px; /* Höhe der Navbar > siehe oben */ + z-index: 999; + background: $input-container-background; + padding: 0.5rem 0; + } + +.input-container { + display: flex; + flex-direction: row; /* Ordnet Felder horizontal*/ + margin-top: 0.2rem; + background: $input-container-background; + } + +.input-container > .label { + margin-bottom: 1rem; /*202604 geänd. v urprgl. 0*/ + margin-right: 0.5rem; /*202606 geänd v. 2.2rem*; 202604 geänd. v. 1.2em*/ + text-align: right; /*202606 ergänzt*/ + } + +.field is-grouped is-grouped-multiline { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; } + +.field.is-grouped { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin-left: 0.5rem; + gap: 1rem; } + +.field {align-items: flex-start; /*für gleiche vertik. Feldausrichtung*/ +} + +.label { + margin-top: 5px; + width: 8em; /*202604 geänd. v urprgl. 2em*/ + font-weight: bold; /*202604: ergänzt*/ +} + +.select select, .input { /*für Auswahlfeldstyle*/ + border: $select-border; + border-radius: 0.3em; + /*20260611 auskommentiert zum Test color: $input-color; */ /*202604 ergänzt*/ + font-size: 16px; /*202604 ergänzt*/ + padding-left: 5px; +} + +/*Anpassungen für Viewports Mobile bis 768px=tablet-Hochformat */ +@media screen and (min-width: 585px) and (max-width: 768px) { + .input-container { + flex-direction: row; + gap: 1px; /* Fügt Abstand zwischen den Feldern hinzu */ + } + + .input-container > .label { /*202605 ergänzt*/ + margin-bottom: 0rem; + text-align: right; /*202606 ergänzt*/ + } + + .field.is-grouped { flex-direction: row; } + .field {align-items: flex-start;} +} + +/*Anpassung für kleine Viewports (Mobile)*/ +@media screen and (max-width: 584px) { + .input-container { + flex-direction: column; /* Stapelt Felder*/ + margin-top: 0rem; /*202604 geändert v ursprgl. 1rem*/ + padding-bottom: 0.2rem; /*202604 eingefügt*/ + } + + .input-container > .label { /*202605 ergänzt*/ + margin-bottom: 0rem; + text-align: left; /*202606 ergänzt*/ + } + + .field.is-grouped { + flex-direction: row; + column-gap: 5px; /* Abstand label und Input/Select-Felder */ + row-gap: 1px; /* Höhenabstand zwischen Feldern; ohne Angabe wird Abstand zu groß*/ + } +} + +/* Ergebnislisten von Sichten und gesuchten Elementen */ +ul { list-style: none; } + +.sichtentreeUL { + list-style-type: none; + margin-left: 2em; + padding: 0; +} + +.sichtentreeCaret { + cursor: pointer; + -webkit-user-select: none; /* Safari 3.1 */ + -moz-user-select: none; /* Firefox 2 */ + -ms-user-select: none; /* IE 10 */ + user-select: none; +} + +.sichtentreeCaret::before { + content: "\25B6"; + color: $sichtentreeCaret-color; + display: inline-block; + margin-right: 0px; +} + +.sichtentreeCaret-down::before { + -ms-transform: rotate(90deg); /* IE 9 */ + -webkit-transform: rotate(90deg); /* Safari */ + transform: rotate(90deg); +} + +.sichtentreePlaceholder { + margin-left: 16px; +} + +.sichtentreeNested { + display: none; + margin-right: 0px; + padding-left: 13px; +} + +.sichtentreeActive { + display: block; + margin-right: 0px; + padding-left: 13px; +} + +.sichtentreeSpacer { + padding-left: 10px; /*wofür nötig?*/ +} + +.sichtentreeLink { +text-decoration: none; /* keine Unterstreichung für links */ +} + +.sichtentreeLinkWithSpace { + text-decoration: none; /* keine Unterstreichung für links */ + margin-left:10px; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} + +ul.sichtentreeChildUL { +margin: 0px; +padding-left: 10px; +list-style-type: none; +list-style-position: inside; +list-style-image: none; +} +