From 8394de0dcb24e583b75d39851fce88d3bc5c0b8a Mon Sep 17 00:00:00 2001
From: Corban-Lee <77944149+XordK@users.noreply.github.com>
Date: Sat, 6 May 2023 15:47:34 +0100
Subject: [PATCH] improved search css

---
 src/mainapp/templates/teams.html | 41 ++++++++++++++++++++++----------
 src/static/css/custom.css        | 20 ++++++++++++----
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/mainapp/templates/teams.html b/src/mainapp/templates/teams.html
index 5dc2725..d498aec 100644
--- a/src/mainapp/templates/teams.html
+++ b/src/mainapp/templates/teams.html
@@ -17,7 +17,7 @@
             <div class="col-md-6 col-xl-4">
                 <div class="input-group mb-4 mb-md-0">
                     <input type="search" class="form-control" placeholder="Search Members" id="search">
-                    <button type="button" class="btn border bg-body"><i class="bi bi-search"></i></button>
+                    <button type="button" class="btn border bg-body-tertiary" id="searchButton"><i class="bi bi-search"></i></button>
                 </div>
             </div>
         </div>
@@ -77,8 +77,8 @@
         };
 
         $(document).ready(() => {
-            teamsLoading(true);
-            fetchAndLoadTeams();
+            teamsLoading(true);  // show the loading icon
+            fetchAndLoadTeams(); // load the teams
 
             var searchTimeout = null;
 
@@ -89,9 +89,22 @@
                 searchTimeout = setTimeout(() => {
                     fetchAndLoadTeams($("#search").val());
                 }, 500)
-            })
+            });
+
+            $("#searchButton").on("click", () => {
+                fetchAndLoadTeams($("#search").val());
+            });
         })
 
+        /**
+         * Returns bool if the string is empty or only contains whitespace
+         * 
+         * **/
+        function isEmptyOrSpaces(string) {
+            console.log(string === null || string.match(/^ *$/) !== null);
+            return string === null || string.match(/^ *$/) !== null;
+        }
+
         function loadTeams(teams, highlightText="") {
             $("#teamsContainer").html("");  // Clear the previous listed teams
 
@@ -100,10 +113,11 @@
             }
 
             // Iterate over and add each team
-            teams.forEach((team) => {
-                $("#teamsContainer").append(
-                    `<div class='col-12 col-md-6 col-xl-4 mb-4'>
-                        <div class='p-4 bg-body-tertiary rounded h-100 fluid-hover-zoom shadow-sm hover-shadow'>
+            teams.forEach((team, index) => {
+
+                const teamColumn = $(
+                    `<div class='col-12 col-md-6 col-xl-4 mb-4 team-column'>
+                        <div class='p-4 bg-body-tertiary rounded h-100 fluid-hover-zoom shadow-sm shadow-on-hover'>
                             <h4>${team.identifier}</h4>
                             <ul class='list-unstyled ul-cols-2 team-members'>
                             </ul>
@@ -111,6 +125,9 @@
                     </div>`
                 );
 
+                teamColumn.css("opacity", 1);
+                $("#teamsContainer").append(teamColumn);
+
                 // While we have the team, iterate over and add it's members
                 team.members.forEach((member) => {
                     $("#teamsContainer").find(".team-members").last().append(
@@ -126,18 +143,18 @@
                     )
                 });
             });
-            if (highlightText) {
-                $("#teamsContainer").find(`.team-member:icontains('${highlightText}')`).css("color", "red")
+            if (!isEmptyOrSpaces(highlightText)) {
+                $("#teamsContainer").find(`.team-member:icontains('${highlightText}')`).addClass("border-bottom text-primary fw-bold");
             }
         }
 
-        function fetchAndLoadTeams(search) {
+        function fetchAndLoadTeams(search="") {
             $.ajax({
                 url: "{% url 'get-teams' %}",
                 type: "post",
                 data: {
                     "csrfmiddlewaretoken": "{{ csrf_token }}",
-                    "search": search
+                    "search": !isEmptyOrSpaces(search) ? search : null
                 },
                 error: (xhr, textStatus, errorThrown) => { alert(errorThrown); },
                 success: (result) => {
diff --git a/src/static/css/custom.css b/src/static/css/custom.css
index 4d03fc2..a971403 100644
--- a/src/static/css/custom.css
+++ b/src/static/css/custom.css
@@ -17,16 +17,26 @@
 }
 
 .fluid-hover-zoom {
-    transition: .3s 
-        transform cubic-bezier(.155,1.105,.295,1.12),
+    transition: 
+        .3s transform cubic-bezier(.155,1.105,.295,1.12),
         .3s box-shadow,
         .3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
+    backface-visibility: hidden;
 }
-
+ 
 .fluid-hover-zoom:hover {
-    transform: scale(1.04);
+    transform: scale(1.035);
 }
 
-.hover-shadow:not(:hover) {
+.no-transform {
+    transform: none !important;
+}
+
+.shadow-on-hover:not(:hover) {
     box-shadow: none !important;
+}
+
+.team-column {
+    opacity: 0;
+    transition: 5s opacity ease-in;
 }
\ No newline at end of file