Skip to content

Commit d40e6e3

Browse files
alexeygrigorevalexeygrigorev
committed
Complete redesign audit polish
1 parent 435c445 commit d40e6e3

10 files changed

Lines changed: 154 additions & 49 deletions

File tree

‎add_more_test_data.py‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -283,10 +283,10 @@ def create_answers_for_student(submission):
283283

284284
# Create homeworks with varied upcoming deadlines to test "time left" display
285285
upcoming_hw_data = [
286-
("upcoming-hw-urgent", "Upcoming HW: Urgent (6h left)", timedelta(hours=6), HomeworkState.OPEN.value),
287-
("upcoming-hw-soon", "Upcoming HW: Soon (2.5 days left)", timedelta(days=2, hours=12), HomeworkState.OPEN.value),
288-
("upcoming-hw-normal", "Upcoming HW: Normal (7 days left)", timedelta(days=7), HomeworkState.OPEN.value),
289-
("upcoming-hw-later", "Upcoming HW: Later (14 days left)", timedelta(days=14), HomeworkState.OPEN.value),
286+
("upcoming-hw-urgent", "Time-sensitive homework: Urgent", timedelta(hours=6), HomeworkState.OPEN.value),
287+
("upcoming-hw-soon", "Time-sensitive homework: Soon", timedelta(days=2, hours=12), HomeworkState.OPEN.value),
288+
("upcoming-hw-normal", "Time-sensitive homework: Normal", timedelta(days=7), HomeworkState.OPEN.value),
289+
("upcoming-hw-later", "Time-sensitive homework: Later", timedelta(days=14), HomeworkState.OPEN.value),
290290
]
291291

292292
for slug, title, delta, state in upcoming_hw_data:
@@ -312,8 +312,8 @@ def create_answers_for_student(submission):
312312

313313
# Create projects with upcoming deadlines
314314
upcoming_proj_data = [
315-
("upcoming-proj-urgent", "Upcoming Project: Urgent (2h left)", timedelta(hours=2), timedelta(days=5)),
316-
("upcoming-proj-normal", "Upcoming Project: Normal (10 days left)", timedelta(days=10), timedelta(days=17)),
315+
("upcoming-proj-urgent", "Time-sensitive project: Urgent", timedelta(hours=2), timedelta(days=5)),
316+
("upcoming-proj-normal", "Time-sensitive project: Normal", timedelta(days=10), timedelta(days=17)),
317317
]
318318

319319
for slug, title, sub_delta, pr_delta in upcoming_proj_data:

‎cadmin/templates/cadmin/course_admin.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ <h2 class="text-base font-semibold app-heading">Homework</h2>
5454
<div class="flex min-w-0 items-start justify-between gap-3 md:block">
5555
<div class="min-w-0">
5656
<a href="{% url 'cadmin_homework_submissions' course.slug hw.slug %}" class="block truncate font-medium app-link hover:underline">{{ hw.title }}</a>
57-
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs">
57+
<div class="dense-utility-links mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs">
5858
<a href="{% url 'homework' course.slug hw.slug %}" title="View Public Homework Page" class="app-link">
5959
<i class="fas fa-external-link-alt"></i> Public
6060
</a>
@@ -95,15 +95,15 @@ <h2 class="text-base font-semibold app-heading">Homework</h2>
9595
{% endif %}
9696
</div>
9797

98-
<div class="grid grid-cols-2 gap-2 md:flex md:flex-wrap md:justify-end">
98+
<div class="cadmin-row-actions flex flex-wrap justify-start gap-2 md:justify-end">
9999
{% if hw.state == 'OP' or hw.state == 'CL' %}
100100
<form method="post" action="{% url 'cadmin_homework_score' course.slug hw.slug %}" onsubmit="return confirm('Score all submissions for {{ hw.title }}?');">
101101
{% csrf_token %}
102-
<button type="submit" class="primer-button primer-button-success w-full">Score</button>
102+
<button type="submit" class="primer-button primer-button-success">Score</button>
103103
</form>
104104
<form method="post" action="{% url 'cadmin_homework_set_correct_answers' course.slug hw.slug %}" onsubmit="return confirm('Set correct answers to most popular for {{ hw.title }}?');">
105105
{% csrf_token %}
106-
<button type="submit" class="primer-button primer-button-secondary w-full">Set Answers</button>
106+
<button type="submit" class="primer-button primer-button-secondary">Answers</button>
107107
</form>
108108
{% else %}
109109
<span class="hidden text-sm app-muted md:inline">No action</span>
@@ -139,7 +139,7 @@ <h2 class="text-base font-semibold app-heading">Projects</h2>
139139
<div class="flex min-w-0 items-start justify-between gap-3 md:block">
140140
<div class="min-w-0">
141141
<a href="{% url 'cadmin_project_submissions' course.slug proj.slug %}" class="block truncate font-medium app-link hover:underline">{{ proj.title }}</a>
142-
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs">
142+
<div class="dense-utility-links mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs">
143143
<a href="{% url 'project' course.slug proj.slug %}" title="View Public Project Page" class="app-link">
144144
<i class="fas fa-external-link-alt"></i> Public
145145
</a>
@@ -185,17 +185,17 @@ <h2 class="text-base font-semibold app-heading">Projects</h2>
185185
{% endif %}
186186
</div>
187187

