Skip to content

Commit 27458c4

Browse files
tsviztsviz
committed
Add layout and component fragments for improved HTML structure
- Created a new layout fragment to standardize page structure with dynamic title and content. - Introduced component fragments for navigation, action buttons, sales table header, and empty state. - Refactored index, new_form, and search templates to utilize the new layout and component fragments. - Enhanced styling for buttons, tables, and forms for a modern look and feel. - Implemented responsive design adjustments for better usability on smaller screens.
1 parent de9bf23 commit 27458c4

File tree

7 files changed

+715
-497
lines changed

7 files changed

+715
-497
lines changed

‎src/main/resources/application.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ spring.redis.port=6379
1515
# spring.data.jpa.repositories.enabled=false
1616
# spring.jpa.hibernate.naming.physical-strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
1717
spring.jpa.hibernate.ddl-auto=none
18-
enableSearchFeature=true
18+
enableSearchFeature=false

‎src/main/resources/templates/edit_form.html‎

100755100644
Lines changed: 57 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,57 @@
1-
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml"
3-
xmlns:th="http://www.thymeleaf.org">
4-
<head>
5-
<meta charset="utf-8" />
6-
<link rel="stylesheet" type="text/css" href="/css/styles.css">
7-
<title>Edit Sale</title>
8-
<style>
9-
body {
10-
background-color: #f2f2f2;
11-
font-family: Arial, sans-serif;
12-
padding: 0 15px;
13-
max-width: 1200px;
14-
margin: auto;
15-
}
16-
table {
17-
border-collapse: collapse;
18-
width: 100%;
19-
margin-top: 50px;
20-
box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
21-
border-radius: 10px;
22-
overflow: hidden;
23-
}
24-
th, td {
25-
text-align: left;
26-
padding: 8px;
27-
}
28-
.actions {
29-
display: flex;
30-
justify-content: space-between;
31-
align-items: center;
32-
}
33-
.clear {
34-
color: #f44336;
35-
}
36-
</style>
37-
<script th:inline="javascript">
38-
/*<![CDATA[*/
39-
window.enableSearchFeature = /*[[${enableSearchFeature}]]*/ false;
40-
/*]]>*/
41-
</script>
42-
<script src="/js/styles.js"></script>
43-
</head>
44-
<body>
45-
<h1>Edit Record</h1>
46-
<div align="center">
47-
<button onclick="window.location.href='/';">Go back to inventory table</button>
48-
<form action="#" th:action="@{/update}" th:object="${sale}" method="post">
49-
<div align="center">
50-
<table style="width: 35%" border="1" cellpadding="10">
51-
<tr>
52-
<td>Serial Number:</td>
53-
<td><input type="text" th:field="*{serialNumber}" readonly="readonly"/></td>
54-
</tr>
55-
<tr>
56-
<td>Item Name:</td>
57-
<td><input type="text" th:field="*{item}" th:value="${sale != null ? sale.item : ''}" required minlength="3" maxlength="50" title="Item name must be between 2 and 50 characters long." /></td>
58-
</tr>
59-
<tr>
60-
<td>Quantity:</td>
61-
<td><input type="text" th:field="*{quantity}" th:value="${sale != null ? sale.quantity : ''}" pattern="[0-9]*" title="Please enter an integer" required /></td>
62-
</tr>
63-
<tr>
64-
<td>Amount (USD):</td>
65-
<td><input type="text" th:field="*{amount}" th:value="${sale != null ? sale.amount : ''}" pattern="^([1-9][0-9]{0,5}|500000)(\.[0-9]{1,2})?$" title="Please enter an amount up to 500,000, including up to two decimal places" /></td>
66-
</tr>
67-
<tr>
68-
<td colspan="2"><button type="submit">Save</button> </td>
69-
</tr>
70-
</table>
71-
</form>
72-
</div>
73-
</body>
74-
</html>
1+
<!DOCTYPE html>
2+
<html xmlns:th="http://www.thymeleaf.org"
3+
th:replace="~{fragments/layout :: layout(~{::title}, ~{::content})}">
4+
<head>
5+
<title>Edit Sale</title>
6+
</head>
7+
<body>
8+
<div th:fragment="content">
9+
<h1><i class="fas fa-edit"></i> Edit Record</h1>
10+
11+
<div class="form-container">
12+
<form th:action="@{/update}" th:object="${sale}" method="post">
13+
<div class="form-group">
14+
<label for="serialNumber">Serial Number:</label>
15+
<input type="text" id="serialNumber" th:field="*{serialNumber}" readonly="readonly"
16+
style="background-color: #f5f5f5; cursor: not-allowed;">
17+
</div>
18+
19+
<div class="form-group">
20+
<label for="item">Item Name:</label>
21+
<input type="text" id="item" th:field="*{item}"
22+
th:value="${sale != null ? sale.item : ''}"
23+
required minlength="3" maxlength="50"
24+
title="Item name must be between 3 and 50 characters long.">
25+
</div>
26+
27+
<div class="form-group">
28+
<label for="quantity">Quantity:</label>
29+
<input type="text" id="quantity" th:field="*{quantity}"
30+
th:value="${sale != null ? sale.quantity : ''}"
31+
pattern="[0-9]*"
32+
title="Please enter an integer" required>
33+
</div>
34+
35+
<div class="form-group">
36+
<label for="amount">Amount (USD):</label>
37+
<input type="text" id="amount" th:field="*{amount}"
38+
th:value="${sale != null ? sale.amount : ''}"
39+
pattern="^([1-9][0-9]{0,5}|500000)(\.[0-9]{1,2})?$"
40+
title="Please enter an amount up to 500,000, including up to two decimal places">
41+
</div>
42+
43+
<div class="actions">
44+
<a href="/" class="modern-button">
45+
<i class="fas fa-arrow-left"></i>
46+
Back to List
47+
</a>
48+
<button type="submit" class="modern-button">
49+
<i class="fas fa-save"></i>
50+
Update
51+
</button>
52+
</div>
53+
</form>
54+
</div>
55+
</div>
56+
</body>
57+
</html>

