Skip to content

Commit 34386f8

Browse files
alexeygrigorevalexeygrigorev
committed
Polish course and submission UI
1 parent 03aa981 commit 34386f8

18 files changed

Lines changed: 556 additions & 416 deletions

‎cadmin/templates/cadmin/homework_submission_edit.html‎

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,21 @@
77
<li><a href="{% url 'cadmin_homework_submission_edit' course.slug homework.slug submission.id %}">Edit Submission</a></li>
88
{% endblock %}
99
{% block cadmin_content %}
10-
<section class="border-b app-border pb-5 ">
11-
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
12-
<div>
10+
<section class="border-b app-border pb-5">
1311
<p class="text-sm font-semibold uppercase tracking-wide app-muted">{{ homework.title }}</p>
1412
<h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">Edit Homework Submission</h1>
15-
<p class="mt-1 text-sm app-muted">Update answers and learning-in-public links, then recalculate the submission score.</p>
16-
</div>
17-
<a href="{% url 'cadmin_homework_submissions' course.slug homework.slug %}" class="primer-button primer-button-secondary w-fit">Back to Submissions</a>
13+
<div class="dense-utility-links mt-3 flex flex-wrap gap-x-3 gap-y-1 text-xs">
14+
<a href="{% url 'cadmin_homework_submissions' course.slug homework.slug %}" class="app-link">Back to Submissions</a>
15+
<a href="{% url 'homework' course.slug homework.slug %}" class="app-link">
16+
<i class="fas fa-external-link-alt"></i> Public
17+
</a>
18+
<a href="/admin/courses/submission/{{ submission.id }}/change/" class="app-link">
19+
<i class="fas fa-edit"></i> Django
20+
</a>
1821
</div>
1922
</section>
20-
<section class="mt-6 rounded-md border app-border app-surface px-4 py-3 text-sm">
21-
<dl class="grid gap-x-6 gap-y-3 md:grid-cols-[minmax(0,1fr)_10rem_7rem] md:items-start">
23+
<section class="mt-5 text-sm">
24+
<dl class="grid gap-x-6 gap-y-3 border-b app-border pb-5 md:grid-cols-[minmax(0,1fr)_10rem_7rem] md:items-start">
2225
<div class="min-w-0">
2326
<dt class="text-xs font-semibold uppercase app-muted">Student</dt>
2427
<dd class="mt-1 min-w-0">
@@ -43,16 +46,14 @@ <h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">Edit Homework Su
4346
</div>
4447
</dl>
4548
</section>
46-
<form class="mt-6 space-y-6" method="post">
49+
<form class="mt-6 space-y-8" method="post">
4750
{% csrf_token %}
48-
<section class="overflow-hidden rounded-md border app-border app-surface ">
49-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
51+
<section>
5052
<h2 class="text-base font-semibold app-heading">Question Answers</h2>
51-
</div>
5253
{% if questions_with_answers %}
53-
<div class="divide-y app-divide">
54+
<div class="mt-3 divide-y app-divide border-y app-border">
5455
{% for item in questions_with_answers %}
55-
<article class="px-4 py-4">
56+
<article class="py-4">
5657
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
5758
<div class="min-w-0">
5859
<h3 class="font-medium app-heading">Question {{ forloop.counter }}: {{ item.question.text }}</h3>
@@ -103,26 +104,19 @@ <h3 class="font-medium app-heading">Question {{ forloop.counter }}: {{ item.ques
103104
<p class="px-4 py-6 text-sm app-muted">No questions found for this homework.</p>
104105
{% endif %}
105106
</section>
106-
<section class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
107-
<div class="rounded-md border app-border app-surface ">
108-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
107+
<section class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
108+
<div>
109109
<h2 class="text-base font-semibold app-heading">Learning in Public Links</h2>
110-
</div>
111-
<div class="p-4">
110+
<div class="mt-3">
112111
<label class="mb-2 block text-sm font-semibold app-heading" for="learning_in_public_links">Links (one per line)</label>
113-
<textarea class="form-control" id="learning_in_public_links" name="learning_in_public_links" rows="4" placeholder="https://example.com/post1&#10;https://example.com/post2">
114-
{% if submission.learning_in_public_links %}
115-
{{ submission.learning_in_public_links|join:"
116-
" }}
117-
{% endif %}
118-
</textarea>
112+
<textarea class="form-control" id="learning_in_public_links" name="learning_in_public_links" rows="4" placeholder="https://example.com/post1&#10;https://example.com/post2">{{ learning_in_public_links_text }}</textarea>
119113
<p class="mt-2 text-sm app-muted">Each link contributes to the learning in public score, capped at {{ homework.learning_in_public_cap }}.</p>
120114
<button type="button" class="primer-button primer-button-secondary mt-3" id="clear-lip-links" onclick="clearLearningInPublicLinks()">
121115
<i class="fas fa-trash"></i> Remove LiP Links </button>
122116
</div>
123117
</div>
124-
<div class="rounded-md border app-border app-surface ">
125-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
118+
<div class="rounded-md border app-border app-surface">
119+
<div class="border-b app-border app-surface-muted px-4 py-3">
126120
<h2 class="text-base font-semibold app-heading">Current Scores (Read-Only)</h2>
127121
</div>
128122
<dl class="grid grid-cols-2 gap-3 p-4 text-sm">
@@ -147,7 +141,7 @@ <h2 class="text-base font-semibold app-heading">Current Scores (Read-Only)</h2>
147141
<p class="border-t app-border px-4 py-3 text-sm app-muted ">Scores are recalculated on save. If the total changes, the leaderboard is updated.</p>
148142
</div>
149143
</section>
150-
<div class="flex flex-wrap justify-end gap-2 border-t app-border pt-4 ">
144+
<div class="flex flex-wrap justify-end gap-2 border-t app-border pt-5">
151145
<a href="{% url 'cadmin_homework_submissions' course.slug homework.slug %}" class="primer-button primer-button-secondary">Cancel</a>
152146
<button type="submit" class="primer-button cadmin-primary">Save Changes</button>
153147
</div>

‎cadmin/templates/cadmin/homework_submissions.html‎

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,28 @@
1313
{% endblock %}
1414
{% block cadmin_content %}
1515
<section class="border-b app-border pb-5 ">
16-
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
17-
<div>
18-
<p class="text-sm font-semibold uppercase tracking-wide app-muted">{{ course.title }}</p>
19-
<h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">{{ homework.title }} - Submissions</h1>
20-
<p class="mt-1 text-sm app-muted">Review submissions and open individual records when details are needed.</p>
21-
</div>
22-
<div class="flex flex-wrap gap-2">
16+
<div>
17+
<p class="text-sm font-semibold uppercase tracking-wide app-muted">{{ course.title }}</p>
18+
<h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">{{ homework.title }} - Submissions</h1>
19+
</div>
20+
<div class="mt-4 flex flex-col gap-3">
21+
<div class="dense-utility-links flex flex-wrap gap-x-3 gap-y-1 text-xs">
2322
<a href="{% url 'cadmin_course' course.slug %}"
24-
class="primer-button primer-button-secondary">Back to Course Admin</a>
23+
class="app-link">
24+
Back to Course Admin
25+
</a>
2526
<a href="{% url 'homework' course.slug homework.slug %}"
2627
title="View public homework page"
27-
class="primer-button primer-button-secondary">
28+
class="app-link">
2829
<i class="fas fa-external-link-alt"></i> Public
2930
</a>
3031
<a href="/admin/courses/homework/{{ homework.id }}/change/"
3132
title="Edit in Django Admin"
32-
class="primer-button primer-button-secondary">
33+
class="app-link">
3334
<i class="fas fa-edit"></i> Django
3435
</a>
36+
</div>
37+
<div class="flex flex-wrap gap-2">
3538
<form method="post"
3639
action="{% url 'cadmin_homework_set_correct_answers' course.slug homework.slug %}"
3740
onsubmit="return confirm('Set missing correct answers for {{ homework.title }} to the most frequent submitted answers?');">
@@ -54,25 +57,36 @@ <h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">{{ homework.titl
5457
</div>
5558
</section>
5659
{% if submissions_data or search_query %}
57-
<section class="mt-6 overflow-hidden rounded-md border app-border app-surface">
58-
<div class="flex flex-col gap-3 border-b app-border app-surface-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
59-
<div>
60-
<h2 class="text-base font-semibold app-heading">Submissions</h2>
61-
<p class="mt-0.5 text-sm app-muted">
62-
{{ submissions_page.paginator.count }} total{% if search_query %} matching "{{ search_query }}"{% endif %}
63-
</p>
64-
</div>
65-
<form method="get" class="flex w-full flex-col items-start gap-2 sm:w-auto sm:flex-row">
60+
<section class="mt-6">
61+
<form method="get" class="flex flex-col gap-3 sm:flex-row sm:items-end">
62+
<div class="min-w-0 flex-1 sm:max-w-md">
63+
<label for="submission-search" class="question-text font-medium">
64+
Search submissions
65+
</label>
6666
<input type="search"
67+
id="submission-search"
6768
name="q"
6869
value="{{ search_query }}"
69-
class="form-control w-full sm:w-72"
70-
placeholder="Search by email or username...">
71-
<button type="submit" class="primer-button w-fit">Search</button>
70+
class="form-control mt-2"
71+
placeholder="Email or username">
72+
</div>
73+
<div class="flex flex-wrap gap-2">
74+
<button type="submit" class="primer-button">Search</button>
7275
{% if search_query %}
7376
<a href="{% url 'cadmin_homework_submissions' course.slug homework.slug %}" class="primer-button primer-button-secondary">Clear</a>
7477
{% endif %}
75-
</form>
78+
</div>
79+
</form>
80+
</section>
81+
82+
<section class="mt-4 overflow-hidden rounded-md border app-border app-surface">
83+
<div class="border-b app-border app-surface-muted px-4 py-3">
84+
<div>
85+
<h2 class="text-base font-semibold app-heading">Submissions</h2>
86+
<p class="mt-0.5 text-sm app-muted">
87+
{{ submissions_page.paginator.count }} total{% if search_query %} matching "{{ search_query }}"{% endif %}
88+
</p>
89+
</div>
7690
</div>
7791
<div class="divide-y app-divide md:hidden">
7892
{% for data in submissions_data %}

‎cadmin/templates/cadmin/project_submission_edit.html‎

Lines changed: 48 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,63 @@
77
<li><a href="{% url 'cadmin_project_submission_edit' course.slug project.slug submission.id %}">Edit Submission</a></li>
88
{% endblock %}
99
{% block cadmin_content %}
10-
<section class="border-b app-border pb-5 ">
11-
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
12-
<div>
10+
<section class="border-b app-border pb-5">
1311
<p class="text-sm font-semibold uppercase tracking-wide app-muted">{{ project.title }}</p>
1412
<h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">Edit Project Submission</h1>
15-
<p class="mt-1 text-sm app-muted">Adjust criteria scores, peer-review points, and pass status for this project submission.</p>
16-
</div>
17-
<a href="{% url 'cadmin_project_submissions' course.slug project.slug %}" class="primer-button primer-button-secondary w-fit">Back to Submissions</a>
13+
<div class="dense-utility-links mt-3 flex flex-wrap gap-x-3 gap-y-1 text-xs">
14+
<a href="{% url 'cadmin_project_submissions' course.slug project.slug %}" class="app-link">Back to Submissions</a>
15+
<a href="{% url 'project' course.slug project.slug %}" class="app-link">
16+
<i class="fas fa-external-link-alt"></i> Public
17+
</a>
18+
<a href="/admin/courses/projectsubmission/{{ submission.id }}/change/" class="app-link">
19+
<i class="fas fa-edit"></i> Django
20+
</a>
1821
</div>
1922
</section>
20-
<section class="cadmin-meta-grid mt-6 grid grid-cols-2 gap-2 lg:grid-cols-4">
21-
<div class="rounded-md border app-border app-surface p-3 ">
22-
<p class="text-xs font-semibold uppercase app-muted">Student</p>
23-
<p class="mt-1 font-semibold app-heading">{{ submission.student.username }}</p>
23+
<section class="mt-5 text-sm">
24+
<dl class="grid gap-x-6 gap-y-3 border-b app-border pb-5 md:grid-cols-[minmax(0,1fr)_10rem_8rem_10rem] md:items-start">
25+
<div class="min-w-0">
26+
<dt class="text-xs font-semibold uppercase app-muted">Student</dt>
27+
<dd class="mt-1 min-w-0">
28+
<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
29+
<span class="font-semibold app-heading">{{ submission.student.username }}</span>
30+
<a href="{% url 'cadmin_enrollment_edit' course.slug submission.enrollment.id %}" class="app-link">
31+
<i class="fas fa-user-edit"></i> Manage enrollment
32+
</a>
33+
</div>
2434
{% if submission.student.email %}
25-
<p class="mt-1 text-xs app-muted">{{ submission.student.email }}</p>
35+
<div class="mt-1 truncate text-xs app-muted">{{ submission.student.email }}</div>
2636
{% endif %}
37+
</dd>
2738
</div>
28-
<div class="rounded-md border app-border app-surface p-3 ">
29-
<p class="text-xs font-semibold uppercase app-muted">Project</p>
30-
<p class="mt-1 font-semibold app-heading">{{ project.title }}</p>
39+
<div>
40+
<dt class="text-xs font-semibold uppercase app-muted">Submitted</dt>
41+
<dd class="mt-1 font-medium app-heading">{{ submission.submitted_at|date:"Y-m-d H:i" }}</dd>
3142
</div>
32-
<div class="rounded-md border app-border app-surface p-3 ">
33-
<p class="text-xs font-semibold uppercase app-muted">Submitted</p>
34-
<p class="mt-1 font-semibold app-heading">{{ submission.submitted_at|date:"Y-m-d H:i" }}</p>
43+
<div>
44+
<dt class="text-xs font-semibold uppercase app-muted">Total score</dt>
45+
<dd class="mt-1 text-lg font-semibold app-heading">{{ submission.total_score }}</dd>
3546
</div>
36-
<div class="rounded-md border app-border app-surface p-3 ">
37-
<p class="text-xs font-semibold uppercase app-muted">Repository</p>
47+
<div class="min-w-0">
48+
<dt class="text-xs font-semibold uppercase app-muted">Repository</dt>
49+
<dd class="mt-1 min-w-0">
3850
{% if submission.github_link %}
39-
<a href="{{ submission.github_link }}" target="_blank" class="mt-1 block break-all text-sm font-medium app-link hover:underline ">View repository</a>
51+
<a href="{{ submission.github_link }}" target="_blank" class="app-link">View repository</a>
4052
{% else %}
41-
<p class="mt-1 text-sm app-muted">Not provided</p>
53+
<span class="app-muted">Not provided</span>
4254
{% endif %}
55+
</dd>
4356
</div>
57+
</dl>
4458
</section>
45-
<form class="mt-6 space-y-6" method="post">
59+
<form class="mt-6 space-y-8" method="post">
4660
{% csrf_token %}
47-
<section class="overflow-hidden rounded-md border app-border app-surface ">
48-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
61+
<section>
4962
<h2 class="text-base font-semibold app-heading">Review Criteria Scores</h2>
50-
</div>
5163
{% if criteria_with_scores %}
52-
<div class="divide-y app-divide">
64+
<div class="mt-3 divide-y app-divide border-y app-border">
5365
{% for item in criteria_with_scores %}
54-
<article class="px-4 py-4">
66+
<article class="py-4">
5567
<div class="cadmin-criteria-row grid items-start gap-3">
5668
<div>
5769
<h3 class="font-medium app-heading">{{ item.criteria.description }}</h3>
@@ -73,20 +85,18 @@ <h3 class="font-medium app-heading">{{ item.criteria.description }}</h3>
7385
{% endfor %}
7486
</div>
7587
{% else %}
76-
<p class="px-4 py-6 text-sm app-muted">No review criteria defined for this course.</p>
88+
<p class="py-6 text-sm app-muted">No review criteria defined for this course.</p>
7789
{% endif %}
78-
<div class="border-t app-border app-surface-muted px-4 py-4 ">
90+
<div class="mt-4">
7991
<label class="mb-2 block text-sm font-semibold app-heading" for="project_score">Total Project Score (from criteria above)</label>
8092
<input type="number" class="form-control" id="project_score" name="project_score" value="{{ submission.project_score }}" readonly>
8193
<p class="mt-2 text-sm app-muted">This is automatically calculated from the criteria scores above.</p>
8294
</div>
8395
</section>
8496
<section class="grid gap-6 lg:grid-cols-2">
85-
<div class="rounded-md border app-border app-surface ">
86-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
97+
<div>
8798
<h2 class="text-base font-semibold app-heading">Additional Project Scores</h2>
88-
</div>
89-
<div class="space-y-4 p-4">
99+
<div class="mt-3 space-y-4">
90100
<div>
91101
<label class="mb-2 block text-sm font-semibold app-heading" for="project_faq_score">Project FAQ Score</label>
92102
<input type="number" class="form-control additional-score" id="project_faq_score" name="project_faq_score" value="{{ submission.project_faq_score }}" required>
@@ -99,11 +109,9 @@ <h2 class="text-base font-semibold app-heading">Additional Project Scores</h2>
99109
</div>
100110
</div>
101111
</div>
102-
<div class="rounded-md border app-border app-surface ">
103-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
112+
<div>
104113
<h2 class="text-base font-semibold app-heading">Peer Review Scores</h2>
105-
</div>
106-
<div class="space-y-4 p-4">
114+
<div class="mt-3 space-y-4">
107115
<div>
108116
<label class="mb-2 block text-sm font-semibold app-heading" for="peer_review_score">Peer Review Score</label>
109117
<input type="number" class="form-control peer-review-score" id="peer_review_score" name="peer_review_score" value="{{ submission.peer_review_score }}" required>
@@ -117,11 +125,9 @@ <h2 class="text-base font-semibold app-heading">Peer Review Scores</h2>
117125
</div>
118126
</div>
119127
</section>
120-
<section class="rounded-md border app-border app-surface ">
121-
<div class="border-b app-border app-surface-muted px-4 py-3 ">
128+
<section>
122129
<h2 class="text-base font-semibold app-heading">Overall Results</h2>
123-
</div>
124-
<div class="grid gap-4 p-4 md:grid-cols-3">
130+
<div class="mt-3 grid gap-4 md:grid-cols-3">
125131
<div>
126132
<label class="mb-2 block text-sm font-semibold app-heading" for="total_score">Total Score (automatically calculated)</label>
127133
<input type="number" class="form-control" id="total_score" name="total_score" value="{{ submission.total_score }}" readonly>
@@ -141,7 +147,7 @@ <h2 class="text-base font-semibold app-heading">Overall Results</h2>
141147
> Passed </label>
142148
</div>
143149
</section>
144-
<div class="flex flex-wrap justify-end gap-2 border-t app-border pt-4 ">
150+
<div class="flex flex-wrap justify-end gap-2 border-t app-border pt-5">
145151
<a href="{% url 'cadmin_project_submissions' course.slug project.slug %}" class="primer-button primer-button-secondary">Cancel</a>
146152
<button type="submit" class="primer-button cadmin-primary">Save Changes</button>
147153
</div>

0 commit comments

Comments
 (0)