diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/main/resources/static/style.css | 63 | ||||
| -rw-r--r-- | src/main/resources/templates/fragments.html | 24 |
2 files changed, 70 insertions, 17 deletions
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css index a746832..0844e0b 100644 --- a/src/main/resources/static/style.css +++ b/src/main/resources/static/style.css @@ -40,7 +40,7 @@ body { nav { margin: 0 auto; - padding: 2em 0; + padding: 1em 0; line-height: 1.5rem; max-width: 1140px; @@ -48,18 +48,18 @@ nav { border-bottom: 1px solid var(--table-border); } -nav > a.nav-home { +nav a.nav-home { float: left; color: var(--text); line-height: 1.5em; text-decoration: none; - font-size: 1.5em; + font-size: 2em; font-weight: bold; } -nav > a.nav-home > img { +nav a.nav-home > img { width: 1.5em; vertical-align: middle; } @@ -80,6 +80,57 @@ nav > ul > li.login { margin: 0 0 0 1em; padding: 0 0 0 2em; border-left: 1px solid var(--table-border); + line-height: 3.5em; +} + +nav > ul > li.login a { + text-decoration: none; + text-transform: none; + padding: 1em; +} + +nav .login .user-name { + font-weight: bold; +} + +nav > ul > li.login > span { + display: inline-block; + margin: 0 .5em; +} + +nav > ul > li.login .user-icon { + flex-direction: column; + display: inline flex; + vertical-align: middle; + inline-size: 4em; +} + +nav > ul > li.login .user-icon img { + margin: 0 0 -1em 0; + width: 80%; + align-self: center; +} + +nav > ul > li.login .user-icon span { + padding: 0 .6em; + color: white; + font-size: .8em; + font-weight: bold; + border-radius: 4px; + line-height: normal; + text-align: center; +} + +nav > ul > li.login .user-icon span.guest { + background: darkslategray; +} + +nav > ul > li.login .user-icon span.user { + background: darkgreen; +} + +nav > ul > li.login .user-icon span.admin { + background: darkred; } nav li a { @@ -89,10 +140,6 @@ nav li a { font-weight: 700; } -nav li.login a { - color: var(--bg-red); -} - nav li a:hover { text-decoration: underline; } diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html index bfa36a2..467a483 100644 --- a/src/main/resources/templates/fragments.html +++ b/src/main/resources/templates/fragments.html @@ -7,10 +7,12 @@ <body> <div th:fragment="nav"> <nav> - <a class="nav-home" th:href="@{/}"> - <img th:src="@{/icon.svg}" alt="Icon" /> - <span>ETL-Processor</span> - </a> + <span> + <a class="nav-home" th:href="@{/}"> + <img th:src="@{/icon.svg}" alt="Icon" /> + <span>ETL-Processor</span> + </a> + </span> <ul> <li><a th:href="@{/}">Übersicht</a></li> <li><a th:href="@{/statistics}">Statistiken</a></li> @@ -18,15 +20,19 @@ <a th:href="@{/configs}">Konfiguration</a> </li> <li class="login" sec:authorize="not isAuthenticated()"> - <a th:href="@{/login}">Login</a> + <a class="btn btn-blue" th:href="@{/login}">Login</a> </li> <li class="login" sec:authorize="isAuthenticated()"> <span> - <span>👤</span> - <span sec:authentication="name">?</span> + <div class="user-icon"> + <img th:src="@{user.svg}" alt="User-Image"> + <span sec:authorize="hasRole('ADMIN')" class="user-role admin">Admin</span> + <span sec:authorize="hasRole('USER')" class="user-role user">User</span> + <span sec:authorize="hasRole('GUEST')" class="user-role guest">Guest</span> + </div> + <span class="user-name" sec:authentication="name">?</span> </span> - - <a th:href="@{/logout}">Abmelden</a> + <a class="btn btn-red" th:href="@{/logout}">Abmelden</a> </li> </ul> </nav> |