Polish course admin and pagination UI

Author: alexeygrigorev

accounts/templates/accounts/login.html

@@ -12,9 +12,9 @@ <h1 class="text-2xl font-semibold app-heading">
             <p class="mt-1 text-sm app-muted">Choose your preferred login method</p>
         </div>
 
-        <div class="flex flex-col items-start gap-3 px-5 py-5">
+        <div class="flex flex-col gap-3 px-5 py-5">
             {% for provider in providers %}
-                <a href="{{ provider.login_url }}" class="primer-button primer-button-secondary">
+                <a href="{{ provider.login_url }}" class="primer-button primer-button-secondary w-full justify-center">
                     {% if 'Google' in provider.name %}
                         <i class="fab fa-google text-danger"></i>
                     {% elif 'GitHub' in provider.name %}

accounts/tests.py

@@ -83,6 +83,18 @@ def test_account_settings_shows_user_and_enrolled_courses(self):
         self.assertContains(response, "student@example.com")
         self.assertContains(response, "Data Course")
         self.assertContains(response, "Student One")
+        self.assertNotContains(response, reverse("cadmin_course_list"))
+
+    def test_account_menu_shows_cadmin_for_staff(self):
+        self.user.is_staff = True
+        self.user.save()
+        self.client.force_login(self.user)
+
+        response = self.client.get(reverse("account_settings"))
+
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, reverse("cadmin_course_list"))
+        self.assertContains(response, "Course admin")
 
     def test_account_settings_updates_profile(self):
         self.client.force_login(self.user)

add_data.py

@@ -9,7 +9,11 @@
 )
 django.setup()
 
+from allauth.socialaccount.models import SocialApp  # noqa: E402
+from django.conf import settings  # noqa: E402
 from django.contrib.auth import get_user_model  # noqa: E402
+from django.contrib.sites.models import Site  # noqa: E402
+from django.core.cache import cache  # noqa: E402
 
 # This will retrieve your 'CustomUser' model
 from courses.models import (  # noqa: E402
@@ -34,6 +38,39 @@
 
 User = get_user_model()
 
+
+def configure_local_social_apps():
+    site, _ = Site.objects.update_or_create(
+        id=settings.SITE_ID,
+        defaults={
+            "domain": "localhost:8000",
+            "name": "localhost:8000",
+        },
+    )
+
+    providers = [
+        ("google", "GoogleDTC"),
+        ("github", "GitHubDTC"),
+        ("slack", "SlackDTC"),
+    ]
+
+    for provider, name in providers:
+        social_app, _ = SocialApp.objects.update_or_create(
+            provider=provider,
+            name=name,
+            defaults={
+                "client_id": f"fake-local-{provider}-client-id",
+                "secret": f"fake-local-{provider}-secret",
+                "key": "",
+            },
+        )
+        social_app.sites.set([site])
+
+    cache.delete("available_providers")
+
+
+configure_local_social_apps()
+
 admin_user, created = User.objects.get_or_create(
     username="admin", defaults={"email": "alexey@datatalks.club"}
 )
@@ -244,10 +281,10 @@ def join_possible_answers(answers: list) -> str:
     enrollment=admin_enrollment,
     github_link="https://github.com/DataTalksClub/data-engineering-zoomcamp",
     commit_id="8c45587",
-    learning_in_public_links={
-        "link1": "http://example.com",
-        "link2": "http://example.org",
-    },
+    learning_in_public_links=[
+        "http://example.com",
+        "http://example.org",
+    ],
     faq_contribution="Contributed to the following FAQs...",
     time_spent=10.0,
     problems_comments="This is a test submission.",
@@ -396,4 +433,4 @@ def join_possible_answers(answers: list) -> str:
     slug="fake-course-2",
     finished=True,
 )
-course2.save()
+course2.save()

cadmin/templates/cadmin/course_admin.html

@@ -8,19 +8,18 @@
 
 {% block cadmin_content %}
 <section class="border-b app-border pb-5">