188-
<div class="grid grid-cols-1 gap-2 md:flex md:flex-wrap md:justify-end">
188+
<div class="cadmin-row-actions flex flex-wrap justify-start gap-2 md:justify-end">
189189
{% if proj.state == 'CS' %}
190190
<form method="post" action="{% url 'cadmin_project_assign_reviews' course.slug proj.slug %}" onsubmit="return confirm('Assign peer reviews for {{ proj.title }}?');">
191191
{% csrf_token %}
192-
<button type="submit" class="primer-button primer-button-secondary w-full">Assign Reviews</button>
192+
<button type="submit" class="primer-button primer-button-secondary">Assign Reviews</button>
193193
</form>
194194
{% endif %}
195195
{% if proj.state == 'PR' %}
196196
<form method="post" action="{% url 'cadmin_project_score' course.slug proj.slug %}" onsubmit="return confirm('Score all submissions for {{ proj.title }}?');">
197197
{% csrf_token %}
198-
<button type="submit" class="primer-button primer-button-success w-full">Score</button>
198+
<button type="submit" class="primer-button primer-button-success">Score</button>
199199
</form>
200200
{% endif %}
201201
{% if proj.state != 'CS' and proj.state != 'PR' %}

‎courses/static/courses.css‎

Lines changed: 92 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@
1111
--input-bg: #ffffff;
1212
--input-border: #d0d7de;
1313
--input-text: #24292f;
14-
--success-bg: #dafbe1;
14+
--success-bg: #e6f6ea;
1515
--success-text: #116329;
16-
--success-border: #aceebb;
17-
--warning-bg: #fff8c5;
16+
--success-border: #b7dfc2;
17+
--warning-bg: #fff6d7;
1818
--warning-text: #7d4e00;
19-
--warning-border: rgba(191, 135, 0, 0.4);
20-
--danger-bg: #ffebe9;
19+
--warning-border: rgba(191, 135, 0, 0.32);
20+
--danger-bg: #fff0ee;
2121
--danger-text: #cf222e;
22-
--danger-border: rgba(207, 34, 46, 0.3);
23-
--info-bg: #ddf4ff;
22+
--danger-border: rgba(207, 34, 46, 0.24);
23+
--info-bg: #edf5ff;
2424
--info-text: #315f8f;
25-
--info-border: rgba(49, 95, 143, 0.3);
25+
--info-border: rgba(49, 95, 143, 0.22);
2626
}
2727

