Redesign course UI with Tailwind

Author: alexeygrigorev

accounts/templates/accounts/login.html

@@ -1,46 +1,4 @@
-{% extends 'base.html' %}
-
-{% block title %}Login - Course Management{% endblock %}
-
-{% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-6">
-    <div class="card">
-      <div class="card-header text-center">
-        <h3><i class="fas fa-sign-in-alt"></i> Sign In</h3>
-        <p class="text-muted">Choose your preferred login method</p>
-      </div>
-      <div class="card-body">
-        {% for provider in providers %}
-          <a href="{{ provider.login_url }}" class="btn btn-outline-primary btn-block mb-3">
-            {% if 'Google' in provider.name %}
-              <i class="fab fa-google text-danger"></i>
-            {% elif 'GitHub' in provider.name %}
-              <i class="fab fa-github text-dark"></i>
-            {% elif 'Slack' in provider.name %}
-              <i class="fab fa-slack text-info"></i>
-            {% else %}
-              <i class="fas fa-sign-in-alt"></i>
-            {% endif %}
-            Continue with {{ provider.name }}
-          </a>
-        {% empty %}
-          <div class="alert alert-warning text-center">
-            <i class="fas fa-exclamation-triangle"></i>
-            <strong>No login providers configured</strong><br>
-            Please contact an administrator to set up social login.
-          </div>
-        {% endfor %}
-      </div>
-      {% if providers %}
-      <div class="card-footer text-center">
-        <small class="text-muted">
-          <i class="fas fa-shield-alt"></i>
-          Secure login - we never store your social media passwords
-        </small>
-      </div>
-      {% endif %}
-    </div>
-  </div>
-</div>
-{% endblock %}
+{% extends 'base.html' %} {% block title %}Login - Course Management{% endblock %} {% block content %}
+<section class="mx-auto max-w-md"> <div class="rounded-md border app-border app-surface "> <div class="border-b app-border app-surface-muted px-5 py-4 text-center "> <h1 class="text-2xl font-semibold app-heading"><i class="fas fa-sign-in-alt"></i> Sign In</h1> <p class="mt-1 text-sm app-muted">Choose your preferred login method</p> </div> <div class="space-y-3 px-5 py-5"> {% for provider in providers %} <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 %} <i class="fab fa-github text-dark"></i> {% elif 'Slack' in provider.name %} <i class="fab fa-slack text-info"></i> {% else %} <i class="fas fa-sign-in-alt"></i> {% endif %} Continue with {{ provider.name }} </a> {% empty %} <div class="rounded-md border app-alert-warning px-4 py-3 text-center text-sm  "> <i class="fas fa-exclamation-triangle"></i> <strong>No login providers configured</strong><br> Please contact an administrator to set up social login. </div> <a href="{% url 'course_list' %}" class="primer-button primer-button-secondary w-full justify-center">Back to courses</a> {% endfor %} </div> {% if providers %} <div class="border-t app-border px-5 py-3 text-center text-xs app-muted "> <i class="fas fa-shield-alt"></i> Secure login - we never store your social media passwords </div> {% endif %} </div>
+</section>
+{% endblock %}

add_more_test_data.py

@@ -279,3 +279,53 @@ def create_answers_for_student(submission):
 
 p1.peer_review_due_date = timezone.now()
 score_project(p1)
+
+
+# Create homeworks with varied upcoming deadlines to test "time left" display
+upcoming_hw_data = [
+    ("upcoming-hw-urgent", "Upcoming HW: Urgent (6h left)", timedelta(hours=6), HomeworkState.OPEN.value),
+    ("upcoming-hw-soon", "Upcoming HW: Soon (2.5 days left)", timedelta(days=2, hours=12), HomeworkState.OPEN.value),
+    ("upcoming-hw-normal", "Upcoming HW: Normal (7 days left)", timedelta(days=7), HomeworkState.OPEN.value),
+    ("upcoming-hw-later", "Upcoming HW: Later (14 days left)", timedelta(days=14), HomeworkState.OPEN.value),
+]
+
+for slug, title, delta, state in upcoming_hw_data:
+    hw, created = Homework.objects.get_or_create(
+        course=course,
+        slug=slug,
+        defaults={
+            "title": title,
+            "description": f"Test homework to verify time-left display.",
+            "due_date": timezone.now() + delta,
+            "state": state,
+        },
+    )
+    if created:
+        Question.objects.create(
+            homework=hw,
+            text="Sample question?",
+            question_type=QuestionTypes.FREE_FORM.value,
+            answer_type=AnswerTypes.ANY.value,
+            correct_answer="answer",
+        )
+    print(f"Created homework: {title}")
+
+# Create projects with upcoming deadlines
+upcoming_proj_data = [
+    ("upcoming-proj-urgent", "Upcoming Project: Urgent (2h left)", timedelta(hours=2), timedelta(days=5)),
+    ("upcoming-proj-normal", "Upcoming Project: Normal (10 days left)", timedelta(days=10), timedelta(days=17)),
+]
+
+for slug, title, sub_delta, pr_delta in upcoming_proj_data:
+    proj, _ = Project.objects.get_or_create(
+        course=course,
+        slug=slug,
+        defaults={
+            "title": title,
+            "description": "Test project to verify time-left display.",
+            "submission_due_date": timezone.now() + sub_delta,
+            "peer_review_due_date": timezone.now() + pr_delta,
+            "state": ProjectState.COLLECTING_SUBMISSIONS.value,
+        },
+    )
+    print(f"Created project: {title}")

cadmin/templates/cadmin/base.html

@@ -1,19 +1,9 @@
-{% extends 'base.html' %}
-
-{% block content %}
+{% extends 'base.html' %} {% block body_class %}cadmin-page{% endblock %} {% block content %}
 {% if messages %}
-<div class="messages">
-  {% for message in messages %}
-  <div class="alert {% if message.tags %}alert-{{ message.tags }}{% else %}alert-info{% endif %} alert-dismissible fade show" role="alert">
-    {{ message }}
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  {% endfor %}
+<div class="space-y-3"> {% for message in messages %} <div class="rounded-md border app-alert-warning px-4 py-3 text-sm  " role="alert"> <div class="flex items-start justify-between gap-3"> <span>{{ message }}</span> <button type="button" class="text-lg leading-none opacity-70 hover:opacity-100" data-dismiss="alert" aria-label="Close">&times;</button> </div> </div> {% endfor %}
 </div>
-{% endif %}
-
+{% endif %} <div class="cadmin-shell">
 {% block cadmin_content %}
 {% endblock %}
+</div>
 {% endblock %}