-  <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-    <div>
-      <p class="text-sm font-semibold uppercase tracking-wide app-muted">Admin Panel</p>
-      <h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">{{ course.title }}</h1>
-      <p class="mt-1 text-sm app-muted">Start with operational tasks, then use the full lists for reference and maintenance.</p>
-    </div>
-    <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap lg:justify-end">
-      <a href="{% url 'course' course.slug %}" class="primer-button primer-button-secondary">Course Page</a>
-      <a href="{% url 'dashboard' course.slug %}" class="primer-button primer-button-secondary">Dashboard</a>
-      <a href="{% url 'leaderboard' course.slug %}" class="primer-button">Leaderboard</a>
-      <a href="/admin/courses/course/{{ course.id }}/change/" class="primer-button primer-button-secondary">
-        <i class="fas fa-edit"></i> Django Admin
-      </a>
+  <div>
+    <p class="text-sm font-semibold uppercase tracking-wide app-muted">Admin Panel</p>
+    <div class="mt-2 flex flex-wrap items-center gap-3">
+      <h1 class="text-2xl font-semibold app-heading md:text-3xl">{{ course.title }}</h1>
+      <div class="dense-utility-links flex flex-wrap gap-x-3 gap-y-1 text-xs">
+        <a href="{% url 'course' course.slug %}" title="View public course page" class="app-link">
+          <i class="fas fa-external-link-alt"></i> Public
+        </a>
+        <a href="/admin/courses/course/{{ course.id }}/change/" title="Edit in Django Admin" class="app-link">
+          <i class="fas fa-edit"></i> Django
+        </a>
+      </div>
     </div>
   </div>
 </section>

cadmin/templates/cadmin/course_list.html

@@ -1,23 +1,24 @@
 {% extends 'cadmin/base.html' %}
-{% block breadcrumbs %}
-<li><a href="{% url 'cadmin_course_list' %}">Course Admin</a></li>
-{% endblock %}
+{% block breadcrumbs_nav %}{% endblock %}
 {% block cadmin_content %}
-<section class="border-b app-border pb-5 ">
-<p class="text-sm font-semibold uppercase tracking-wide app-muted">Cadmin</p>
-<div class="mt-2 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
-<div>
-<h1 class="text-2xl font-semibold app-heading md:text-3xl">Course Administration</h1>
-<p class="mt-1 max-w-2xl text-sm app-muted">Manage course operations, public pages, and team-only workflows from one compact overview.</p>
-</div>
-<span class="inline-flex w-fit items-center rounded-full border app-border app-surface-muted px-3 py-1 text-sm font-medium app-text ">{{ courses|length }} courses</span>
-</div>
+<section class="border-b app-border pb-5">
+<h1 class="text-2xl font-semibold app-heading md:text-3xl">Course admin</h1>
 </section>
 <section class="mt-6 overflow-hidden rounded-md border app-border app-surface ">
 <div class="divide-y app-divide md:hidden">
 {% for course in courses %}
 <article class="px-4 py-4">
+<div class="flex items-center gap-2">
 <a href="{% url 'cadmin_course' course.slug %}" class="font-medium app-link hover:underline ">{{ course.title }}</a>
+<a href="{% url 'course' course.slug %}" class="app-link text-sm" title="Open student view" aria-label="Open student view">
+<i class="fas fa-external-link-alt"></i>
+<span class="sr-only">Student view</span>
+</a>
+<a href="/admin/courses/course/{{ course.id }}/change/" class="app-link text-sm" title="Edit in Django Admin" aria-label="Edit in Django Admin">
+<i class="fas fa-edit"></i>
+<span class="sr-only">Django admin</span>
+</a>
+</div>
 <p class="mt-1 text-xs app-muted">{{ course.slug }}</p>
 <div class="mt-3 flex flex-wrap gap-2">
 {% if course.visible %}
@@ -31,10 +32,6 @@ <h1 class="text-2xl font-semibold app-heading md:text-3xl">Course Administration
 <span class="inline-flex rounded-full app-alert-warning px-2 py-0.5 text-xs font-medium  ">In progress</span>
 {% endif %}
 </div>
-<div class="mt-3 flex flex-wrap gap-2">
-<a href="{% url 'cadmin_course' course.slug %}" class="primer-button">Manage</a>
-<a href="{% url 'course' course.slug %}" class="primer-button primer-button-secondary">View</a>
-</div>
 </article>
 {% empty %}
 <p class="px-4 py-8 text-center text-sm app-muted">No courses found</p>
