Boostrap Icons

Author: gerardpuigl

src/main/resources/static/index.css

@@ -48,3 +48,12 @@
     padding: 2%;
 }
 
+.btn-table{
+    padding: 0.05rem 0.40rem !important;
+    margin-left: 4%;
+    margin-right: 4%;
+}
+
+.icon{
+    font-size: 19px;
+}

src/main/resources/static/index.js

@@ -24,8 +24,14 @@ function createRow(employee) {
 		employee.name,
 		employee.job,
 		employee.salary,
-		"<button type='button' class='btn btn-light' data-toggle='modal' data-target='#modal' onclick='editEmployee(" + employee.id + ")'>Modificar</button>" +
-		"<button type='button' class='btn btn-danger' onclick='deleteEmployee(" + employee.id + ")'>Eliminar</button>"
+		//Edit button with Icon
+		"<a role='button' class='btn btn-light btn-table' data-toggle='modal' data-target='#modal' "+
+		"onclick='editEmployee(" + employee.id + ")'>"+
+		"<i class='bi bi-pencil-square icon'></i></a>" +
+		//Delete button with Icon
+		"<a role='button' type='button' class='btn btn-danger btn-table'"+
+		"onclick='deleteEmployee(" + employee.id + ")'>"+
+		"<i class='bi bi-person-dash-fill icon' style='color:white'></i></a>" 
 	];
 }
 

src/main/resources/templates/index.html

@@ -15,6 +15,7 @@
 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
 		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
 		crossorigin="anonymous"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
 
 	<!-- Boostrap custom colors -->
 	<link rel="stylesheet" type="text/css"	href="custom_bootstrap.min.css">
@@ -45,18 +46,19 @@ <h6>Exercici realitzat utilitzant: Spring Api Rest, Javascript, jquery i Bootstr
 					</div>
 					<div class="col-sm-2 my-auto">
 						<button type="button" class="btn btn-primary add" data-toggle="modal" data-target="#modal" onclick="newEmployee();">
+							<i class="bi bi-person-plus-fill icon" style="margin-right: 5px;"></i>
 							Nou Empleat</button>
 					</div>
 				</div>
 				<div class="col-sm-12 tableBody">
-					<table id="employeeTable" class="table table-bordered table-hover table-striped">
+					<table id="employeeTable" class="table table-hover table-striped">
 						<thead>
 							<tr>
-								<th style="width:3%" >#</th>
-								<th style="width:25%">Nom</th>
-								<th style="width:25%">Càrreg</th>
-								<th style="width:25%">Salari</th>
-								<th style="width:22%">Accions</th>
+								<th style="width:4%" >#</th>
+								<th style="width:28%">Nom</th>
+								<th style="width:28%">Càrreg</th>
+								<th style="width:28%">Salari</th>
+								<th style="width:12%">Accions</th>
 							</tr>
 						</thead>
 						<tbody>