💄 updated the UI and style for better displaying

Petrovich-A · Jul 11, 2023 · 47baa10 · 47baa10
1 parent a6013ca
commit 47baa10
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@
  * [Run Locally](#running-run-locally)
  * [Database structure](#key-database-structure)
 - [Roadmap](#compass-roadmap)
+- [Layout color palette](#art-color)
 - [Contact](#handshake-contact)
 - [Acknowledgements](#gem-acknowledgements)
 
@@ -109,6 +110,16 @@ Clone the project
 * [x] add Spring Security authentication form Login custom page with Database
 * [x] add Spring Security roles
 * [x] add Spring Security's remember me feature
+* [x] add images for according products
+
+<!-- Color -->
+## :art: color:
+
+| HEX | RGB |
+|-----|----------------------|
+| #04AA6D | rgb: (4, 170, 109) |
+| #1ad18c | rgb: (26, 209, 140) |
+| #e9e9e9 | rgb: (233, 233, 233) |
 
 ## :handshake: Contact
 

diff --git a/src/main/resources/static/CSS/style.css b/src/main/resources/static/CSS/style.css
@@ -317,10 +317,11 @@ button:hover, a:hover {
 /**/
 .card-product {
  padding: 0 2px 10px 2px;
+ /*border: 1px solid red;*/
 }
 
 .card-block {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  /*border: 1px solid greenyellow;*/
  display: flex;
@@ -334,6 +335,7 @@ button:hover, a:hover {
 
 .card-block img {
  width: 90%;
+ height: 65%;
 }
 
 .title {
@@ -569,47 +571,23 @@ button:hover, a:hover {
 /*order page*/
 /*table*/
 .order-content {
- padding: 10px 0 30px 70px;
+ padding: 10px 0 10px 10px;
  text-align: center;
- vertical-align: middle;
 }
 
 .header {
- font-weight: bold;
-}
-
-.product-row {
- margin-top: 10px;
  display: flex;
  align-items: center;
- justify-content: center;
-}
-
-.col {
- position: relative;
- width: 100%;
- flex: 1;
-}
-
-.col2 {
- position: relative;
- width: 100%;
- flex: 2;
-}
-
-.col3 {
- position: relative;
- width: 100%;
- flex: 3;
+ justify-content: space-between;
+ font-weight: bold;
+ padding: 10px 0;
 }
 
-.col4 {
- position: relative;
- width: 100%;
- flex: 2;
+.product-image img {
+ max-width: 100px;
+ max-height: 100px;
 }
 
-
 /*error page*/
 /**/
 .error-content {
@@ -638,7 +616,7 @@ button:hover, a:hover {
 /*Order history page*/
 /**/
 table {
- margin-top: 100px;
+ margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;

diff --git a/src/main/resources/templates/fragment/footer.html b/src/main/resources/templates/fragment/footer.html
@@ -1,5 +1,5 @@
 <div class="footer" th:fragment="footer">
- <p>© 2023 E-shop</p>
+ <p>Petrovich Alexandr © 2023 E-shop</p>
  <div class="social-links">
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="https://www.linkedin.com/in/alexandr-petrovich/"><i class="fab fa-linkedin-in"></i></a>

diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
@@ -14,7 +14,7 @@
  <h2>Categories</h2>
  <div th:each="c : ${categories}">
  <p>
- <a th:href="@{/category(categoryId=${c.categoryId})}" th:text="${c.name}"></a>
+ <a style="font-size: 32px" th:href="@{/category(categoryId=${c.categoryId})}" th:text="${c.name}"></a>
  <span>Rating</span>
  <span th:each="goldStars : ${#numbers.sequence(1, c.rating)}"
  class="fa fa-star checked"></span>

diff --git a/src/main/resources/templates/order.html b/src/main/resources/templates/order.html
@@ -12,28 +12,47 @@
 <body>
 <div th:insert="~{fragment/topnav :: navigation}"></div>
 <div class="order-content">
- <h1 th:text="${order.orderId}">Order</h1>
- <h3 th:text="${order.createdAt}">createdAt</h3>
- <h3 sec:authentication="principal.username">Name</h3>
-
- <div class="header">
- <label class="product-image">Image</label>
- <label class="product-name">Name</label>
- <label class="product-description">Description</label>
- <label class="product-price">Price</label>
- </div>
-
- <div th:each="p : ${order.products}" class="product-row">
- <div class="col">
- <div class="product-image">
- <img th:src="|${p.image.link}|" th:alt="|${p.image.link}|">
- </div>
- <div class="col" th:text="${p.name}"></div>
- <div class="col2" th:text="${p.description}"></div>
- <div class="col" th:utext="${'&#36;'+'&nbsp;'} + ${p.price}"></div>
- </div>
- </div>
+ <table>
+ <tr>
+ <th>Order ID</th>
+ <th>Creation Date</th>
+ <th>Customer Name</th>
+ </tr>
+ <tr>
+ <td th:text="${order.orderId}">Order</td>
+ <td th:text="${order.createdAt}">createdAt</td>
+ <td sec:authentication="principal.username">Name</td>
+ </tr>
+ </table>
+ <table>
+ <thead>
+ <tr>
+ <th>Image</th>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr th:each="p : ${order.products}">
+ <td>
+ <div class="product-image">
+ <img th:src="|${p.image.link}|" th:alt="|${p.image.link}|">
+ </div>
+ </td>
+ <td>
+ <div th:text="${p.name}"></div>
+ </td>
+ <td>
+ <div th:text="${p.description}"></div>
+ </td>
+ <td>
+ <div th:utext="${'&#36;'+'&nbsp;'} + ${p.price}"></div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
 </div>
-</body>
 <div th:insert="~{fragment/footer :: footer}"></div>
+</body>
 </html>