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="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) => {

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

@ -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;
}