Skip to content
Snippets Groups Projects
Commit fecd6c88 authored by Fanna Lautenbach's avatar Fanna Lautenbach
Browse files

Multi select visuals

parent 19fd5e1b
No related branches found
No related tags found
1 merge request!74Multi select visuals
Show whitespace changes
Inline Side-by-side
ldvspec/lofardata/templates/lofardata/index.html
+ 54
− 8
View file @ fecd6c88
......@@ -24,18 +24,18 @@
<input id="collapsible-1" class="toggle" type="checkbox">
<label for="collapsible-1" class="group-toggle">
<i>Ungrouped</i>
<div class="custom--group-actions margin-left" style="display:none;">
<div class="custom--group-actions margin-left">
<a class="button--icon-button margin-left margin-right" href="#"
title="Edit this group">
title="Edit this group" style="display:none;">
<span class="icon icon--pen"></span>
</a>
<a class="button--icon-button margin-right" href="#"
title="Delete this group">
title="Delete this group" style="display:none;">
<span class="icon icon--color-inherit icon--trash-alt"></span>
</a>
<button type="submit"
class="button custom--action-button button button--icon-button margin-right"
title="Submit to ATDB">
title="Submit to ATDB" style="display:none;">
<span class="icon icon--color-inherit icon--play">
<span class="icon icon--stacked icon--check icon--green"></span>
</span>
......@@ -48,6 +48,15 @@
<div class="table">
<div class="table__header">
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="ungrouped-select-all"
class="input custom--checkbox margin-top"
onClick="toggle(this,'checkbox-select-ungrouped')">
</div>
</div>
</div>
<div class="table__cell">ID
<a class="tooltip-dias tooltip-dias-right"
data-tooltip="Click on the id to view/edit">m</a>
......@@ -79,6 +88,15 @@
{% for specification in ungrouped_work_specifications %}
<div class="table__row table__row--dark table__row--padding"
data-spec-id="specification.id">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="checkbox-select-ungrouped"
class="input custom--checkbox margin-top">
</div>
</div>
</div>
<div class="table__cell">
<a href="{% url 'specification-detail' pk=specification.id %}"
title="View the specification details">{{ specification.id }}</a>
......@@ -213,18 +231,18 @@
<input id="collapsible-{{ group.name }}" class="toggle" type="checkbox">
<label for="collapsible-{{ group.name }}" class="group-toggle">
{{ group.name }}
<div class="custom--group-actions margin-left" style="display:none;">
<div class="custom--group-actions margin-left">
<a class="button--icon-button margin-left margin-right" href="#"
title="Edit this group">
title="Edit this group" style="display:none;">
<span class="icon icon--pen"></span>
</a>
<a class="button--icon-button margin-right" href="#"
title="Delete this group">
title="Delete this group" style="display:none;">
<span class="icon icon--color-inherit icon--trash-alt"></span>
</a>
<button type="submit"
class="button custom--action-button button button--icon-button margin-right"
title="Submit to ATDB">
title="Submit to ATDB" style="display:none;">
<span class="icon icon--color-inherit icon--play">
<span class="icon icon--stacked icon--check icon--green"></span>
</span>
......@@ -237,6 +255,16 @@
<div class="table">
<div class="table__header">
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="{{ group.name }}-select-all"
class="input custom--checkbox margin-top"
onClick="toggle(this,'checkbox-select-{{ group.name }}')">
</div>
</div>
</div>
<div class="table__cell">ID
<a class="tooltip-dias tooltip-dias-right"
data-tooltip="Click on the id to view/edit">m</a>
......@@ -268,6 +296,16 @@
{% for specification in group.workspecification_set.all %}
<div class="table__row table__row--dark table__row--padding"
data-spec-id="specification.id">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="checkbox-select-{{ group.name }}"
class="input custom--checkbox margin-top">
</div>
</div>
</div>
<div class="table__cell">
<a href="{% url 'specification-detail' pk=specification.id %}"
title="View the specification details">{{ specification.id }}</a>
......@@ -403,4 +441,12 @@
<h2>Log in to see/add/update work specifications</h2>
</div>
{% endif %}
<script type="text/javascript">
function toggle(source, name) {
const checkboxes = document.getElementsByName(name);
for (let i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment