source
/
nenuscanner
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Beautiful UI

This commit is contained in:
Thomas Forgione 2024-08-29 10:07:28 +02:00
parent 77f0c2efba
commit f6f777662e
1 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
templates/index.html
View File

@ -18,7 +18,7 @@
<div class="fixed-grid has-6-cols"> <div class="fixed-grid has-6-cols">
<div class="grid"> <div class="grid">
{% for project in projects %} {% for project in projects %}
<a href="#" id="project-{{ loop.index0 }}" class="cell p-2 has-text-centered" style="border: solid; border-width: 1px; border-radius: 5px;"> <a href="#" id="project-{{ loop.index0 }}" class="cell p-2 has-text-centered has-text-white" style="border: solid; border-width: 1px; border-radius: 5px;">
<div> <div>
<strong>{{ project.name }}</strong> <strong>{{ project.name }}</strong>
</div> </div>
@ -35,7 +35,7 @@
<div class="fixed-grid has-6-cols mb-5"> <div class="fixed-grid has-6-cols mb-5">
<div class="grid"> <div class="grid">
{% for object in project.objects %} {% for object in project.objects %}
<a href="/object/{{ object.id }}" class="cell p-2 has-text-centered" style="border: solid; border-width: 1px; border-radius: 5px;"> <a href="/object/{{ object.id }}" class="cell p-2 has-text-centered has-text-white" style="border: solid; border-width: 1px; border-radius: 5px;">
<div> <div>
<strong>{{ object.name }}</strong> <strong>{{ object.name }}</strong>
</div> </div>
@ -112,15 +112,35 @@ document.addEventListener('DOMContentLoaded', () => {
let projects = document.getElementsByClassName('project'); let projects = document.getElementsByClassName('project');
for (let i = 0; i < {{ projects | length }}; i++) { for (let i = 0; i < {{ projects | length }}; i++) {
document.getElementById('project-' + i).addEventListener('click', () => { let clickedProject = document.getElementById('project-' + i);
for (let p of projects) { clickedProject.addEventListener('click', () => {
if (p.classList.contains('project-' + i)) {
p.style.display = "block"; let same = clickedProject.classList.contains('has-text-link');
} else {
p.style.display = "none"; if (same) {
clickedProject.classList.remove('has-text-link');
clickedProject.classList.add('has-text-white');
} else {
clickedProject.classList.remove('has-text-white');
clickedProject.classList.add('has-text-link');
}
for (let j = 0; j < {{ projects | length }}; j++) {
if (j !== i) {
let otherProject = document.getElementById('project-' + j);
otherProject.classList.remove('has-text-link');
otherProject.classList.add('has-text-white');
} }
} }
});
for (let p of projects) {
if (p.classList.contains('project-' + i) && !same) {
p.style.display = "block";
} else {
p.style.display = "none";
}
}
});
} }
</script> </script>
{% endblock extrajs %} {% endblock extrajs %}