From 0a67da2c7645a4f707e3f765af4c9a59e9c42c74 Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sat, 4 Feb 2023 16:15:03 +0300
Subject: [PATCH 1/4] Cleaned up the code used to list features on the home
 page.

---
 .../resources/templates/fragments/card.html   | 12 ++--
 src/main/resources/templates/home.html        | 61 ++++++++++---------
 2 files changed, 36 insertions(+), 37 deletions(-)
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
index c87bb384..a8ba116d 100644
--- a/src/main/resources/templates/fragments/card.html
+++ b/src/main/resources/templates/fragments/card.html
@@ -1,9 +1,5 @@
-<div th:fragment="card"  class="col-4 h-100">
-	<div class="dark-card card">
-		<div class="card-body">
-			<h5 class="card-title" th:text="${cardTitle}"></h5>
-			<p class="card-text" th:text="${cardText}"></p>
-			<a class="btn btn-primary" th:href="${cardLink}">Go</a>
-		</div>
-	</div>
+<div th:fragment="card"  class="feature-card">
+	<h5 class="card-title" th:text="${cardTitle}"></h5>
+	<p class="card-text" th:text="${cardText}"></p>
+	<a class="btn btn-primary" th:href="${cardLink}">Go</a>
 </div>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 62fb1958..db7631a9 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -4,6 +4,22 @@
 
 <th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
 
+<style>
+	.features-container {
+		display: flex;
+		flex-wrap: wrap;
+    	justify-content: space-between;
+    	row-gap: 25px;
+    	column-gap: 30px;
+	}
+	.feature-card {
+		border: 1px solid rgba(0,0,0,.125);
+		border-radius: 0.25rem;
+		padding: 1.25rem;
+		width: 21rem;
+		flex-grow: 1;
+	}
+</style>
 
 <body>
 
@@ -20,37 +36,24 @@
 			</div>
 
 			<!-- Features -->
-			<div class="container">
-				<div class="row h-100">
-					<div th:replace="~{fragments/card :: card(cardTitle='Merge PDFs', cardText='Easily merge multiple PDFs into one.', cardLink='merge-pdfs')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='Split PDFs', cardText='Split PDFs into multiple documents', cardLink='split-pdfs')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='Rotate PDFs', cardText='Easily rotate your PDFs.', cardLink='rotate-pdf')}"></div>
-				</div>
+			<div class="features-container container">
+				<div th:replace="~{fragments/card :: card(cardTitle='Merge PDFs', cardText='Easily merge multiple PDFs into one.', cardLink='merge-pdfs')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='Split PDFs', cardText='Split PDFs into multiple documents', cardLink='split-pdfs')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='Rotate PDFs', cardText='Easily rotate your PDFs.', cardLink='rotate-pdf')}"></div>
 
-				<br>
+				<div th:replace="~{fragments/card :: card(cardTitle='Image to PDF', cardText='Convert a images (PNG, JPEG, GIF) to PDF.', cardLink='img-to-pdf')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='PDF to Image', cardText='Convert a PDF to a image. (PNG, JPEG, GIF)', cardLink='pdf-to-img')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='PDF Organizer', cardText='Remove/Rearrange pages in any order', cardLink='pdf-organizer')}"></div>
 
