|
1 | | -<div class="modal-content" th:fragment="modal-content"> |
2 | | - <h2 th:text="${entry.title}">Entry</h2> |
3 | | - <p th:text="${entry.description}"></p> |
4 | | - <p><strong>Creator:</strong> <span th:text="${entry.user.username}"></span></p> |
5 | | - <p><strong>Time:</strong> <span th:text="${entry.time}"></span></p> |
6 | | - <p><strong>Date:</strong> <span th:text="${entry.date}"></span></p> |
7 | | - <p><strong>Visibility:</strong> <span th:text="${entry.visibility}"></span></p> |
| 1 | +<div class="popup-container" th:fragment="modal-content"> |
| 2 | + <!-- Titel --> |
| 3 | + <h2 class="text-xl font-bold text-[var(--color-primary)] mb-4" th:text="${entry.title}">Entry</h2> |
8 | 4 |
|
9 | | - <div class="button-row" th:if="${canEdit}"> |
10 | | - <form method="post" th:action="@{/calendar/toggle-visibility}"> |
| 5 | + <!-- Details --> |
| 6 | + <p class="mb-2 text-[var(--color-text-light)]" th:text="${entry.description}">Description</p> |
| 7 | + <p class="mb-1"><strong>Creator:</strong> <span th:text="${entry.user.username}">User</span></p> |
| 8 | + <p class="mb-1"><strong>Time:</strong> <span th:text="${entry.time}">12:00</span></p> |
| 9 | + <p class="mb-1"><strong>Date:</strong> <span th:text="${entry.date}">01.01.2025</span></p> |
| 10 | + <p class="mb-4"><strong>Visibility:</strong> <span th:text="${entry.visibility}">PUBLIC</span></p> |
| 11 | + |
| 12 | + <!-- Buttons nur wenn editierbar --> |
| 13 | + <div class="flex gap-2 mb-3" th:if="${canEdit}"> |
| 14 | + <form method="post" th:action="@{/calendar/toggle-visibility}" class="flex-1"> |
11 | 15 | <input type="hidden" name="id" th:value="${entry.id}"> |
12 | | - <button type="submit">Change Visibility</button> |
| 16 | + <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"> |
| 17 | + Change Visibility |
| 18 | + </button> |
13 | 19 | </form> |
14 | 20 |
|
15 | | - <form method="get" th:action="@{'/calendar/delete/' + ${entry.id}}"> |
16 | | - <button type="submit">Delete</button> |
| 21 | + <form method="get" th:action="@{'/calendar/delete/' + ${entry.id}}" class="flex-1"> |
| 22 | + <button type="submit" class="w-full py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"> |
| 23 | + Delete |
| 24 | + </button> |
17 | 25 | </form> |
| 26 | + <input type="hidden" name="id" th:value="${entry.id}"> |
18 | 27 | </div> |
19 | 28 |
|
20 | | - <div class="button-row"> |
21 | | - <button onclick="closeModal('viewModal')" class="close-btn">Close</button> |
22 | | - </div> |
| 29 | + <!-- Close --> |
| 30 | + <button onclick="closeModal('viewModal')" |
| 31 | + class="w-full py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition"> |
| 32 | + Close |
| 33 | + </button> |
23 | 34 | </div> |
0 commit comments