some visual improvements
This commit is contained in:
+56
-45
@@ -8,10 +8,12 @@
|
||||
{% for exam in exams %}
|
||||
{% if exam.active %}
|
||||
<li class="exam-item">
|
||||
<a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam.name}}</a>
|
||||
<a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam.name}}</a>
|
||||
{% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col">Mark</a>{% endif %}
|
||||
<a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}" class="flex-col">Candidates</a>
|
||||
<a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col">Scores</a>
|
||||
<span class="flex-col">
|
||||
<a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}">Candidates</a> <span class="candidate-counts">[{{exam.valid_cid_users.count}} / {{exam.valid_user_users.count}}]</span>
|
||||
</span>
|
||||
<a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col">Scores</a>
|
||||
<input type="checkbox" id="active-{{exam.pk}}" class="exam-active-switch" data-posturl="{% url app_name|add:':exam_toggle_active' pk=exam.pk %}" {% if exam.active %}checked{% endif %}>
|
||||
<label for="active-{{exam.pk}}" class="flex-col icon-container active-icon" title="Click to toggle active state">Exam Active</label>
|
||||
<input type="checkbox" id="published-{{exam.pk}}" class="exam-publish-results-switch" data-posturl="{% url app_name|add:':exam_toggle_results_published' pk=exam.pk %}" {% if exam.publish_results %}checked{% endif %}>
|
||||
@@ -30,10 +32,10 @@
|
||||
{% for exam in exams %}
|
||||
{% if not exam.active %}
|
||||
<li class="exam-item">
|
||||
<a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam.name}}</a>
|
||||
<a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam.name}}</a>
|
||||
{% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col">Mark</a>{% endif %}
|
||||
<a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}" class="flex-col">Candidates</a>
|
||||
<a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col">Scores</a>
|
||||
<a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}" class="flex-col">Candidates</a>
|
||||
<a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col">Scores</a>
|
||||
<input type="checkbox" id="active-{{exam.pk}}" class="exam-active-switch" data-posturl="{% url app_name|add:':exam_toggle_active' pk=exam.pk %}" {% if exam.active %}checked{% endif %}>
|
||||
<label for="active-{{exam.pk}}" class="flex-col icon-container active-icon" title="Click to toggle active state">Exam Active</label>
|
||||
<input type="checkbox" id="{{exam.pk}}-pub" class="exam-publish-results-switch" data-posturl="{% url app_name|add:':exam_toggle_results_published' pk=exam.pk %}" {% if exam.publish_results %}checked{% endif %}>
|
||||
@@ -57,52 +59,61 @@
|
||||
{% include 'exam_overview_js.html' %}
|
||||
|
||||
<style>
|
||||
.candidate-counts {
|
||||
font-size: small;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.published-icon, .active-icon, .archived-icon {
|
||||
border: 1px dotted gray;
|
||||
opacity: 20%;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
.exam-list li:hover .candidate-counts {
|
||||
opacity: 100%;
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.published-icon:hover, .active-icon:hover, .archived-icon:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
.published-icon, .active-icon, .archived-icon {
|
||||
border: 1px dotted gray;
|
||||
opacity: 20%;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.exam-active-switch:checked + .active-icon {
|
||||
border: 1px solid green;
|
||||
color: green;
|
||||
opacity: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.published-icon:hover, .active-icon:hover, .archived-icon:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.exam-publish-results-switch:checked + .published-icon {
|
||||
border: 1px solid purple;
|
||||
color: purple;
|
||||
opacity: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.exam-active-switch:checked + .active-icon {
|
||||
border: 1px solid green;
|
||||
color: green;
|
||||
opacity: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.exam-archived-switch:checked + .archived-icon {
|
||||
border: 1px solid darkblue;
|
||||
color: darkblue;
|
||||
opacity: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.exam-publish-results-switch:checked + .published-icon {
|
||||
border: 1px solid purple;
|
||||
color: purple;
|
||||
opacity: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.exam-publish-results-switch, .exam-active-switch, .exam-archived-switch {
|
||||
display: none;
|
||||
}
|
||||
.exam-archived-switch:checked + .archived-icon {
|
||||
border: 1px solid darkblue;
|
||||
color: darkblue;
|
||||
opacity: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.exam-list li:hover {
|
||||
border: 1px dashed gray;
|
||||
margin: -1px;
|
||||
}
|
||||
</style>
|
||||
.exam-publish-results-switch, .exam-active-switch, .exam-archived-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exam-list li:hover {
|
||||
border: 1px dashed gray;
|
||||
margin: -1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user