@@ -47,14 +44,23 @@ <h1 class="text-2xl font-semibold app-heading md:text-3xl">Course Administration
 <th class="px-4 py-3">Course</th>
 <th class="px-4 py-3">Visible</th>
 <th class="px-4 py-3">Finished</th>
-<th class="px-4 py-3 text-right">Actions</th>
 </tr>
 </thead>
 <tbody class="divide-y app-divide">
 {% for course in courses %}
 <tr class="align-top">
 <td class="px-4 py-3">
+<div class="flex items-center gap-2">
 <a href="{% url 'cadmin_course' course.slug %}" class="font-medium app-link hover:underline ">{{ course.title }}</a>
+<a href="{% url 'course' course.slug %}" class="app-link text-xs" title="Open student view" aria-label="Open student view">
+<i class="fas fa-external-link-alt"></i>
+<span class="sr-only">Student view</span>
+</a>
+<a href="/admin/courses/course/{{ course.id }}/change/" class="app-link text-xs" title="Edit in Django Admin" aria-label="Edit in Django Admin">
+<i class="fas fa-edit"></i>
+<span class="sr-only">Django admin</span>
+</a>
+</div>
 <div class="mt-1 text-xs app-muted">{{ course.slug }}</div>
 </td>
 <td class="px-4 py-3">
@@ -71,16 +77,10 @@ <h1 class="text-2xl font-semibold app-heading md:text-3xl">Course Administration
 <span class="inline-flex rounded-full app-alert-warning px-2 py-0.5 text-xs font-medium  ">No</span>
 {% endif %}
 </td>
-<td class="px-4 py-3">
-<div class="flex justify-end gap-2">
-<a href="{% url 'cadmin_course' course.slug %}" class="primer-button"> Manage </a>
-<a href="{% url 'course' course.slug %}" class="primer-button primer-button-secondary"> View </a>
-</div>
-</td>
 </tr>
 {% empty %}
 <tr>
-<td colspan="4" class="px-4 py-8 text-center text-sm app-muted">No courses found</td>
+<td colspan="3" class="px-4 py-8 text-center text-sm app-muted">No courses found</td>
 </tr>
 {% endfor %}
 </tbody>

cadmin/templates/cadmin/enrollment_edit.html

@@ -17,6 +17,13 @@ <h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">Edit Enrollment<
 <p class="mt-1 text-sm app-muted">Review a student record, inspect submissions, and manage learning-in-public eligibility.</p>
 </div>
 <div class="flex flex-wrap gap-2">
+<form method="post" action="{% url 'loginas-user-login' enrollment.student.id %}">
+{% csrf_token %}
+<input type="hidden" name="next" value="{% url 'course' course.slug %}">
+<button type="submit" class="primer-button primer-button-secondary">
+<i class="fas fa-sign-in-alt"></i> Log in as student
+</button>
+</form>
 <a href="{% url 'leaderboard_score_breakdown' course_slug=course.slug enrollment_id=enrollment.id %}" class="primer-button primer-button-secondary">View Score Breakdown</a>
 <a href="{% url 'leaderboard' course.slug %}" class="primer-button primer-button-secondary">View Leaderboard</a>
 <a href="{% url 'cadmin_enrollments' course.slug %}" class="primer-button">Back to Enrollments</a>

cadmin/templates/cadmin/homework_submission_edit.html

@@ -17,26 +17,31 @@ <h1 class="mt-2 text-2xl font-semibold app-heading md:text-3xl">Edit Homework Su
 <a href="{% url 'cadmin_homework_submissions' course.slug homework.slug %}" class="primer-button primer-button-secondary w-fit">Back to Submissions</a>
 </div>
 </section>
