web/ui2/data/tpl/nutzer-rollen-dlg.tpl | ●●●●● patch | view | raw | blame | history | |
web/ui2/index.html | ●●●●● patch | view | raw | blame | history | |
web/ui2/js/app.js | ●●●●● patch | view | raw | blame | history | |
web/ui2/stile.css | ●●●●● patch | view | raw | blame | history |
web/ui2/data/tpl/nutzer-rollen-dlg.tpl
@@ -9,4 +9,3 @@ </div> <h6>Verfügbare Rollen</h6> <div class="alle-rollen-behaelter"></div> <button type="button" class="zurueck-btn">< Zurück</button> web/ui2/index.html
@@ -11,6 +11,7 @@ <body> <!-- Kopfzeile --> <div class="nord"> <!-- <div id="nav-menu"> <div id="nav-toggle" class="hamburger hamburger--elastic"> <div class="hamburger-box"> @@ -18,9 +19,16 @@ </div> </div> </div> --> <div class="back-btn"> <button type="button" class="zurueck-btn">❮ Zurück</button> </div> <div class="app-titel"> <span id="app-titel">Nutzerverwaltung</span> </div> <div class="top-btn-area"> <button type="button" class="top-btn" id="nutzer-neu-btn">+</button> </div> </div> <div class="inhalt"> <!-- westliche Seitenleiste --> web/ui2/js/app.js
@@ -49,6 +49,7 @@ this.init = function () { self.vorlagen = new Vorlagen(); /* self.appMenu = new AppMenu(); self.appMenu.init( "data/menu/", @@ -59,9 +60,13 @@ document.querySelector('.hamburger').addEventListener('click', function (e) { self.menue_umschalten(); }); */ var dlg = document.querySelector(".dialog"); dlg.style.flexBasis = '0em'; document.querySelector('#nutzer-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen); self.seitenleiste_umschalten(); self.west_umschalten(); self.west_umschalten(); self.get_login(); self.get_user_list(); self.loc = window.location.protocol + '//' + window.location.host; @@ -104,6 +109,7 @@ }); }); }); document.querySelector('.zurueck-btn').style.color = 'black'; }; this.grant_role_klick = function(event) { @@ -137,7 +143,7 @@ this.info_dialog_zeigen = function () { self.dialog_zeigen('data/tpl/dlg-info.tpl', ''); self.menue_umschalten(); //self.menue_umschalten(); }; this.nutzer_neu_dialog_zeigen = function () { @@ -147,7 +153,7 @@ btn.addEventListener('click', self.nutzer_speichern); } }); self.menue_umschalten(); //self.menue_umschalten(); }; this.seitenleiste_umschalten = function () { @@ -162,6 +168,18 @@ //self.menue_umschalten(); }; this.west_umschalten = function() { var westDiv = document.querySelector('.west'); if (westDiv.classList.contains('west-open')) { westDiv.classList.remove('west-open'); westDiv.style.flexBasis = '0em'; } else { westDiv.classList.add('west-open'); westDiv.style.flexBasis = '6em'; } //self.menue_umschalten(); }; this.fusszeile_umschalten = function () { var suedDiv = document.querySelector('.sued'); if (suedDiv.classList.contains('sued-open')) { @@ -171,7 +189,7 @@ suedDiv.classList.add('sued-open'); suedDiv.style.height = '1.5em'; } self.menue_umschalten(); //self.menue_umschalten(); }; this.meldung_mit_timeout = function (meldung, timeout) { @@ -247,6 +265,7 @@ var elem = document.getElementById('nutzer'); elem.innerHTML = h; self.addEvtListener('p.nutzer-liste-eintrag', 'click', self.nutzerliste_klick); document.querySelector('.zurueck-btn').style.color = '#eee'; }); }); }; web/ui2/stile.css
@@ -27,11 +27,11 @@ flex-flow: row; height: 100%; /* Anmerkung 2 */ min-height: 0; /* Anmerkung 1 */ background-color: #ededed; /* background-color: #ededed; */ overflow: hidden; } .nord { background-color: black; background-color: #eee; display: flex; flex-flow: row; height: 2em; @@ -89,8 +89,28 @@ */ .app-titel { margin-left: 0.6em; color: white; margin-left: 0.1em; color: black; } .zurueck-btn, .zurueck-btn:focus { border: 0; margin: 0 1.2em 0 0.6em; padding: 0; color: black; } .zurueck-btn:hover { color: #888; } .top-btn { margin: 0 1em 0 1em; height: 28px; line-height: 24px; text-align: center; font-size: large; } .pointer-cursor {