pcvolkmer/etl-processor
1
0
Fork 0
mirror of https://github.com/pcvolkmer/etl-processor.git synced 2025-04-19 17:26:51 +00:00
Code Issues Releases Activity

style: change login/logout style

Browse Source
This commit is contained in:
Paul-Christian Volkmer 2024-03-04 12:50:07 +01:00
parent 9392bcadc9
commit 9eb65788e1
2 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/main/resources/static/style.css
View File

@ -40,7 +40,7 @@ body {
nav { nav {
margin: 0 auto; margin: 0 auto;
padding: 2em 0; padding: 1em 0;
line-height: 1.5rem; line-height: 1.5rem;
max-width: 1140px; max-width: 1140px;
@ -48,18 +48,18 @@ nav {
border-bottom: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border);
} }
nav > a.nav-home { nav a.nav-home {
float: left; float: left;
color: var(--text); color: var(--text);
line-height: 1.5em; line-height: 1.5em;
text-decoration: none; text-decoration: none;
font-size: 1.5em; font-size: 2em;
font-weight: bold; font-weight: bold;
} }
nav > a.nav-home > img { nav a.nav-home > img {
width: 1.5em; width: 1.5em;
vertical-align: middle; vertical-align: middle;
} }
@ -80,6 +80,57 @@ nav > ul > li.login {
margin: 0 0 0 1em; margin: 0 0 0 1em;
padding: 0 0 0 2em; padding: 0 0 0 2em;
border-left: 1px solid var(--table-border); 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 { nav li a {
@ -89,10 +140,6 @@ nav li a {
font-weight: 700; font-weight: 700;
} }
nav li.login a {
color: var(--bg-red);
}
nav li a:hover { nav li a:hover {
text-decoration: underline; text-decoration: underline;
} }

24
src/main/resources/templates/fragments.html
View File

@ -7,10 +7,12 @@
<body> <body>
<div th:fragment="nav"> <div th:fragment="nav">
<nav> <nav>
<a class="nav-home" th:href="@{/}"> <span>
<img th:src="@{/icon.svg}" alt="Icon" /> <a class="nav-home" th:href="@{/}">
<span>ETL-Processor</span> <img th:src="@{/icon.svg}" alt="Icon" />
</a> <span>ETL-Processor</span>
</a>
</span>
<ul> <ul>
<li><a th:href="@{/}">Übersicht</a></li> <li><a th:href="@{/}">Übersicht</a></li>
<li><a th:href="@{/statistics}">Statistiken</a></li> <li><a th:href="@{/statistics}">Statistiken</a></li>
@ -18,15 +20,19 @@
<a th:href="@{/configs}">Konfiguration</a> <a th:href="@{/configs}">Konfiguration</a>
</li> </li>
<li class="login" sec:authorize="not isAuthenticated()"> <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>
<li class="login" sec:authorize="isAuthenticated()"> <li class="login" sec:authorize="isAuthenticated()">
<span> <span>
<span>👤</span> <div class="user-icon">
<span sec:authentication="name">?</span> <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> </span>
&nbsp; <a class="btn btn-red" th:href="@{/logout}">Abmelden</a>
<a th:href="@{/logout}">Abmelden</a>
</li> </li>
</ul> </ul>
</nav> </nav>