Beautiful UI
This commit is contained in:
parent
77f0c2efba
commit
f6f777662e
|
|
@ -18,7 +18,7 @@
|
|||
<div class="fixed-grid has-6-cols">
|
||||
<div class="grid">
|
||||
{% 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>
|
||||
<strong>{{ project.name }}</strong>
|
||||
</div>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="fixed-grid has-6-cols mb-5">
|
||||
<div class="grid">
|
||||
{% 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>
|
||||
<strong>{{ object.name }}</strong>
|
||||
</div>
|
||||
|
|
@ -112,15 +112,35 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
let projects = document.getElementsByClassName('project');
|
||||
for (let i = 0; i < {{ projects | length }}; i++) {
|
||||
document.getElementById('project-' + i).addEventListener('click', () => {
|
||||
for (let p of projects) {
|
||||
if (p.classList.contains('project-' + i)) {
|
||||
p.style.display = "block";
|
||||
} else {
|
||||
p.style.display = "none";
|
||||
let clickedProject = document.getElementById('project-' + i);
|
||||
clickedProject.addEventListener('click', () => {
|
||||
|
||||
let same = clickedProject.classList.contains('has-text-link');
|
||||
|
||||
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>
|
||||
{% endblock extrajs %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue