layout optimization
This commit is contained in:
Jörg Henke
@ -7,6 +7,31 @@ body {
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
|
||||
.titlemod {
|
||||
font-weight: bolder;
|
||||
color: darkcyan !important;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.navlinkstyle {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.navlinkstyle:hover {
|
||||
color: #1a5fb4;
|
||||
}
|
||||
|
||||
.navback {
|
||||
background-color: ghostwhite;
|
||||
}
|
||||
|
||||
.tabdivblurred {
|
||||
padding: 8px;
|
||||
padding-bottom: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
@ -16,7 +41,7 @@ body {
|
||||
}
|
||||
|
||||
.glassy {
|
||||
background-color: rgba(1,1,1,0.1);
|
||||
background-color: rgba(0, 0, 0s, 0.1);
|
||||
}
|
||||
|
||||
.formpane {
|
||||
@ -47,7 +72,6 @@ body {
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
background-image: linear-gradient(to bottom, #99c1f1, #1a5f64) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -5,65 +5,60 @@
|
||||
<title>Kontakte</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul layout:fragment="title">
|
||||
<li class="nav-item"><a class="nav-link titlemod">Kontakte</a></li>
|
||||
</ul>
|
||||
<ul layout:fragment="menu">
|
||||
<li class="nav-item" sec:authorize="hasRole('timetrack_user')"><a class="nav-link" th:href="@{/contact/add}">Neuen
|
||||
Kontakt anlegen</a></li>
|
||||
</ul>
|
||||
<main layout:fragment="content">
|
||||
<div class="accordion" id="acdiv">
|
||||
<div class="accordion-item glassy">
|
||||
<h2 class="accordion-header" id="headingDashboard">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dashboard" aria-expanded="true"
|
||||
aria-controls="dashboard">Dashboard</button>
|
||||
</h2>
|
||||
<div id="dashboard" class="accordion-collapse collapse show" aria-labelledby="headingDashboard" data-bs-parent="#acdiv">
|
||||
<div class="accordion-body">
|
||||
<div class="row row-cols-12 ro-cols-lg-4 ro-cols-md-3 ro-cols-sd-2 g-4" style="margin: 8px">
|
||||
<div class="col" th:each="contact : ${contactList}">
|
||||
<div class="card text-dark bg-light shadow" style="width: 18rem">
|
||||
<div class="card-header text-center">
|
||||
<font th:text="${contact.forename} + ' ' + ${contact.surname}" style="font-size: larger"></font>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<span th:text="${contact.type} + ': ' + ${contact.contact}"></span> <a
|
||||
th:href="@{/contact/edit/{id}(id=${contact.pk})}" sec:authorize="hasRole('timetrack_user')"
|
||||
style="margin-left: 8px;"> <i class="fa fa-edit"></i>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="nav nav-tabs navback" role="tablist">
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle active" data-bs-toggle="tab" href="#div_dashboard">Dashboard</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_list">Liste</a></li>
|
||||
</ul>
|
||||
<div class="tabdivblurred tab-content">
|
||||
<div id="div_dashboard" class="tab-pane active">
|
||||
<div class="accordion-body">
|
||||
<div class="row row-cols-12 ro-cols-lg-4 ro-cols-md-3 ro-cols-sd-2 g-4" style="margin: 8px">
|
||||
<div class="col" th:each="contact : ${contactList}">
|
||||
<div class="card text-dark bg-light shadow" style="width: 18rem">
|
||||
<div class="card-header text-center">
|
||||
<font th:text="${contact.forename} + ' ' + ${contact.surname}" style="font-size: larger"></font>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<span th:text="${contact.type} + ': ' + ${contact.contact}"></span> <a
|
||||
th:href="@{/contact/edit/{id}(id=${contact.pk})}" sec:authorize="hasRole('timetrack_user')" style="margin-left: 8px;">
|
||||
<i class="fa fa-edit"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item glassy">
|
||||
<h2 class="accordion-header" id="headingTable">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#list"
|
||||
aria-expanded="false" aria-controls="list">Liste</button>
|
||||
</h2>
|
||||
<div id="list" class="accordion-collapse collapse" aria-labelledby="headingTable" data-bs-parent="#acdiv">
|
||||
<div class="accordion-body" style="background-color: white">
|
||||
<table class="table table-striped table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vorname</th>
|
||||
<th>Nachname</th>
|
||||
<th>Kontakt</th>
|
||||
<th>Typ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="contact : ${contactList}">
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.forename}"></span></a></td>
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.surname}"></span></a></td>
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.contact}"></span></a></td>
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.type}"></span></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_list" class="tab-pane fade">
|
||||
<div class="accordion-body" style="background-color: white">
|
||||
<table class="table table-striped table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vorname</th>
|
||||
<th>Nachname</th>
|
||||
<th>Kontakt</th>
|
||||
<th>Typ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="contact : ${contactList}">
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.forename}"></span></a></td>
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.surname}"></span></a></td>
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.contact}"></span></a></td>
|
||||
<td><a th:href="@{/contact/edit/{id}(id=${contact.pk})}"><span th:text="${contact.type}"></span></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
38
src/main/resources/templates/done/list.html
Normal file
38
src/main/resources/templates/done/list.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||
xmlns:sec="http://www.thymeleaf.org/extras/spring-security" layout:decorate="~{layout/main.html}">
|
||||
<head>
|
||||
<title>Notizen</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul layout:fragment="title">
|
||||
<li class="nav-item"><a class="nav-link titlemod">Arbeitszeit</a></li>
|
||||
</ul>
|
||||
<ul layout:fragment="menu">
|
||||
<li class="nav-item" sec:authorize="hasRole('timetrack_user')"><a class="nav-link" th:href="@{/done/add}">Neuer
|
||||
Eintrag</a></li>
|
||||
</ul>
|
||||
<main layout:fragment="content">
|
||||
<ul class="nav nav-tabs navback" role="tablist">
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle active" data-bs-toggle="tab" href="#div_list">Liste</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_summary">Zusammenfassung</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_attachment">Anhang</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_calendar">Kalender</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_project">Projekt</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_module">Modul</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_job">Tätigkeit</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_budget">Abrechnung</a></li>
|
||||
</ul>
|
||||
<div class="tabdivblurred tab-content">
|
||||
<div id="div_list" class="tab-pane active">Liste</div>
|
||||
<div id="div_summary" class="tab-pane fade">Zusammenfassung</div>
|
||||
<div id="div_attachment" class="tab-pane fade">Anhang</div>
|
||||
<div id="div_calendar" class="tab-pane fade">Kalender</div>
|
||||
<div id="div_project" class="tab-pane fade">Projekt</div>
|
||||
<div id="div_module" class="tab-pane fade">Modul</div>
|
||||
<div id="div_job" class="tab-pane fade">Tätigkeit</div>
|
||||
<div id="div_budget" class="tab-pane fade">Abrechnung</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -31,11 +31,13 @@
|
||||
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false"> Module </a>
|
||||
<ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarScrollingDropdown">
|
||||
<li><a class="dropdown-item" th:href="@{/done/list}">Arbeitszeit</a></li>
|
||||
<li><a class="dropdown-item" th:href="@{/contact/list}">Kontakte</a></li>
|
||||
<li><a class="dropdown-item" th:href="@{/note/list}">Notizen</a></li>
|
||||
<li><hr /></li>
|
||||
<li><a class="dropdown-item" th:href="@{/logout}">[[${currentUser}]] abmelden</a></li>
|
||||
</ul></li>
|
||||
<li layout:fragment="title" style="list-style-type: none"></li>
|
||||
<li layout:fragment="menu" style="list-style-type: none"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -5,69 +5,62 @@
|
||||
<title>Notizen</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul layout:fragment="title">
|
||||
<li class="nav-item"><a class="nav-link titlemod">Notizen</a></li>
|
||||
</ul>
|
||||
<ul layout:fragment="menu">
|
||||
<li class="nav-item" sec:authorize="hasRole('timetrack_user')"><a class="nav-link" th:href="@{/note/add}">Neue Notiz
|
||||
anlegen</a></li>
|
||||
</ul>
|
||||
<main layout:fragment="content">
|
||||
<div class="accordion" id="acdiv">
|
||||
<div class="accordion-item noty">
|
||||
<h2 class="accordion-header" id="headingDashboard">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dashboard" aria-expanded="true"
|
||||
aria-controls="dashboard">Dashboard</button>
|
||||
</h2>
|
||||
<div id="dashboard" class="accordion-collapse collapse show" aria-labelledby="headingDashboard" data-bs-parent="#acdiv">
|
||||
<div class="accordion-body">
|
||||
<div class="row row-cols-12 ro-cols-lg-3 ro-cols-md-2 ro-cols-sd-1 g-4" style="margin: 8px">
|
||||
<div class="col" th:each="note : ${noteList}">
|
||||
<div class="card text-dark bg-light shadow" style="width: 100%">
|
||||
<div class="card-header text-center">
|
||||
<font th:text="${note.category}" style="font-size: larger">:</font> <font th:text="${note.title}"
|
||||
style="font-size: larger; font-weight: bolder"></font>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<pre th:text="${note.content}"></pre>
|
||||
<a th:href="@{/note/edit/{id}(id=${note.pk})}" sec:authorize="hasRole('timetrack_user')" style="margin-left: 8px;">
|
||||
<i class="fa fa-edit"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span th:text="${note.type}"></span>
|
||||
</div>
|
||||
<ul class="nav nav-tabs navback" role="tablist">
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle active" data-bs-toggle="tab" href="#div_dashboard">Dashboard</a></li>
|
||||
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_list">Liste</a></li>
|
||||
</ul>
|
||||
<div class="tabdivblurred tab-content">
|
||||
<div id="div_dashboard" class="tab-pane active">
|
||||
<div class="row row-cols-12 ro-cols-lg-3 ro-cols-md-2 ro-cols-sd-1 g-4" style="margin: 8px">
|
||||
<div class="col" th:each="note : ${noteList}">
|
||||
<div class="card text-dark bg-light shadow" style="width: 100%">
|
||||
<div class="card-header text-center">
|
||||
<font th:text="${note.category}" style="font-size: larger">:</font> <font th:text="${note.title}"
|
||||
style="font-size: larger; font-weight: bolder"></font>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<pre th:text="${note.content}"></pre>
|
||||
<a th:href="@{/note/edit/{id}(id=${note.pk})}" sec:authorize="hasRole('timetrack_user')" style="margin-left: 8px;">
|
||||
<i class="fa fa-edit"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span th:text="${note.type}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item glassy">
|
||||
<h2 class="accordion-header" id="headingTable">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#list"
|
||||
aria-expanded="false" aria-controls="list">Liste</button>
|
||||
</h2>
|
||||
<div id="list" class="accordion-collapse collapse" aria-labelledby="headingTable" data-bs-parent="#acdiv">
|
||||
<div class="accordion-body" style="background-color: white">
|
||||
<table class="table table-striped table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Titel</th>
|
||||
<th>Kategorie</th>
|
||||
<th>Inhalt</th>
|
||||
<th>Typ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="note : ${noteList}">
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.title}"></span></a></td>
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.category}"></span></a></td>
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.content}"></span></a></td>
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.type}"></span></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_list" class="tab-pane fade">
|
||||
<div class="accordion-body" style="background-color: white">
|
||||
<table class="table table-striped table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Titel</th>
|
||||
<th>Kategorie</th>
|
||||
<th>Inhalt</th>
|
||||
<th>Typ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="note : ${noteList}">
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.title}"></span></a></td>
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.category}"></span></a></td>
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.content}"></span></a></td>
|
||||
<td><a th:href="@{/note/edit/{id}(id=${note.pk})}"><span th:text="${note.type}"></span></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user