2828
body.dark-mode {
@@ -151,6 +151,24 @@ body {
151151
color: var(--danger-text);
152152
}
153153

154+
.app-badge-neutral,
155+
.app-badge-info,
156+
.app-badge-success,
157+
.app-badge-warning,
158+
.app-badge-danger {
159+
border-radius: 6px;
160+
letter-spacing: 0;
161+
}
162+
163+
.dense-utility-links a {
164+
color: var(--text-muted);
165+
font-weight: 500;
166+
}
167+
168+
.dense-utility-links a:hover {
169+
color: var(--link-hover);
170+
}
171+
154172
/* Apply to the header nav or a div inside the header if it wraps your content */
155173
header nav {
156174
margin: 0 auto; /* Centers the navigation horizontally */
@@ -304,15 +322,45 @@ form select {
304322
}
305323

306324
.settings-section-title,
307-
.settings-label,
308-
.settings-meta-value {
325+
.settings-label {
309326
color: var(--text-heading);
310327
}
311328

329+
.settings-meta-value {
330+
color: var(--text-muted);
331+
}
332+
312333
.settings-link {
313334
color: var(--link-color);
314335
}
315336

337+
.footer-version {
338+
color: var(--text-muted);
339+
font-size: 0.8125rem;
340+
padding: 0.25rem 0.625rem;
341+
}
342+
343+
@media (max-width: 640px) {
344+
.settings-form {
345+
margin-top: 1.25rem;
346+
}
347+
348+
.settings-form > :not([hidden]) ~ :not([hidden]) {
349+
margin-top: 1.5rem !important;
350+
}
351+
352+
.settings-section {
353+
gap: 1rem;
354+
padding-top: 1.25rem;
355+
}
356+
357+
.settings-section-copy,
358+
.settings-helper {
359+
line-height: 1.4;
360+
margin-top: 0.25rem;
361+
}
362+
}
363+
316364
/* Buttons */
317365
.btn,
318366
.primer-button {
@@ -411,13 +459,38 @@ form select {
411459
.cadmin-shell .primer-button-success {
412460
background: #f6f8fa;
413461
border-color: #d0d7de;
414-
color: #116329;
462+
color: #24292f;
415463
}
416464

417465
.cadmin-shell .primer-button-success:hover {
418466
background: #eef1f4;
419467
border-color: #d0d7de;
420-
color: #116329;
468+
color: #24292f;
469+
}
470+
471+
.cadmin-row-actions form {
472+
display: inline-flex;
473+
}
474+
475+
.cadmin-row-actions .primer-button {
476+
width: auto;
477+
}
478+
479+
.readonly-value {
480+
display: grid;
481+
gap: 0.15rem;
482+
}
483+
484+
.readonly-value-label {
485+
color: var(--text-muted);
486+
font-size: 0.75rem;
487+
font-weight: 600;
488+
text-transform: uppercase;
489+
}
490+
491+
.readonly-value-content {
492+
color: var(--text-primary);
493+
font-weight: 500;
421494
}
422495

423496
.cadmin-meta-grid > * {
@@ -644,21 +717,21 @@ body.dark-mode [class*="text-red-700"] {
644717
}
645718

646719
.breadcrumbs ul li a {
647-
max-width: 150px;
720+
max-width: none;
648721
}
649722
}
650723

651724
@media (max-width: 480px) {
652-
.breadcrumbs ul li:not(:first-child):not(:last-child) {
653-
display: none;
654-
}
655-
656725
.breadcrumbs ul li {
657726
font-size: 0.8rem;
727+
white-space: normal;
658728
}
659729

660730
.breadcrumbs ul li a {
661-
max-width: 220px;
731+
max-width: none;
732+
overflow: visible;
733+
text-overflow: clip;
734+
white-space: normal;
662735
}
663736
}
664737

@@ -978,7 +1051,7 @@ body.dark-mode .cadmin-shell .primer-button.cadmin-primary:hover {
9781051
body.dark-mode .cadmin-shell .primer-button-success {
9791052
background: #21262d;
9801053
border-color: #30363d;
981-
color: #7ee787;
1054+
color: #c9d1d9;
9821055
}
9831056

9841057
body.dark-mode .cadmin-shell table tbody tr:hover {

‎courses/templates/courses/course.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h1 class="text-3xl font-semibold leading-tight tracking-normal md:text-4xl">
2929
<i class="fas fa-trophy"></i> Course leaderboard
3030
</a>
3131
{% endif %}
32-
<a href="{% url 'dashboard' course.slug %}" class="primer-button whitespace-nowrap">
32+
<a href="{% url 'dashboard' course.slug %}" class="primer-button primer-button-secondary whitespace-nowrap">
3333
<i class="fas fa-chart-bar"></i> Course dashboard
3434
</a>
3535
{% if is_authenticated %}
@@ -38,8 +38,8 @@ <h1 class="text-3xl font-semibold leading-tight tracking-normal md:text-4xl">
3838
</a>
3939
{% endif %}
4040
{% if is_authenticated and certificate_url %}
41-
<a href="{{ certificate_url }}" target="_blank" class="primer-button primer-button-success whitespace-nowrap">
42-
<i class="fas fa-certificate"></i> Download Certificate
41+
<a href="{{ certificate_url }}" target="_blank" class="primer-button primer-button-secondary whitespace-nowrap">
42+
Download Certificate
4343
</a>
4444
{% endif %}
4545
</div>
@@ -67,15 +67,15 @@ <h2 class="text-2xl font-semibold">Homework</h2>
6767
<p class="mt-2 app-text">Complete the homework and submit your solutions.</p>
6868
</div>
6969

70-
<div class="hidden border-b app-border pb-2 text-xs font-semibold uppercase app-muted md:grid md:grid-cols-[minmax(0,1fr)_17rem_10rem] md:gap-5">
70+
<div class="hidden border-b app-border pb-2 text-xs font-semibold uppercase app-muted md:grid md:grid-cols-[minmax(0,1fr)_18rem_7rem] md:gap-4">
7171
<div>Homework</div>
7272
<div>Deadline</div>
7373
<div class="text-right">Status</div>
7474
</div>
7575

7676
<div class="divide-y app-divide">
7777
{% for hw in homeworks %}
78-
<div class="grid gap-2 py-4 md:grid-cols-[minmax(0,1fr)_17rem_10rem] md:items-center md:gap-5">
78+
<div class="grid gap-2 py-4 md:grid-cols-[minmax(0,1fr)_18rem_7rem] md:items-center md:gap-4">
7979
<div class="flex min-w-0 items-start gap-3">
8080
<i class="far fa-file-alt mt-1 hidden app-muted md:inline"></i>
8181
<div class="min-w-0">
@@ -91,7 +91,7 @@ <h2 class="text-2xl font-semibold">Homework</h2>
9191

9292
<div class="text-sm app-text">
9393
<i class="far fa-calendar-alt mr-2 hidden app-muted md:inline"></i>
94-
<span>Deadline: <span class="local-date" data-timestamp="{{ hw.due_date|date:'U' }}">{{ hw.due_date | date:"j F Y, H:i" }}</span></span>
94+
<span class="md:whitespace-nowrap">Deadline: <span class="local-date" data-timestamp="{{ hw.due_date|date:'U' }}">{{ hw.due_date | date:"j F Y, H:i" }}</span></span>
9595
<div class="time-left mt-1 text-xs app-muted" data-deadline="{{ hw.due_date | date:"c" }}" data-past-tone="muted"></div>
9696
</div>
9797

@@ -121,15 +121,15 @@ <h2 class="text-2xl font-semibold">Projects</h2>
121121
<p class="mt-2 app-text">Build and submit course projects. Review status and next actions are shown for each project.</p>
122122
</div>
123123

124-
<div class="hidden border-b app-border pb-2 text-xs font-semibold uppercase app-muted md:grid md:grid-cols-[minmax(0,1fr)_17rem_10rem] md:gap-5">
124+
<div class="hidden border-b app-border pb-2 text-xs font-semibold uppercase app-muted md:grid md:grid-cols-[minmax(0,1fr)_18rem_7rem] md:gap-4">
125125
<div>Project</div>
126126
<div>Deadline</div>
127127
<div class="text-right">Status</div>
128128
</div>
129129

130130
<div class="divide-y app-divide">
131131
{% for project in projects %}
132-
<div class="grid gap-2 py-4 md:grid-cols-[minmax(0,1fr)_17rem_10rem] md:items-center md:gap-5">
132+
<div class="grid gap-2 py-4 md:grid-cols-[minmax(0,1fr)_18rem_7rem] md:items-center md:gap-4">
133133
<div class="flex min-w-0 items-start gap-3">
134134
<i class="far fa-folder mt-1 hidden app-muted md:inline"></i>
135135
<div class="min-w-0">
@@ -148,12 +148,12 @@ <h2 class="text-2xl font-semibold">Projects</h2>
148148
<div class="text-sm app-text">
149149
<i class="far fa-calendar-alt mr-2 hidden app-muted md:inline"></i>
150150
{% if project.state == 'PR' and project.submitted %}
151-
<span>Review due: <span class="local-date" data-timestamp="{{ project.peer_review_due_date|date:'U' }}">{{ project.peer_review_due_date | date:"j F Y, H:i" }}</span></span>
151+
<span class="md:whitespace-nowrap">Review due: <span class="local-date" data-timestamp="{{ project.peer_review_due_date|date:'U' }}">{{ project.peer_review_due_date | date:"j F Y, H:i" }}</span></span>
152152
<div class="time-left mt-1 text-xs app-muted" data-deadline="{{ project.peer_review_due_date | date:"c" }}" data-past-tone="muted"></div>
153153
{% elif project.state == 'CO' %}
154-
<span>Completed: <span class="local-date" data-timestamp="{{ project.peer_review_due_date|date:'U' }}">{{ project.peer_review_due_date | date:"j F Y, H:i" }}</span></span>
154+
<span class="md:whitespace-nowrap">Completed: <span class="local-date" data-timestamp="{{ project.peer_review_due_date|date:'U' }}">{{ project.peer_review_due_date | date:"j F Y, H:i" }}</span></span>
155155
{% else %}
156-
<span>Due: <span class="local-date" data-timestamp="{{ project.submission_due_date|date:'U' }}">{{ project.submission_due_date | date:"j F Y, H:i" }}</span></span>
156+
<span class="md:whitespace-nowrap">Due: <span class="local-date" data-timestamp="{{ project.submission_due_date|date:'U' }}">{{ project.submission_due_date | date:"j F Y, H:i" }}</span></span>
157157
<div class="time-left mt-1 text-xs app-muted" data-deadline="{{ project.submission_due_date | date:"c" }}" data-past-tone="muted"></div>
158158
{% endif %}
159159
</div>

0 commit comments

Comments
 (0)