‎src/main/resources/templates/fragments/components.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html xmlns:th="http://www.thymeleaf.org">
3+
4+
<!-- Navigation Fragment -->
5+
<div th:fragment="navigation">
6+
<nav class="main-navigation">
7+
<div class="nav-container">
8+
<a href="/" class="modern-button">
9+
<i class="fas fa-home"></i>
10+
Home
11+
</a>
12+
<a href="/new" class="modern-button">
13+
<i class="fas fa-plus"></i>
14+
Add New Sale
15+
</a>
16+
<a href="/search" class="modern-button">
17+
<i class="fas fa-search"></i>
18+
Search
19+
</a>
20+
</div>
21+
</nav>
22+
</div>
23+
24+
<!-- Action Buttons Fragment -->
25+
<div th:fragment="action-buttons">
26+
<div class="actions">
27+
<a href="/" class="modern-button">
28+
<i class="fas fa-arrow-left"></i>
29+
Back to List
30+
</a>
31+
<button type="submit" class="modern-button">
32+
<i class="fas fa-save"></i>
33+
Save
34+
</button>
35+
</div>
36+
</div>
37+
38+
<!-- Table Header Fragment for Sales -->
39+
<thead th:fragment="sales-table-header">
40+
<tr>
41+
<th>ID</th>
42+
<th>Item</th>
43+
<th>Quantity</th>
44+
<th>Price</th>
45+
<th>Total</th>
46+
<th>Actions</th>
47+
</tr>
48+
</thead>
49+
50+
<!-- Empty State Fragment -->
51+
<div th:fragment="empty-state">
52+
<div class="empty-state">
53+
<i class="fas fa-inbox fa-3x" style="color: #ccc; margin-bottom: 16px;"></i>
54+
<h3>No items found</h3>
55+
<p>Get started by adding your first sale record.</p>
56+
<a href="/new" class="modern-button">
57+
<i class="fas fa-plus"></i>
58+
Add New Sale
59+
</a>
60+
</div>
61+
</div>
62+
63+
<style>
64+
.main-navigation {
65+
margin-bottom: 32px;
66+
padding: 24px;
67+
background: rgba(255,255,255,0.8);
68+
border-radius: 16px;
69+
box-shadow: 0 4px 16px rgba(44,62,80,0.06);
70+
}
71+
72+
.nav-container {
73+
display: flex;
74+
justify-content: center;
75+
gap: 16px;
76+
flex-wrap: wrap;
77+
}
78+
79+
.empty-state {
80+
text-align: center;
81+
padding: 64px 32px;
82+
color: #666;
83+
}
84+
85+
.empty-state h3 {
86+
margin: 16px 0 8px;
87+
color: #22223b;
88+
}
89+
90+
@media (max-width: 768px) {
91+
.nav-container {
92+
flex-direction: column;
93+
}
94+
95+
.actions {
96+
flex-direction: column;
97+
gap: 16px;
98+
}
99+
100+
.modern-container {
101+
margin: 20px;
102+
padding: 24px 20px;
103+
}
104+
}
105+
</style>
106+
107+
</html>

0 commit comments

Comments
 (0)