layout optimization

This commit is contained in:
Jörg Henke
2022-05-04 17:19:31 +02:00
parent 2f51c93cfe
commit 8f29a6c788
14 changed files with 331 additions and 543 deletions

View File

@@ -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>