-				<div class="row h-100">
-					<div th:replace="~{fragments/card :: card(cardTitle='Image to PDF', cardText='Convert a images (PNG, JPEG, GIF) to PDF.', cardLink='img-to-pdf')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='PDF to Image', cardText='Convert a PDF to a image. (PNG, JPEG, GIF)', cardLink='pdf-to-img')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='PDF Organizer', cardText='Remove/Rearrange pages in any order', cardLink='pdf-organizer')}"></div>
-				</div>
-				<br>
-				<div class="row h-100">
-					<div th:replace="~{fragments/card :: card(cardTitle='Add image onto PDF', cardText='Adds a image onto a set location on the PDF (Work in progress)', cardLink='add-image')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='Add Watermark', cardText='Add a custom watermark to your PDF document.', cardLink='add-watermark')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='Change Permissions', cardText='Change the permissions of your PDF document, such as print, copy, edit, etc.', cardLink='change-permissions')}"></div>
-				</div>
-				<br>
-				<div class="row h-100">
-					<div th:replace="~{fragments/card :: card(cardTitle='Remove Pages', cardText='Delete unwanted pages from your PDF document.', cardLink='remove-pages')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='Add Password', cardText='Encrypt your PDF document with a password.', cardLink='add-password')}"></div>
-					<div th:replace="~{fragments/card :: card(cardTitle='Remove Password', cardText='Remove password protection from your PDF document.', cardLink='remove-password')}"></div>
-				</div>
-				<br>
-				<div class="row h-100">
-					<div th:replace="~{fragments/card :: card(cardTitle='Compress PDFs', cardText='Compress PDFs to reduce their file size.', cardLink='compress-pdf')}"></div>
-				</div>
-				<br>
+				<div th:replace="~{fragments/card :: card(cardTitle='Add image onto PDF', cardText='Adds a image onto a set location on the PDF (Work in progress)', cardLink='add-image')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='Add Watermark', cardText='Add a custom watermark to your PDF document.', cardLink='add-watermark')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='Change Permissions', cardText='Change the permissions of your PDF document, such as print, copy, edit, etc.', cardLink='change-permissions')}"></div>
+
+				<div th:replace="~{fragments/card :: card(cardTitle='Remove Pages', cardText='Delete unwanted pages from your PDF document.', cardLink='remove-pages')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='Add Password', cardText='Encrypt your PDF document with a password.', cardLink='add-password')}"></div>
+				<div th:replace="~{fragments/card :: card(cardTitle='Remove Password', cardText='Remove password protection from your PDF document.', cardLink='remove-password')}"></div>
+
+				<div th:replace="~{fragments/card :: card(cardTitle='Compress PDFs', cardText='Compress PDFs to reduce their file size.', cardLink='compress-pdf')}"></div>
 
 			</div>
 		</div>

From f6feb7a7e7d2098b9355c89f998de73a11db303b Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sat, 4 Feb 2023 16:16:07 +0300
Subject: [PATCH 2/4] Made pages mobile friendly

---
 src/main/resources/templates/fragments/common.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index ed4c1505..d8abe242 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -1,12 +1,10 @@
 <head th:fragment="head">
 <link rel="shortcut icon" href="favicon.svg">
-<script
-	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
-<link rel="stylesheet"
-	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-<script
-	src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
 <script>

From ae50611acc363f436dd2ab43c5339d0c2e31fb35 Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sat, 4 Feb 2023 17:36:20 +0300
Subject: [PATCH 3/4] Fixed issue where the last feature expands to fill the
 whole last row

---
 src/main/resources/templates/home.html | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index db7631a9..ea47c462 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -6,18 +6,14 @@
 
 <style>
 	.features-container {
-		display: flex;
-		flex-wrap: wrap;
-    	justify-content: space-between;
-    	row-gap: 25px;
-    	column-gap: 30px;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
+		gap: 25px 30px;
 	}
 	.feature-card {
 		border: 1px solid rgba(0,0,0,.125);
 		border-radius: 0.25rem;
 		padding: 1.25rem;
-		width: 21rem;
-		flex-grow: 1;
 	}
 </style>
 

From c667c775823d8e03d6f00b24e9843d1f367a9ecd Mon Sep 17 00:00:00 2001
From: Saud Fatayerji <saudfatayerji@gmail.com>
Date: Sat, 4 Feb 2023 17:53:19 +0300
Subject: [PATCH 4/4] Fixed alignment of the feature card 'go' button

---
 src/main/resources/templates/home.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index ea47c462..d974f266 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -14,6 +14,13 @@
 		border: 1px solid rgba(0,0,0,.125);
 		border-radius: 0.25rem;
 		padding: 1.25rem;
+
+		display: flex;
+	  	flex-direction: column;
+	  	align-items: flex-start;
+	}
+	.feature-card .card-text {
+		flex: 1;
 	}
 </style>
 
