jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

improved search css

Browse Source
This commit is contained in:
Corban-Lee 2023-05-06 15:47:34 +01:00
parent 439ae32a79
commit 8394de0dcb
2 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/mainapp/templates/teams.html
View File

@ -17,7 +17,7 @@
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<div class="input-group mb-4 mb-md-0"> <div class="input-group mb-4 mb-md-0">
<input type="search" class="form-control" placeholder="Search Members" id="search"> <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> </div>
</div> </div>
@ -77,8 +77,8 @@
}; };
$(document).ready(() => { $(document).ready(() => {
teamsLoading(true); teamsLoading(true); // show the loading icon
fetchAndLoadTeams(); fetchAndLoadTeams(); // load the teams
var searchTimeout = null; var searchTimeout = null;
@ -89,8 +89,21 @@
searchTimeout = setTimeout(() => { searchTimeout = setTimeout(() => {
fetchAndLoadTeams($("#search").val()); fetchAndLoadTeams($("#search").val());
}, 500) }, 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="") { function loadTeams(teams, highlightText="") {
$("#teamsContainer").html(""); // Clear the previous listed teams $("#teamsContainer").html(""); // Clear the previous listed teams
@ -100,10 +113,11 @@
} }
// Iterate over and add each team // Iterate over and add each team
teams.forEach((team) => { teams.forEach((team, index) => {
$("#teamsContainer").append(
`<div class='col-12 col-md-6 col-xl-4 mb-4'> const teamColumn = $(
<div class='p-4 bg-body-tertiary rounded h-100 fluid-hover-zoom shadow-sm hover-shadow'> `<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> <h4>${team.identifier}</h4>
<ul class='list-unstyled ul-cols-2 team-members'> <ul class='list-unstyled ul-cols-2 team-members'>
</ul> </ul>
@ -111,6 +125,9 @@
</div>` </div>`
); );
teamColumn.css("opacity", 1);
$("#teamsContainer").append(teamColumn);
// While we have the team, iterate over and add it's members // While we have the team, iterate over and add it's members
team.members.forEach((member) => { team.members.forEach((member) => {
$("#teamsContainer").find(".team-members").last().append( $("#teamsContainer").find(".team-members").last().append(
@ -126,18 +143,18 @@
) )
}); });
}); });
if (highlightText) { if (!isEmptyOrSpaces(highlightText)) {
$("#teamsContainer").find(`.team-member:icontains('${highlightText}')`).css("color", "red") $("#teamsContainer").find(`.team-member:icontains('${highlightText}')`).addClass("border-bottom text-primary fw-bold");
} }
} }
function fetchAndLoadTeams(search) { function fetchAndLoadTeams(search="") {
$.ajax({ $.ajax({
url: "{% url 'get-teams' %}", url: "{% url 'get-teams' %}",
type: "post", type: "post",
data: { data: {
"csrfmiddlewaretoken": "{{ csrf_token }}", "csrfmiddlewaretoken": "{{ csrf_token }}",
"search": search "search": !isEmptyOrSpaces(search) ? search : null
}, },
error: (xhr, textStatus, errorThrown) => { alert(errorThrown); }, error: (xhr, textStatus, errorThrown) => { alert(errorThrown); },
success: (result) => { success: (result) => {

18
src/static/css/custom.css
View File

@ -17,16 +17,26 @@
} }
.fluid-hover-zoom { .fluid-hover-zoom {
transition: .3s transition:
transform cubic-bezier(.155,1.105,.295,1.12), .3s transform cubic-bezier(.155,1.105,.295,1.12),
.3s box-shadow, .3s box-shadow,
.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12); .3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
backface-visibility: hidden;
} }
.fluid-hover-zoom:hover { .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; box-shadow: none !important;
} }
.team-column {
opacity: 0;
transition: 5s opacity ease-in;
}