From 58aa3b03b63bda8496a953a936ef847a611a52c9 Mon Sep 17 00:00:00 2001
From: ulrich <ulrich>
Date: Tue, 19 May 2020 14:02:12 +0000
Subject: [PATCH] Abmelden fertig, neues UI und neues Profil aktiviert
---
web/ui/data/tpl/dlg-info.tpl | 0
web/ui/data/tpl/dlg-rolle-neu.tpl | 0
web/ui/index.html | 113 +--
web/logout.jsp | 5
web/profil/app.js | 10
web/profil/stile.css | 386 +++++++++++
web/profil/index.html | 99 +-
web/ui/stile.css | 491 +++++++++++++++
web/ui/data/tpl/dlg-nutzer-neu.tpl | 0
web/ui-alt/stile.css | 42 +
web/ui/js/app.js | 5
web/ui/data/tpl/app-menu.tpl | 0
web/ui/data/tpl/nutzer-rollen-dlg.tpl | 0
web/ui-alt/ui.js | 0
web/profil-alt/ui.js | 0
/dev/null | 485 ---------------
web/ui-alt/index.html | 83 ++
web/ui/data/tpl/alle-rollen.tpl | 0
web/profil-alt/stile.css | 42 +
web/profil/profil-form.html | 0
web/ui/data/tpl/inhalt.tpl | 0
web/profil-alt/index.html | 72 ++
web/ui/data/tpl/dlg-del-conf.tpl | 0
23 files changed, 1,170 insertions(+), 663 deletions(-)
diff --git a/web/logout.html b/web/logout.jsp
similarity index 60%
rename from web/logout.html
rename to web/logout.jsp
index df55d93..20da88c 100644
--- a/web/logout.html
+++ b/web/logout.jsp
@@ -1,16 +1,17 @@
+<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/stile.css">
<title>Abgemeldet</title>
</head>
<body>
<div style="margin: 20px;">
<h3>Abmeldung</h3>
<p>Sie haben sich erfolgreich abgemeldet.</p>
- <p>zurück zur <a href="ui/">Anmeldung</a> • <a href="/">Hauptseite</a></p>
+ <p>zurück zur <a href="ui-alt">Anmeldung</a> • <a href="/">Hauptseite</a></p>
</div>
</body>
</html>
diff --git a/web/profil-alt/index.html b/web/profil-alt/index.html
new file mode 100644
index 0000000..9919174
--- /dev/null
+++ b/web/profil-alt/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Benutzer</title>
+ <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="stile.css">
+ <script id="tpl-list" type="x-tmpl-mustache">
+ {{#List}}
+ {{#List}}
+ <option value="{{ String }}">{{ String }}</option>'
+ {{/List}}
+ {{/List}}
+ </script>
+ </head>
+ <body>
+ <div id="inhalt">
+ <ul class="nav">
+ <li class="nav-item dropdown">
+ <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
+ <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
+ <a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
+ <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
+ <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
+ <div class="dropdown-divider"></div>
+ <a id="profil" class="dropdown-item disabled" href="/um/profil">Profil</a>
+ <a id="logout" class="dropdown-item" href="#">Abmelden</a>
+ </div>
+ </li>
+ </ul>
+ <!-- <h1>Benutzer</h1> -->
+ <div class="bg-warning p-3" id="meldung-box">
+ <button type="button" class="close" aria-label="Close" id="mldg-x">
+ <span aria-hidden="true">×</span>
+ </button>
+ <div class="meldung"></div>
+ </div>
+ <div id="user-form">
+ <label class="pl-3" id="anmeldename">id</label>
+ <!-- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> -->
+ <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
+ <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" name="kennwortneu" id="kennwortNeu">
+ <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
+ <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
+ <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
+ <!--<button class="user-cancel-btn">Abbrechen</button>-->
+ <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
+ </div>
+
+ <!--
+ <div id="nav">
+ <button id="nav-back-btn" class="btn btn-secondary">zurück</button>
+ </div>
+ -->
+ </div>
+ <script src="/jslib/jquery/jquery.min.js"></script>
+ <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/jslib/mustache/mustache.min.js"></script>
+ <script src="ui.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ //var ui;
+ $(document).ready(function() {
+ um_prf_init();
+ });
+ </script>
+ </body>
+</html>
diff --git a/web/profil-alt/stile.css b/web/profil-alt/stile.css
new file mode 100644
index 0000000..f990909
--- /dev/null
+++ b/web/profil-alt/stile.css
@@ -0,0 +1,42 @@
+
+
+#inhalt {
+ margin-top: 0.5em;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+}
+
+#nutzerliste {
+ height: 10em;
+ width: 80%
+}
+
+#nutzerrollen {
+ height: 5em;
+ width: 80%
+}
+
+#rollen {
+ height: 5em;
+ width: 80%
+}
+
+#nav {
+ margin-top: 1em;
+}
+
+#role-form {
+ margin-top: 1em;
+}
+
+#user-role-form {
+ margin-top: 1em;
+}
+
+.eingabe {
+ margin-top: 0.5em;
+}
+
+.role-select {
+ margin-bottom: 0.5em;
+}
\ No newline at end of file
diff --git a/web/profil/ui.js b/web/profil-alt/ui.js
similarity index 100%
rename from web/profil/ui.js
rename to web/profil-alt/ui.js
diff --git a/web/profil2/app.js b/web/profil/app.js
similarity index 92%
rename from web/profil2/app.js
rename to web/profil/app.js
index b1b7b41..cd6ccc1 100644
--- a/web/profil2/app.js
+++ b/web/profil/app.js
@@ -3,6 +3,7 @@
this.cache = {}; // mustache template cache
this.init = function () {
+ document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
var dlg = document.querySelector(".dialog");
dlg.style.flexBasis = '0em';
document.querySelector('.west').style.flexBasis = '0em';
@@ -64,6 +65,15 @@
});
};
+ this.logout = function() {
+ var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
+ var u = '../pub' + m;
+ self.http_get(u, function (resp) {
+ //$('#userMenu').text('nicht angemeldet');
+ window.location.href = '../logout.jsp';
+ });
+ };
+
/* -------- ajax helper functions ----------- */
this.http_get = function(u, cb) {
diff --git a/web/profil/index.html b/web/profil/index.html
index 9919174..922ee07 100644
--- a/web/profil/index.html
+++ b/web/profil/index.html
@@ -1,71 +1,56 @@
<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Benutzer</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
+ <title>Nutzerprofil</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
+ <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="stile.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
</head>
<body>
- <div id="inhalt">
- <ul class="nav">
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
- <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
- <a class="dropdown-item" href="/um/ui">Benutzer verwalten</a>
- <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
- <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
- <div class="dropdown-divider"></div>
- <a id="profil" class="dropdown-item disabled" href="/um/profil">Profil</a>
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- <!-- <h1>Benutzer</h1> -->
- <div class="bg-warning p-3" id="meldung-box">
- <button type="button" class="close" aria-label="Close" id="mldg-x">
- <span aria-hidden="true">×</span>
- </button>
- <div class="meldung"></div>
+ <!-- Kopfzeile -->
+ <div class="nord">
+ <div class="back-btn">
+ <button type="button" class="zurueck-btn">❮ Zurück</button>
</div>
- <div id="user-form">
- <label class="pl-3" id="anmeldename">id</label>
- <!-- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename"> -->
- <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
- <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Neues Kennwort" name="kennwortneu" id="kennwortNeu">
- <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
- <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
- <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
- <!--<button class="user-cancel-btn">Abbrechen</button>-->
- <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
+ <div class="app-titel">
+ <span id="app-titel">Nutzerprofil</span>
</div>
-
- <!--
- <div id="nav">
- <button id="nav-back-btn" class="btn btn-secondary">zurück</button>
+ <div class="top-btn-area">
+ <button type="button" title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
</div>
- -->
</div>
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
+ <div class="inhalt">
+ <!-- westliche Seitenleiste -->
+ <div class="west"></div>
+ <div class="zentrum-behaelter">
+ <!-- Einblendbereich -->
+ <div class="dialog"></div>
+ <!-- zentraler Inhaltsbereich -->
+ <div class="zentrum">
+ <div class="zentraler-inhalt">
+ <div class="zentrum-liste" id="nutzer">
+ <figure>
+ <i class="demo-icon icon-folder"></i>
+ <figcaption class="i-name">icon-folder</figcaption>
+ </figure>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- oestliche Seitenleiste -->
+ <div class="ost"></div>
+ </div>
+ <!-- Fusszeile -->
+ <div class="sued"></div>
+ <!-- Skripte -->
<script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- um_prf_init();
+ <script src="app.js"></script>
+ <script>
+ var app;
+ document.addEventListener('DOMContentLoaded', function () {
+ app = new NutzerProfilApp();
+ app.init();
});
</script>
</body>
diff --git a/web/profil2/profil-form.html b/web/profil/profil-form.html
similarity index 100%
rename from web/profil2/profil-form.html
rename to web/profil/profil-form.html
diff --git a/web/profil/stile.css b/web/profil/stile.css
index f990909..30d3a8a 100644
--- a/web/profil/stile.css
+++ b/web/profil/stile.css
@@ -1,42 +1,378 @@
+/* aus App-Vorlage */
-
-#inhalt {
- margin-top: 0.5em;
- margin-left: 0.5em;
- margin-right: 0.5em;
+html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%; /* Anmerkung 2 */
+ font-size: larger;
+ font-family: 'Roboto Condensed';
+ -webkit-text-size-adjust: none;
+ /* touch-action: manipulation;*/
+}
+body {
+ min-height: 0; /* Anmerkung 1 */
+ display: flex;
+ flex-flow: column;
+}
+.inhalt {
+ display: flex;
+ flex-flow: row;
+ height: 100%; /* Anmerkung 2 */
+ min-height: 0; /* Anmerkung 1 */
+ /* background-color: #ededed; */
+ overflow: hidden;
+}
+.nord {
+ background-color: #eee;
+ display: flex;
+ flex-flow: row;
+ height: 2em;
+ align-items: center;
+ justify-content: space-between;
+}
+.sued {
+ height: 1.5em;
+ overflow: hidden;
+ transition: all 0.3s ease-in;
+ background-color: lightgray;
+}
+.west {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 4em;
+ background-color: white;
+ transition: all 0.3s ease-in;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ost {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 6em;
+ transition: all 0.3s ease-in;
+ background-color: antiquewhite;
+ overflow: hidden;
+}
+.zentrum-behaelter {
+ display: flex;
+ flex-flow: column;
+ /* background-color: #eaeaea; */
+ height: 100%;
+ width: 100%;
+ padding: 0 0.4em 0 0.4em;
}
-#nutzerliste {
- height: 10em;
- width: 80%
+.zentrum {
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
}
-#nutzerrollen {
- height: 5em;
- width: 80%
+.zentraler-inhalt {
+ padding: 0.5em;
+ overflow-x: hidden;
+ overflow-y: auto;
}
-#rollen {
- height: 5em;
- width: 80%
+.zentrum-liste {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+/*
+ Anmerkungen:
+ 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
+ http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
+ 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
+ immer ueber das gesamte Browserfenster ausdehnt.
+*/
+
+/* Kopfleiste */
+
+.app-titel {
+ margin-left: 0.1em;
+ color: black;
}
-#nav {
- margin-top: 1em;
+.zurueck-btn, .zurueck-btn:focus {
+ border: 0;
+ margin: 0 1.2em 0 0.6em;
+ padding: 0;
+ color: black;
}
-#role-form {
- margin-top: 1em;
+.zurueck-btn:hover {
+ color: #888;
}
-#user-role-form {
- margin-top: 1em;
+.top-btn-area {
+ display: flex;
+ flex-flow: row;
+ justify-content: flex-end;
+ padding: 0 0.3em 0 0;
+ width: 4em;
}
-.eingabe {
- margin-top: 0.5em;
+.top-btn {
+ margin: 0;
+ padding: 0 0.2em 0 0.2em;
+ height: 28px;
+ line-height: 24px;
+ text-align: center;
+ font-size: large;
+ background-color: white;
+ /* width: 1em; */
}
-.role-select {
- margin-bottom: 0.5em;
-}
\ No newline at end of file
+.del-user-btn {
+ margin: 0 1.5em 0 1em;
+ height: 28px;
+ line-height: 24px;
+ text-align: center;
+}
+
+.danger-btn {
+ background-color: lightcoral;
+}
+
+#user-form {
+ display: flex;
+ flex-flow: column;
+}
+
+.profil-angabe {
+ margin: 0.8em 0 0 0;
+}
+
+.user-save-btn {
+ margin: 2.5em 0 0 0;
+ width: 16em;
+}
+
+@media (min-width: 800px) {
+ .zentrum-behaelter {
+ padding: 0 1em 0 1em;
+ }
+ .zentrum-behaelter, .nord {
+ margin: 0 10% 0 10%;
+ }
+ .profil-angabe {
+ width: 70%;
+ }
+ .user-save-btn {
+ width: 16em;
+ }
+}
+@media (min-width: 1200px) {
+ .zentrum-behaelter {
+ padding: 0 1.5em 0 1.5em;
+ }
+ .zentrum-behaelter, .nord {
+ margin: 0 15% 0 15%;
+ }
+ .profil-angabe {
+ width: 70%;
+ }
+ .user-save-btn {
+ width: 16em;
+ }
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
+
+@font-face {
+ font-family: 'picto';
+ src: url('../font/picto.eot?52325148');
+ src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
+ url('../font/picto.woff2?52325148') format('woff2'),
+ url('../font/picto.woff?52325148') format('woff'),
+ url('../font/picto.ttf?52325148') format('truetype'),
+ url('../font/picto.svg?52325148#picto') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ @font-face {
+ font-family: 'picto';
+ src: url('../font/picto.svg?52325148#picto') format('svg');
+ }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+ font-family: "picto";
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+
+ display: inline-block;
+ text-decoration: inherit;
+ width: 1em;
+ margin-right: .2em;
+ text-align: center;
+ /* opacity: .8; */
+
+ /* For safety - reset parent styles, that can break glyph codes*/
+ font-variant: normal;
+ text-transform: none;
+
+ /* fix buttons height, for twitter bootstrap */
+ line-height: 1em;
+
+ /* Animation center compensation - margins should be symmetric */
+ /* remove if not needed */
+ margin-left: .2em;
+
+ /* you can be more comfortable with increased icons size */
+ /* font-size: 120%; */
+
+ /* Font smoothing. That was taken from TWBS */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Uncomment for 3D effect */
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-user:before { content: '\e800'; } /* '' */
+.icon-cog:before { content: '\e801'; } /* '' */
+.icon-off:before { content: '\e802'; } /* '' */
+.icon-user-plus:before { content: '\f234'; } /* '' */
+.icon-user-times:before { content: '\f235'; } /* '' */
+
+
+
+/* von Skeleton */
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ display: inline-block;
+ height: 38px;
+ padding: 0 30px;
+ color: #555;
+ text-align: center;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 38px;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: transparent;
+ border-radius: 4px;
+ border: 1px solid #bbb;
+ cursor: pointer;
+ box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+ color: #333;
+ border-color: #888;
+ outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+ color: #FFF;
+ background-color: #33C3F0;
+ border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+ color: #FFF;
+ background-color: #1EAEDB;
+ border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+ height: 38px;
+ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+ background-color: #fff;
+ border: 1px solid #D1D1D1;
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none; }
+textarea {
+ min-height: 65px;
+ padding-top: 6px;
+ padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+ border: 1px solid #33C3F0;
+ outline: 0; }
+label,
+legend {
+ display: block;
+ margin-bottom: .5rem;
+ font-weight: 600; }
+fieldset {
+ padding: 0;
+ border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline; }
+label > .label-body {
+ display: inline-block;
+ margin-left: .5rem;
+ font-weight: normal; }
diff --git a/web/profil2/index.html b/web/profil2/index.html
deleted file mode 100644
index 922ee07..0000000
--- a/web/profil2/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Nutzerprofil</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <link rel="stylesheet" type="text/css" href="stile.css">
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
- <div class="back-btn">
- <button type="button" class="zurueck-btn">❮ Zurück</button>
- </div>
- <div class="app-titel">
- <span id="app-titel">Nutzerprofil</span>
- </div>
- <div class="top-btn-area">
- <button type="button" title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
- </div>
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west"></div>
- <div class="zentrum-behaelter">
- <!-- Einblendbereich -->
- <div class="dialog"></div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <div class="zentraler-inhalt">
- <div class="zentrum-liste" id="nutzer">
- <figure>
- <i class="demo-icon icon-folder"></i>
- <figcaption class="i-name">icon-folder</figcaption>
- </figure>
- </div>
- </div>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <div class="ost"></div>
- </div>
- <!-- Fusszeile -->
- <div class="sued"></div>
- <!-- Skripte -->
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="app.js"></script>
- <script>
- var app;
- document.addEventListener('DOMContentLoaded', function () {
- app = new NutzerProfilApp();
- app.init();
- });
- </script>
- </body>
-</html>
diff --git a/web/profil2/stile.css b/web/profil2/stile.css
deleted file mode 100644
index 30d3a8a..0000000
--- a/web/profil2/stile.css
+++ /dev/null
@@ -1,378 +0,0 @@
-/* aus App-Vorlage */
-
-html, body {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- font-size: larger;
- font-family: 'Roboto Condensed';
- -webkit-text-size-adjust: none;
- /* touch-action: manipulation;*/
-}
-body {
- min-height: 0; /* Anmerkung 1 */
- display: flex;
- flex-flow: column;
-}
-.inhalt {
- display: flex;
- flex-flow: row;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- /* background-color: #ededed; */
- overflow: hidden;
-}
-.nord {
- background-color: #eee;
- display: flex;
- flex-flow: row;
- height: 2em;
- align-items: center;
- justify-content: space-between;
-}
-.sued {
- height: 1.5em;
- overflow: hidden;
- transition: all 0.3s ease-in;
- background-color: lightgray;
-}
-.west {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 4em;
- background-color: white;
- transition: all 0.3s ease-in;
- overflow: hidden;
- white-space: nowrap;
-}
-.ost {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 6em;
- transition: all 0.3s ease-in;
- background-color: antiquewhite;
- overflow: hidden;
-}
-.zentrum-behaelter {
- display: flex;
- flex-flow: column;
- /* background-color: #eaeaea; */
- height: 100%;
- width: 100%;
- padding: 0 0.4em 0 0.4em;
-}
-
-.zentrum {
- width: 100%;
- height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
-}
-
-.zentraler-inhalt {
- padding: 0.5em;
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.zentrum-liste {
- overflow-x: hidden;
- overflow-y: auto;
-}
-/*
- Anmerkungen:
- 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
- http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
- 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
- immer ueber das gesamte Browserfenster ausdehnt.
-*/
-
-/* Kopfleiste */
-
-.app-titel {
- 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-area {
- display: flex;
- flex-flow: row;
- justify-content: flex-end;
- padding: 0 0.3em 0 0;
- width: 4em;
-}
-
-.top-btn {
- margin: 0;
- padding: 0 0.2em 0 0.2em;
- height: 28px;
- line-height: 24px;
- text-align: center;
- font-size: large;
- background-color: white;
- /* width: 1em; */
-}
-
-.del-user-btn {
- margin: 0 1.5em 0 1em;
- height: 28px;
- line-height: 24px;
- text-align: center;
-}
-
-.danger-btn {
- background-color: lightcoral;
-}
-
-#user-form {
- display: flex;
- flex-flow: column;
-}
-
-.profil-angabe {
- margin: 0.8em 0 0 0;
-}
-
-.user-save-btn {
- margin: 2.5em 0 0 0;
- width: 16em;
-}
-
-@media (min-width: 800px) {
- .zentrum-behaelter {
- padding: 0 1em 0 1em;
- }
- .zentrum-behaelter, .nord {
- margin: 0 10% 0 10%;
- }
- .profil-angabe {
- width: 70%;
- }
- .user-save-btn {
- width: 16em;
- }
-}
-@media (min-width: 1200px) {
- .zentrum-behaelter {
- padding: 0 1.5em 0 1.5em;
- }
- .zentrum-behaelter, .nord {
- margin: 0 15% 0 15%;
- }
- .profil-angabe {
- width: 70%;
- }
- .user-save-btn {
- width: 16em;
- }
-}
-
-@font-face {
- font-family: 'Roboto Condensed';
- src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-
-/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
-
-@font-face {
- font-family: 'picto';
- src: url('../font/picto.eot?52325148');
- src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
- url('../font/picto.woff2?52325148') format('woff2'),
- url('../font/picto.woff?52325148') format('woff'),
- url('../font/picto.ttf?52325148') format('truetype'),
- url('../font/picto.svg?52325148#picto') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
- @font-face {
- font-family: 'picto';
- src: url('../font/picto.svg?52325148#picto') format('svg');
- }
-}
-*/
-
- [class^="icon-"]:before, [class*=" icon-"]:before {
- font-family: "picto";
- font-style: normal;
- font-weight: normal;
- speak: none;
-
- display: inline-block;
- text-decoration: inherit;
- width: 1em;
- margin-right: .2em;
- text-align: center;
- /* opacity: .8; */
-
- /* For safety - reset parent styles, that can break glyph codes*/
- font-variant: normal;
- text-transform: none;
-
- /* fix buttons height, for twitter bootstrap */
- line-height: 1em;
-
- /* Animation center compensation - margins should be symmetric */
- /* remove if not needed */
- margin-left: .2em;
-
- /* you can be more comfortable with increased icons size */
- /* font-size: 120%; */
-
- /* Font smoothing. That was taken from TWBS */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- /* Uncomment for 3D effect */
- /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.icon-user:before { content: '\e800'; } /* '' */
-.icon-cog:before { content: '\e801'; } /* '' */
-.icon-off:before { content: '\e802'; } /* '' */
-.icon-user-plus:before { content: '\f234'; } /* '' */
-.icon-user-times:before { content: '\f235'; } /* '' */
-
-
-
-/* von Skeleton */
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- display: inline-block;
- height: 38px;
- padding: 0 30px;
- color: #555;
- text-align: center;
- font-size: 11px;
- font-weight: 600;
- line-height: 38px;
- letter-spacing: .1rem;
- text-transform: uppercase;
- text-decoration: none;
- white-space: nowrap;
- background-color: transparent;
- border-radius: 4px;
- border: 1px solid #bbb;
- cursor: pointer;
- box-sizing: border-box; }
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
- color: #333;
- border-color: #888;
- outline: 0; }
-.button.button-primary,
-button.button-primary,
-input[type="submit"].button-primary,
-input[type="reset"].button-primary,
-input[type="button"].button-primary {
- color: #FFF;
- background-color: #33C3F0;
- border-color: #33C3F0; }
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-button.button-primary:focus,
-input[type="submit"].button-primary:focus,
-input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
- color: #FFF;
- background-color: #1EAEDB;
- border-color: #1EAEDB; }
-
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
- height: 38px;
- padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- background-color: #fff;
- border: 1px solid #D1D1D1;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none; }
-textarea {
- min-height: 65px;
- padding-top: 6px;
- padding-bottom: 6px; }
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
- border: 1px solid #33C3F0;
- outline: 0; }
-label,
-legend {
- display: block;
- margin-bottom: .5rem;
- font-weight: 600; }
-fieldset {
- padding: 0;
- border-width: 0; }
-input[type="checkbox"],
-input[type="radio"] {
- display: inline; }
-label > .label-body {
- display: inline-block;
- margin-left: .5rem;
- font-weight: normal; }
diff --git a/web/ui-alt/index.html b/web/ui-alt/index.html
new file mode 100644
index 0000000..f11ade7
--- /dev/null
+++ b/web/ui-alt/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Benutzer</title>
+ <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="stile.css">
+ <script id="tpl-list" type="x-tmpl-mustache">
+ {{#List}}
+ {{#List}}
+ <option value="{{ String }}">{{ String }}</option>'
+ {{/List}}
+ {{/List}}
+ </script>
+ </head>
+ <body>
+ <div id="inhalt">
+ <ul class="nav">
+ <li class="nav-item dropdown">
+ <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
+ <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
+ <a class="dropdown-item disabled" href="#">Benutzer verwalten</a>
+ <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
+ <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
+ <div class="dropdown-divider"></div>
+ <a id="profil" class="dropdown-item" href="/um/profil">Profil</a>
+ <a id="logout" class="dropdown-item" href="#">Abmelden</a>
+ </div>
+ </li>
+ </ul>
+ <!-- <h1>Benutzer</h1> -->
+ <div id="user-list-form">
+ <select multiple class="form-control eingabe role-select" size="5" name="nutzerliste" id="nutzerliste"></select>
+ <div>
+ <input type="button" name="nutzerLoeschen" id="nutzerLoeschen" value="Löschen" class="btn btn-danger">
+ <input type="button" name="nutzerNeu" id="nutzerNeu" value="Neu" class="btn btn-primary">
+ </div>
+ </div>
+ <div id="user-form">
+ <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename">
+ <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
+ <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
+ <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
+ <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
+ <!--<button class="user-cancel-btn">Abbrechen</button>-->
+ <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
+ </div>
+ <div id="user-role-form">
+ <h5>Rollen von <span id="userid"></span></h5>
+ <select multiple class="form-control eingabe role-select" size="5" name="nutzerrollen" id="nutzerrollen"></select>
+ <div>
+ <input type="button" name="nutzerRolleEntziehen" id="nutzerRolleEntziehen" value="Entziehen" class="btn btn-danger">
+ </div>
+ </div>
+ <div id="role-form">
+ <h5>Rollen</h5>
+ <select multiple class="form-control eingabe role-select" size="5" name="rollen" id="rollen"></select>
+ <div>
+ <input type="button" name="neueRolle" id="neueRolle" value="Neu" class="btn btn-primary">
+ <input type="button" name="rolleErteilen" id="rolleErteilen" value="Erteilen" class="btn btn-info">
+ </div>
+ </div>
+ <div id="nav">
+ <button id="nav-back-btn" class="btn btn-secondary">zurück</button>
+ </div>
+ </div>
+ <script src="/jslib/jquery/jquery.min.js"></script>
+ <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
+ <script src="/jslib/mustache/mustache.min.js"></script>
+ <script src="ui.js"></script>
+ <script type="text/javascript" charset="utf-8">
+ //var ui;
+ $(document).ready(function() {
+ um_init();
+ });
+ </script>
+ </body>
+</html>
diff --git a/web/ui-alt/stile.css b/web/ui-alt/stile.css
new file mode 100644
index 0000000..f990909
--- /dev/null
+++ b/web/ui-alt/stile.css
@@ -0,0 +1,42 @@
+
+
+#inhalt {
+ margin-top: 0.5em;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+}
+
+#nutzerliste {
+ height: 10em;
+ width: 80%
+}
+
+#nutzerrollen {
+ height: 5em;
+ width: 80%
+}
+
+#rollen {
+ height: 5em;
+ width: 80%
+}
+
+#nav {
+ margin-top: 1em;
+}
+
+#role-form {
+ margin-top: 1em;
+}
+
+#user-role-form {
+ margin-top: 1em;
+}
+
+.eingabe {
+ margin-top: 0.5em;
+}
+
+.role-select {
+ margin-bottom: 0.5em;
+}
\ No newline at end of file
diff --git a/web/ui/ui.js b/web/ui-alt/ui.js
similarity index 100%
rename from web/ui/ui.js
rename to web/ui-alt/ui.js
diff --git a/web/ui2/data/tpl/alle-rollen.tpl b/web/ui/data/tpl/alle-rollen.tpl
similarity index 100%
rename from web/ui2/data/tpl/alle-rollen.tpl
rename to web/ui/data/tpl/alle-rollen.tpl
diff --git a/web/ui2/data/tpl/app-menu.tpl b/web/ui/data/tpl/app-menu.tpl
similarity index 100%
rename from web/ui2/data/tpl/app-menu.tpl
rename to web/ui/data/tpl/app-menu.tpl
diff --git a/web/ui2/data/tpl/dlg-del-conf.tpl b/web/ui/data/tpl/dlg-del-conf.tpl
similarity index 100%
rename from web/ui2/data/tpl/dlg-del-conf.tpl
rename to web/ui/data/tpl/dlg-del-conf.tpl
diff --git a/web/ui2/data/tpl/dlg-info.tpl b/web/ui/data/tpl/dlg-info.tpl
similarity index 100%
rename from web/ui2/data/tpl/dlg-info.tpl
rename to web/ui/data/tpl/dlg-info.tpl
diff --git a/web/ui2/data/tpl/dlg-nutzer-neu.tpl b/web/ui/data/tpl/dlg-nutzer-neu.tpl
similarity index 100%
rename from web/ui2/data/tpl/dlg-nutzer-neu.tpl
rename to web/ui/data/tpl/dlg-nutzer-neu.tpl
diff --git a/web/ui2/data/tpl/dlg-rolle-neu.tpl b/web/ui/data/tpl/dlg-rolle-neu.tpl
similarity index 100%
rename from web/ui2/data/tpl/dlg-rolle-neu.tpl
rename to web/ui/data/tpl/dlg-rolle-neu.tpl
diff --git a/web/ui2/data/tpl/inhalt.tpl b/web/ui/data/tpl/inhalt.tpl
similarity index 100%
rename from web/ui2/data/tpl/inhalt.tpl
rename to web/ui/data/tpl/inhalt.tpl
diff --git a/web/ui2/data/tpl/nutzer-rollen-dlg.tpl b/web/ui/data/tpl/nutzer-rollen-dlg.tpl
similarity index 100%
rename from web/ui2/data/tpl/nutzer-rollen-dlg.tpl
rename to web/ui/data/tpl/nutzer-rollen-dlg.tpl
diff --git a/web/ui/index.html b/web/ui/index.html
index f11ade7..427fa84 100644
--- a/web/ui/index.html
+++ b/web/ui/index.html
@@ -1,82 +1,59 @@
<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Benutzer</title>
- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
+ <title>Nutzerverwaltung</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
+ <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="stile.css">
- <script id="tpl-list" type="x-tmpl-mustache">
- {{#List}}
- {{#List}}
- <option value="{{ String }}">{{ String }}</option>'
- {{/List}}
- {{/List}}
- </script>
</head>
<body>
- <div id="inhalt">
- <ul class="nav">
- <li class="nav-item dropdown">
- <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="/data/dok/wbx/Bedienung.htmi">Hilfe</a>
- <a class="dropdown-item" href="/">Zur Hauptseite der WebBox wechseln</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="/wbx/mng">Apps verwalten</a>
- <a class="dropdown-item disabled" href="#">Benutzer verwalten</a>
- <a class="dropdown-item" href="/file-cms/ui">Dateien verwalten</a>
- <a class="dropdown-item" href="/wbx-dbcon/ui">Datenbanken verwalten</a>
- <div class="dropdown-divider"></div>
- <a id="profil" class="dropdown-item" href="/um/profil">Profil</a>
- <a id="logout" class="dropdown-item" href="#">Abmelden</a>
- </div>
- </li>
- </ul>
- <!-- <h1>Benutzer</h1> -->
- <div id="user-list-form">
- <select multiple class="form-control eingabe role-select" size="5" name="nutzerliste" id="nutzerliste"></select>
- <div>
- <input type="button" name="nutzerLoeschen" id="nutzerLoeschen" value="Löschen" class="btn btn-danger">
- <input type="button" name="nutzerNeu" id="nutzerNeu" value="Neu" class="btn btn-primary">
- </div>
+ <!-- Kopfzeile -->
+ <div class="nord">
+ <div class="back-btn">
+ <button type="button" class="zurueck-btn">❮ Zurück</button>
</div>
- <div id="user-form">
- <input class="form-control eingabe" type="text" size="20" maxlength="30" placeholder="Anmeldename" name="anmeldename" id="anmeldename">
- <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Kennwort" name="kennwort" id="kennwort">
- <input class="form-control eingabe" type="password" size="20" maxlength="30" placeholder="Wiederholung" name="kennwortw" id="kennwortw">
- <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Vorname" name="vorname" id="vorname">
- <input class="form-control eingabe" type="text" size="20" maxlength="250" placeholder="Name" name="nachname" id="nachname">
- <!--<button class="user-cancel-btn">Abbrechen</button>-->
- <button class="user-save-btn btn btn-primary eingabe">Speichern</button>
+ <div class="app-titel">
+ <span id="app-titel">Nutzerverwaltung</span>
</div>
- <div id="user-role-form">
- <h5>Rollen von <span id="userid"></span></h5>
- <select multiple class="form-control eingabe role-select" size="5" name="nutzerrollen" id="nutzerrollen"></select>
- <div>
- <input type="button" name="nutzerRolleEntziehen" id="nutzerRolleEntziehen" value="Entziehen" class="btn btn-danger">
- </div>
- </div>
- <div id="role-form">
- <h5>Rollen</h5>
- <select multiple class="form-control eingabe role-select" size="5" name="rollen" id="rollen"></select>
- <div>
- <input type="button" name="neueRolle" id="neueRolle" value="Neu" class="btn btn-primary">
- <input type="button" name="rolleErteilen" id="rolleErteilen" value="Erteilen" class="btn btn-info">
- </div>
- </div>
- <div id="nav">
- <button id="nav-back-btn" class="btn btn-secondary">zurück</button>
+ <div class="top-btn-area">
+ <button type="button" title="Neuer Benutzer" class="top-btn" id="top-neu-btn"><i class="icon-user-plus"></i></button>
+ <button type="button" title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
</div>
</div>
- <script src="/jslib/jquery/jquery.min.js"></script>
- <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
+ <div class="inhalt">
+ <!-- westliche Seitenleiste -->
+ <div class="west"></div>
+ <div class="zentrum-behaelter">
+ <!-- Einblendbereich -->
+ <div class="dialog"></div>
+ <!-- zentraler Inhaltsbereich -->
+ <div class="zentrum">
+ <div class="zentraler-inhalt">
+ <div class="zentrum-liste" id="nutzer">
+ <figure>
+ <i class="demo-icon icon-folder"></i>
+ <figcaption class="i-name">icon-folder</figcaption>
+ </figure>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- oestliche Seitenleiste -->
+ <div class="ost"></div>
+ </div>
+ <!-- Fusszeile -->
+ <div class="sued sued-open">
+ Fußzeile
+ </div>
+ <!-- Skripte -->
<script src="/jslib/mustache/mustache.min.js"></script>
- <script src="ui.js"></script>
- <script type="text/javascript" charset="utf-8">
- //var ui;
- $(document).ready(function() {
- um_init();
+ <script src="js/app.js"></script>
+ <script>
+ var app;
+ document.addEventListener('DOMContentLoaded', function () {
+ app = new NutzerApp();
+ app.init();
});
</script>
</body>
diff --git a/web/ui2/js/app.js b/web/ui/js/app.js
similarity index 98%
rename from web/ui2/js/app.js
rename to web/ui/js/app.js
index 76b09c1..fbbf052 100644
--- a/web/ui2/js/app.js
+++ b/web/ui/js/app.js
@@ -8,6 +8,7 @@
var dlg = document.querySelector(".dialog");
dlg.style.flexBasis = '0em';
document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
+ document.querySelector('#top-logout-btn').addEventListener('click', self.logout);
document.querySelector('.west').style.flexBasis = '0em';
document.querySelector('.ost').style.flexBasis = '0em';
self.get_login();
@@ -322,12 +323,12 @@
});
};
- this.um_logout = function() {
+ this.logout = function() {
var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
var u = '../pub' + m;
self.http_get(u, function (resp) {
//$('#userMenu').text('nicht angemeldet');
- window.location.href = '../logout.html';
+ window.location.href = '../logout.jsp';
});
};
diff --git a/web/ui/stile.css b/web/ui/stile.css
index f990909..6c6c3b2 100644
--- a/web/ui/stile.css
+++ b/web/ui/stile.css
@@ -1,42 +1,485 @@
+/*
+ Created on : 24.01.2020, 09:08:45
+ Author : ulrich
+*/
+/* aus App-Vorlage */
-#inhalt {
- margin-top: 0.5em;
- margin-left: 0.5em;
- margin-right: 0.5em;
+html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%; /* Anmerkung 2 */
+ font-size: larger;
+ font-family: 'Roboto Condensed';
+ -webkit-text-size-adjust: none;
+ /* touch-action: manipulation;*/
+}
+body {
+ min-height: 0; /* Anmerkung 1 */
+ display: flex;
+ flex-flow: column;
+}
+.inhalt {
+ display: flex;
+ flex-flow: row;
+ height: 100%; /* Anmerkung 2 */
+ min-height: 0; /* Anmerkung 1 */
+ /* background-color: #ededed; */
+ overflow: hidden;
+}
+.nord {
+ background-color: #eee;
+ display: flex;
+ flex-flow: row;
+ height: 2em;
+ justify-content: space-between;
+ align-items: center;
+ /*align-self: stretch;*/
+}
+.sued {
+ height: 1.5em;
+ overflow: hidden;
+ transition: all 0.3s ease-in;
+ background-color: lightgray;
+}
+.west {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 4em;
+ background-color: white;
+ transition: all 0.3s ease-in;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ost {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 6em;
+ transition: all 0.3s ease-in;
+ background-color: antiquewhite;
+ overflow: hidden;
+}
+.zentrum-behaelter {
+ display: flex;
+ flex-flow: column;
+ /* background-color: #eaeaea; */
+ height: 100%;
+ width: 100%;
+ padding: 0 0.4em 0 0.4em;
}
-#nutzerliste {
- height: 10em;
- width: 80%
+.zentrum {
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
}
-#nutzerrollen {
- height: 5em;
- width: 80%
+.zentraler-inhalt {
+ padding: 0.5em;
+ overflow-x: hidden;
+ overflow-y: auto;
}
-#rollen {
- height: 5em;
- width: 80%
+.zentrum-liste {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+/*
+ Anmerkungen:
+ 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
+ http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
+ 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
+ immer ueber das gesamte Browserfenster ausdehnt.
+*/
+
+/* Kopfleiste */
+
+.app-titel {
+ margin-left: 0.1em;
+ color: black;
}
-#nav {
- margin-top: 1em;
+.zurueck-btn, .zurueck-btn:focus {
+ border: 0;
+ margin: 0 1.2em 0 0.6em;
+ padding: 0;
+ color: black;
}
-#role-form {
- margin-top: 1em;
+.zurueck-btn:hover {
+ color: #888;
}
-#user-role-form {
- margin-top: 1em;
+.top-btn-area {
+ /*margin-left: auto;*/
+ margin: 0 1em 0 0;
}
-.eingabe {
- margin-top: 0.5em;
+.top-btn {
+ margin: 0;
+ padding: 0 0.2em 0 0.2em;
+ height: 28px;
+ line-height: 24px;
+ text-align: center;
+ font-size: large;
+ background-color: white;
+ /* width: 1em; */
}
-.role-select {
- margin-bottom: 0.5em;
-}
\ No newline at end of file
+.del-user-btn {
+ margin: 0 1.5em 0 1em;
+ margin-left: auto;
+ height: 32px;
+ line-height: 12px;
+ text-align: center;
+ font-size: medium;
+}
+
+.danger-btn {
+ background-color: #ffcccc;
+}
+
+/* Nutzerliste */
+
+.nutzer-liste-eintrag {
+ margin: 0;
+ padding: 0.3em 0 0 0;
+ cursor: pointer;
+}
+
+.nutzer-gewaehlt {
+ background-color: lightsteelblue;
+}
+
+/* ... */
+
+.pointer-cursor {
+ cursor: pointer;
+}
+
+.breadcrumb {
+ background-color: beige;
+ padding: 0.2em;
+ font-size: medium;
+}
+
+/* Dialoge (Info, Neuer Nutzer, ..) */
+
+.dialog {
+ display: flex;
+ flex-flow: column;
+ position: relative;
+ transition: all 0.3s ease-in;
+ height: 100%;
+ /* white-space: nowrap; */
+}
+
+.dlg-behaelter {
+ display: flex;
+ flex-flow: column;
+ /* line-height: 1.6; */
+ height: 100%;
+ padding: 0.4em;
+}
+
+
+.dlg-info {
+ display: flex;
+ flex-flow: column;
+ background-color: #dcf2fb; /* blau */
+ padding: 0.4em;
+}
+
+.dlg-info-app-titel {
+ margin-bottom: 0.4em;
+}
+
+.nutzer-form {
+ padding: 0.3em;
+}
+
+.nutzer-eingabe {
+ width: 100%;
+ margin: 0.3em;
+}
+
+.form-button-footer {
+ padding: 0.4em;
+}
+
+.bold-text {
+ font-weight: bold;
+}
+
+
+/*
+ Close Button
+
+ <div>
+ <span class="close-btn">✖</span>
+ </div>
+*/
+
+.close-btn {
+ position: absolute;
+ top: 0px;
+ right: 0.4em;
+ margin: 0;
+ padding: 0;
+ font-size: 1.3em;
+ color: #b8b8b8;
+}
+
+/* Nutzer-Rollen */
+
+.rollen-ansicht-titel {
+ display: flex;
+ flex-flow: row;
+ align-items: center;
+ align-self: stretch;
+ margin: 0;
+ padding: 0;
+ vertical-align: central;
+}
+
+.rollen-ueberschrift {
+ margin: 1.2em 0 0.2em 0;
+ padding: 0;
+}
+
+.rollen-behaelter {
+ margin: 0;
+ padding: 0;
+}
+
+.granted-role-btn {
+ height: 2.5em;
+ padding: 0 0.5em;
+ margin: 0.2em;
+ text-transform: none;
+ background-color: #fdfbe2;
+ font-size: medium;
+}
+
+.avl-role-btn {
+ height: 2.5em;
+ padding: 0 0.5em;
+ margin: 0.2em;
+ background-color: #eee;
+ text-transform: none;
+ font-size: medium;
+}
+
+@media (min-width: 800px) {
+ .zentrum-behaelter {
+ padding: 0 1em 0 1em;
+ }
+ .zentrum-behaelter, .nord {
+ margin: 0 10% 0 10%;
+ }
+}
+@media (min-width: 1200px) {
+ .zentrum-behaelter {
+ padding: 0 1.5em 0 1.5em;
+ }
+ .zentrum-behaelter, .nord {
+ margin: 0 15% 0 15%;
+ }
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
+
+@font-face {
+ font-family: 'picto';
+ src: url('../font/picto.eot?52325148');
+ src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
+ url('../font/picto.woff2?52325148') format('woff2'),
+ url('../font/picto.woff?52325148') format('woff'),
+ url('../font/picto.ttf?52325148') format('truetype'),
+ url('../font/picto.svg?52325148#picto') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ @font-face {
+ font-family: 'picto';
+ src: url('../font/picto.svg?52325148#picto') format('svg');
+ }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+ font-family: "picto";
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+
+ display: inline-block;
+ text-decoration: inherit;
+ width: 1em;
+ margin-right: .2em;
+ text-align: center;
+ /* opacity: .8; */
+
+ /* For safety - reset parent styles, that can break glyph codes*/
+ font-variant: normal;
+ text-transform: none;
+
+ /* fix buttons height, for twitter bootstrap */
+ line-height: 1em;
+
+ /* Animation center compensation - margins should be symmetric */
+ /* remove if not needed */
+ margin-left: .2em;
+
+ /* you can be more comfortable with increased icons size */
+ /* font-size: 120%; */
+
+ /* Font smoothing. That was taken from TWBS */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Uncomment for 3D effect */
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-user:before { content: '\e800'; } /* '' */
+.icon-cog:before { content: '\e801'; } /* '' */
+.icon-off:before { content: '\e802'; } /* '' */
+.icon-user-plus:before { content: '\f234'; } /* '' */
+.icon-user-times:before { content: '\f235'; } /* '' */
+
+/* von Skeleton */
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ display: inline-block;
+ height: 38px;
+ padding: 0 30px;
+ color: #555;
+ text-align: center;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 38px;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: transparent;
+ border-radius: 4px;
+ border: 1px solid #bbb;
+ cursor: pointer;
+ box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+ color: #333;
+ border-color: #888;
+ outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+ color: #FFF;
+ background-color: #33C3F0;
+ border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+ color: #FFF;
+ background-color: #1EAEDB;
+ border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+ height: 38px;
+ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+ background-color: #fff;
+ border: 1px solid #D1D1D1;
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none; }
+textarea {
+ min-height: 65px;
+ padding-top: 6px;
+ padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+ border: 1px solid #33C3F0;
+ outline: 0; }
+label,
+legend {
+ display: block;
+ margin-bottom: .5rem;
+ font-weight: 600; }
+fieldset {
+ padding: 0;
+ border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+ display: inline; }
+label > .label-body {
+ display: inline-block;
+ margin-left: .5rem;
+ font-weight: normal; }
+
diff --git a/web/ui2/index.html b/web/ui2/index.html
deleted file mode 100644
index 427fa84..0000000
--- a/web/ui2/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Nutzerverwaltung</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <link rel="stylesheet" type="text/css" href="stile.css">
- </head>
- <body>
- <!-- Kopfzeile -->
- <div class="nord">
- <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" title="Neuer Benutzer" class="top-btn" id="top-neu-btn"><i class="icon-user-plus"></i></button>
- <button type="button" title="Abmelden" class="top-btn" id="top-logout-btn"><i class="icon-off"></i></button>
- </div>
- </div>
- <div class="inhalt">
- <!-- westliche Seitenleiste -->
- <div class="west"></div>
- <div class="zentrum-behaelter">
- <!-- Einblendbereich -->
- <div class="dialog"></div>
- <!-- zentraler Inhaltsbereich -->
- <div class="zentrum">
- <div class="zentraler-inhalt">
- <div class="zentrum-liste" id="nutzer">
- <figure>
- <i class="demo-icon icon-folder"></i>
- <figcaption class="i-name">icon-folder</figcaption>
- </figure>
- </div>
- </div>
- </div>
- </div>
- <!-- oestliche Seitenleiste -->
- <div class="ost"></div>
- </div>
- <!-- Fusszeile -->
- <div class="sued sued-open">
- Fußzeile
- </div>
- <!-- Skripte -->
- <script src="/jslib/mustache/mustache.min.js"></script>
- <script src="js/app.js"></script>
- <script>
- var app;
- document.addEventListener('DOMContentLoaded', function () {
- app = new NutzerApp();
- app.init();
- });
- </script>
- </body>
-</html>
diff --git a/web/ui2/stile.css b/web/ui2/stile.css
deleted file mode 100644
index 6c6c3b2..0000000
--- a/web/ui2/stile.css
+++ /dev/null
@@ -1,485 +0,0 @@
-/*
- Created on : 24.01.2020, 09:08:45
- Author : ulrich
-*/
-
-/* aus App-Vorlage */
-
-html, body {
- margin: 0;
- padding: 0;
- height: 100%; /* Anmerkung 2 */
- font-size: larger;
- font-family: 'Roboto Condensed';
- -webkit-text-size-adjust: none;
- /* touch-action: manipulation;*/
-}
-body {
- min-height: 0; /* Anmerkung 1 */
- display: flex;
- flex-flow: column;
-}
-.inhalt {
- display: flex;
- flex-flow: row;
- height: 100%; /* Anmerkung 2 */
- min-height: 0; /* Anmerkung 1 */
- /* background-color: #ededed; */
- overflow: hidden;
-}
-.nord {
- background-color: #eee;
- display: flex;
- flex-flow: row;
- height: 2em;
- justify-content: space-between;
- align-items: center;
- /*align-self: stretch;*/
-}
-.sued {
- height: 1.5em;
- overflow: hidden;
- transition: all 0.3s ease-in;
- background-color: lightgray;
-}
-.west {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 4em;
- background-color: white;
- transition: all 0.3s ease-in;
- overflow: hidden;
- white-space: nowrap;
-}
-.ost {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 6em;
- transition: all 0.3s ease-in;
- background-color: antiquewhite;
- overflow: hidden;
-}
-.zentrum-behaelter {
- display: flex;
- flex-flow: column;
- /* background-color: #eaeaea; */
- height: 100%;
- width: 100%;
- padding: 0 0.4em 0 0.4em;
-}
-
-.zentrum {
- width: 100%;
- height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.zentraler-inhalt {
- padding: 0.5em;
- overflow-x: hidden;
- overflow-y: auto;
-}
-
-.zentrum-liste {
- overflow-x: hidden;
- overflow-y: auto;
-}
-/*
- Anmerkungen:
- 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
- http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
- 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
- immer ueber das gesamte Browserfenster ausdehnt.
-*/
-
-/* Kopfleiste */
-
-.app-titel {
- 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-area {
- /*margin-left: auto;*/
- margin: 0 1em 0 0;
-}
-
-.top-btn {
- margin: 0;
- padding: 0 0.2em 0 0.2em;
- height: 28px;
- line-height: 24px;
- text-align: center;
- font-size: large;
- background-color: white;
- /* width: 1em; */
-}
-
-.del-user-btn {
- margin: 0 1.5em 0 1em;
- margin-left: auto;
- height: 32px;
- line-height: 12px;
- text-align: center;
- font-size: medium;
-}
-
-.danger-btn {
- background-color: #ffcccc;
-}
-
-/* Nutzerliste */
-
-.nutzer-liste-eintrag {
- margin: 0;
- padding: 0.3em 0 0 0;
- cursor: pointer;
-}
-
-.nutzer-gewaehlt {
- background-color: lightsteelblue;
-}
-
-/* ... */
-
-.pointer-cursor {
- cursor: pointer;
-}
-
-.breadcrumb {
- background-color: beige;
- padding: 0.2em;
- font-size: medium;
-}
-
-/* Dialoge (Info, Neuer Nutzer, ..) */
-
-.dialog {
- display: flex;
- flex-flow: column;
- position: relative;
- transition: all 0.3s ease-in;
- height: 100%;
- /* white-space: nowrap; */
-}
-
-.dlg-behaelter {
- display: flex;
- flex-flow: column;
- /* line-height: 1.6; */
- height: 100%;
- padding: 0.4em;
-}
-
-
-.dlg-info {
- display: flex;
- flex-flow: column;
- background-color: #dcf2fb; /* blau */
- padding: 0.4em;
-}
-
-.dlg-info-app-titel {
- margin-bottom: 0.4em;
-}
-
-.nutzer-form {
- padding: 0.3em;
-}
-
-.nutzer-eingabe {
- width: 100%;
- margin: 0.3em;
-}
-
-.form-button-footer {
- padding: 0.4em;
-}
-
-.bold-text {
- font-weight: bold;
-}
-
-
-/*
- Close Button
-
- <div>
- <span class="close-btn">✖</span>
- </div>
-*/
-
-.close-btn {
- position: absolute;
- top: 0px;
- right: 0.4em;
- margin: 0;
- padding: 0;
- font-size: 1.3em;
- color: #b8b8b8;
-}
-
-/* Nutzer-Rollen */
-
-.rollen-ansicht-titel {
- display: flex;
- flex-flow: row;
- align-items: center;
- align-self: stretch;
- margin: 0;
- padding: 0;
- vertical-align: central;
-}
-
-.rollen-ueberschrift {
- margin: 1.2em 0 0.2em 0;
- padding: 0;
-}
-
-.rollen-behaelter {
- margin: 0;
- padding: 0;
-}
-
-.granted-role-btn {
- height: 2.5em;
- padding: 0 0.5em;
- margin: 0.2em;
- text-transform: none;
- background-color: #fdfbe2;
- font-size: medium;
-}
-
-.avl-role-btn {
- height: 2.5em;
- padding: 0 0.5em;
- margin: 0.2em;
- background-color: #eee;
- text-transform: none;
- font-size: medium;
-}
-
-@media (min-width: 800px) {
- .zentrum-behaelter {
- padding: 0 1em 0 1em;
- }
- .zentrum-behaelter, .nord {
- margin: 0 10% 0 10%;
- }
-}
-@media (min-width: 1200px) {
- .zentrum-behaelter {
- padding: 0 1.5em 0 1.5em;
- }
- .zentrum-behaelter, .nord {
- margin: 0 15% 0 15%;
- }
-}
-
-@font-face {
- font-family: 'Roboto Condensed';
- src: url('/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
-
-@font-face {
- font-family: 'picto';
- src: url('../font/picto.eot?52325148');
- src: url('../font/picto.eot?52325148#iefix') format('embedded-opentype'),
- url('../font/picto.woff2?52325148') format('woff2'),
- url('../font/picto.woff?52325148') format('woff'),
- url('../font/picto.ttf?52325148') format('truetype'),
- url('../font/picto.svg?52325148#picto') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
- @font-face {
- font-family: 'picto';
- src: url('../font/picto.svg?52325148#picto') format('svg');
- }
-}
-*/
-
- [class^="icon-"]:before, [class*=" icon-"]:before {
- font-family: "picto";
- font-style: normal;
- font-weight: normal;
- speak: none;
-
- display: inline-block;
- text-decoration: inherit;
- width: 1em;
- margin-right: .2em;
- text-align: center;
- /* opacity: .8; */
-
- /* For safety - reset parent styles, that can break glyph codes*/
- font-variant: normal;
- text-transform: none;
-
- /* fix buttons height, for twitter bootstrap */
- line-height: 1em;
-
- /* Animation center compensation - margins should be symmetric */
- /* remove if not needed */
- margin-left: .2em;
-
- /* you can be more comfortable with increased icons size */
- /* font-size: 120%; */
-
- /* Font smoothing. That was taken from TWBS */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- /* Uncomment for 3D effect */
- /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.icon-user:before { content: '\e800'; } /* '' */
-.icon-cog:before { content: '\e801'; } /* '' */
-.icon-off:before { content: '\e802'; } /* '' */
-.icon-user-plus:before { content: '\f234'; } /* '' */
-.icon-user-times:before { content: '\f235'; } /* '' */
-
-/* von Skeleton */
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- display: inline-block;
- height: 38px;
- padding: 0 30px;
- color: #555;
- text-align: center;
- font-size: 11px;
- font-weight: 600;
- line-height: 38px;
- letter-spacing: .1rem;
- text-transform: uppercase;
- text-decoration: none;
- white-space: nowrap;
- background-color: transparent;
- border-radius: 4px;
- border: 1px solid #bbb;
- cursor: pointer;
- box-sizing: border-box; }
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
- color: #333;
- border-color: #888;
- outline: 0; }
-.button.button-primary,
-button.button-primary,
-input[type="submit"].button-primary,
-input[type="reset"].button-primary,
-input[type="button"].button-primary {
- color: #FFF;
- background-color: #33C3F0;
- border-color: #33C3F0; }
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-button.button-primary:focus,
-input[type="submit"].button-primary:focus,
-input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
- color: #FFF;
- background-color: #1EAEDB;
- border-color: #1EAEDB; }
-
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
- height: 38px;
- padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- background-color: #fff;
- border: 1px solid #D1D1D1;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none; }
-textarea {
- min-height: 65px;
- padding-top: 6px;
- padding-bottom: 6px; }
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
- border: 1px solid #33C3F0;
- outline: 0; }
-label,
-legend {
- display: block;
- margin-bottom: .5rem;
- font-weight: 600; }
-fieldset {
- padding: 0;
- border-width: 0; }
-input[type="checkbox"],
-input[type="radio"] {
- display: inline; }
-label > .label-body {
- display: inline-block;
- margin-left: .5rem;
- font-weight: normal; }
-
--
Gitblit v1.9.3