From b08154f804aee05da3324837d9e8a3b6a8d9a198 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 3 Nov 2025 13:47:03 +0000
Subject: [PATCH] Refactor index.html layout for improved responsiveness and
 user navigation; update QuestionForm to use responsive columns for better
 display on small screens.

---
 atlas/templates/atlas/index.html | 47 ++++++++++++++++++++++++++++----
 sbas/forms.py                    | 15 +++++-----
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/atlas/templates/atlas/index.html b/atlas/templates/atlas/index.html
index 0ed34a86..6fd4eaa2 100644
--- a/atlas/templates/atlas/index.html
+++ b/atlas/templates/atlas/index.html
@@ -1,14 +1,49 @@
 {% extends 'atlas/base.html' %}
 
 {% block content %}
-<h2>Atlas</h2>
+    <div class="container my-4">
+        <div class="row">
+            <div class="col-12">
+                <h2 class="mb-3">Atlas</h2>
+            </div>
+        </div>
 
-<a href="{% url 'atlas:user_collections' %}">Collections to view / take</a><br/>
+        <div class="row">
+            <div class="col-12 col-md-8">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <h5 class="card-title">Collections</h5>
+                        <p class="card-text">Quick access to collections you can view or take.</p>
+                        <a href="{% url 'atlas:user_collections' %}" class="btn btn-primary">Collections to view / take</a>
+                    </div>
+                </div>
 
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">My cases / collections</h5>
+                        <p>View my <a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">cases</a>.</p>
+                        <p>
+                            <a href="{% url 'atlas:user_uploads' %}" class="btn btn-outline-secondary">
+                                <i class="bi bi-cloud-arrow-up me-1"></i> Uploads awaiting import
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
 
-<h3>My cases / collections</h3>
-View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.<br/>
-
-<a href="{% url 'atlas:user_uploads' %}"><i class="bi bi-cloud-arrow-up"></i> Uploads awaiting import</a>
+            <div class="col-12 col-md-4">
+                <div class="card sticky-top">
+                    <div class="card-body">
+                        <h6 class="card-subtitle mb-2 text-muted">Quick links</h6>
+                        <ul class="list-unstyled mb-0">
+                            <li><a href="{% url 'atlas:user_collections' %}">Collections to view / take</a></li>
+                            <li><a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">My cases</a></li>
+                            <li><a href="{% url 'atlas:user_uploads' %}">Uploads awaiting import</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/sbas/forms.py b/sbas/forms.py
index 9ac45f04..9ef3a2ea 100755
--- a/sbas/forms.py
+++ b/sbas/forms.py
@@ -120,11 +120,12 @@ class QuestionForm(ModelForm):
             ),
             Fieldset(
                 "Answers",
-                Row(Column("a_answer", css_class="col-6"), Column("a_feedback", css_class="col-6")),
-                Row(Column("b_answer", css_class="col-6"), Column("b_feedback", css_class="col-6")),
-                Row(Column("c_answer", css_class="col-6"), Column("c_feedback", css_class="col-6")),
-                Row(Column("d_answer", css_class="col-6"), Column("d_feedback", css_class="col-6")),
-                Row(Column("e_answer", css_class="col-6"), Column("e_feedback", css_class="col-6")),
+                # Use responsive columns so they stack on small screens and sit side-by-side on md+
+                Row(Column("a_answer", css_class="col-md-6"), Column("a_feedback", css_class="col-md-6")),
+                Row(Column("b_answer", css_class="col-md-6"), Column("b_feedback", css_class="col-md-6")),
+                Row(Column("c_answer", css_class="col-md-6"), Column("c_feedback", css_class="col-md-6")),
+                Row(Column("d_answer", css_class="col-md-6"), Column("d_feedback", css_class="col-md-6")),
+                Row(Column("e_answer", css_class="col-md-6"), Column("e_feedback", css_class="col-md-6")),
                 "best_answer",
             ),
             Fieldset(
@@ -133,8 +134,8 @@ class QuestionForm(ModelForm):
             ),
             Fieldset(
                 "Metadata",
-                Row(Column("category", css_class="col-6"), Column("exams", css_class="col-6")),
-                Row(Column("open_access", css_class="col-4"), Column("frcr_appropriate", css_class="col-4")),
+                Row(Column("category", css_class="col-md-6"), Column("exams", css_class="col-md-6")),
+                Row(Column("open_access", css_class="col-md-4"), Column("frcr_appropriate", css_class="col-md-4")),
             ),
         )
         self.helper.add_input(Submit("submit", "Submit", css_class="btn btn-primary"))