-<section class="cadmin-meta-grid mt-6 grid grid-cols-2 gap-2 lg:grid-cols-4">
-<div class="rounded-md border app-border app-surface p-3 ">
-<p class="text-xs font-semibold uppercase app-muted">Student</p>
-<p class="mt-1 font-semibold app-heading">{{ submission.student.username }}</p>
+<section class="mt-6 rounded-md border app-border app-surface px-4 py-3 text-sm">
+<dl class="grid gap-x-6 gap-y-3 md:grid-cols-[minmax(0,1fr)_10rem_7rem] md:items-start">
+<div class="min-w-0">
+<dt class="text-xs font-semibold uppercase app-muted">Student</dt>
+<dd class="mt-1 min-w-0">
+<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+<span class="font-semibold app-heading">{{ submission.student.username }}</span>
+<a href="{% url 'cadmin_enrollment_edit' course.slug submission.enrollment.id %}" class="app-link">
+<i class="fas fa-user-edit"></i> Manage enrollment
+</a>
+</div>
 {% if submission.student.email %}
-<p class="mt-1 text-xs app-muted">{{ submission.student.email }}</p>
+<div class="mt-1 truncate text-xs app-muted">{{ submission.student.email }}</div>
 {% endif %}
+</dd>
 </div>
-<div class="rounded-md border app-border app-surface p-3 ">
-<p class="text-xs font-semibold uppercase app-muted">Homework</p>
-<p class="mt-1 font-semibold app-heading">{{ homework.title }}</p>
-</div>
-<div class="rounded-md border app-border app-surface p-3 ">
-<p class="text-xs font-semibold uppercase app-muted">Submitted</p>
-<p class="mt-1 font-semibold app-heading">{{ submission.submitted_at|date:"Y-m-d H:i" }}</p>
+<div>
+<dt class="text-xs font-semibold uppercase app-muted">Submitted</dt>
+<dd class="mt-1 font-medium app-heading">{{ submission.submitted_at|date:"Y-m-d H:i" }}</dd>
 </div>
-<div class="rounded-md border app-border app-surface p-3 ">
-<p class="text-xs font-semibold uppercase app-muted">Current Total Score</p>
-<p class="mt-1 text-2xl font-semibold app-heading">{{ submission.total_score }}</p>
+<div>
+<dt class="text-xs font-semibold uppercase app-muted">Total score</dt>
+<dd class="mt-1 text-lg font-semibold app-heading">{{ submission.total_score }}</dd>
 </div>
+</dl>
 </section>
 <form class="mt-6 space-y-6" method="post">
 {% csrf_token %}
@@ -104,10 +109,11 @@ <h3 class="font-medium app-heading">Question {{ forloop.counter }}: {{ item.ques
 <h2 class="text-base font-semibold app-heading">Learning in Public Links</h2>
 </div>
 <div class="p-4">
-<label class="mb-2 block text-sm font-semibold app-heading" for="learning_in_public_links">Links (comma-separated)</label>
-<textarea class="form-control" id="learning_in_public_links" name="learning_in_public_links" rows="3" placeholder="https://example.com/post1, https://example.com/post2">
+<label class="mb-2 block text-sm font-semibold app-heading" for="learning_in_public_links">Links (one per line)</label>
+<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">
 {% if submission.learning_in_public_links %}
-{{ submission.learning_in_public_links|join:", " }}
+{{ submission.learning_in_public_links|join:"
+" }}
 {% endif %}
 </textarea>
 <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>

cadmin/templates/cadmin/project_submissions.html

@@ -343,17 +343,5 @@ <h2 class="text-base font-semibold app-heading">Submissions</h2>
 
       updateArrows();
     </script>
-    {% if submissions_page.paginator.num_pages > 1 %}
-        <nav class="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm app-text" aria-label="Project submission pages">
-            <span class="app-muted">Page {{ submissions_page.number }} of {{ submissions_page.paginator.num_pages }}</span>
-            <div class="flex flex-wrap gap-2">
-                {% if submissions_page.has_previous %}
-                    <a class="primer-button primer-button-secondary" href="?page={{ submissions_page.previous_page_number }}{{ pagination_querystring }}">Previous</a>
-                {% endif %}
-                {% if submissions_page.has_next %}
-                    <a class="primer-button" href="?page={{ submissions_page.next_page_number }}{{ pagination_querystring }}">Next</a>
-                {% endif %}
-            </div>
-        </nav>
-    {% endif %}
+    {% include 'include/pagination.html' with pagination_page=submissions_page pagination_range=page_range pagination_querystring=pagination_querystring pagination_label='Project submission pages' %}
 {% endblock %}