switch case form to crispy and start using bootstrap nav

atlas/forms.py

@@ -48,6 +48,8 @@ from generic.models import Examination#, Sign
 
 from django.contrib.admin.widgets import FilteredSelectMultiple
 from django.forms.widgets import RadioSelect, TextInput, Textarea, Select
+from crispy_forms.layout import Submit, Layout, Fieldset, Field, Div
+from crispy_forms.bootstrap import Accordion, AccordionGroup
 
 from tinymce.widgets import TinyMCE
 
@@ -304,8 +306,6 @@ class CaseForm(ModelForm):
         js = ["jsi18n.js", "tesseract.min.js", "js/upload_form_helpers.js"]
 
     def __init__(self, *args, **kwargs):
-        logging.info("LOG")
-        logging.debug(kwargs)
         self.user = kwargs.pop(
             "user"
         )  # To get request.user. Do not use kwargs.pop('user', None) due to potential security hole
@@ -340,6 +340,34 @@ class CaseForm(ModelForm):
             case_queryset = get_cases_available_to_user(self.user)
         self.fields["previous_case"].queryset=case_queryset
 
+
+        self.helper = FormHelper()
+        self.helper.form_id = "id-case-form"
+        self.helper.form_class = "case-form"
+        self.helper.form_method = "post"
+        self.helper.form_action = "submit"
+        self.helper.form_tag = False
+
+        self.helper.layout = Layout(
+            Fieldset(
+                "Case details",
+                "title",
+                "subspecialty",
+                "description",
+                "history",
+                "presentation",
+                "discussion",
+                "condition",
+                "pathological_process",
+                "report",
+                "open_access",
+                "previous_case",
+                "diagnostic_certainty",
+            ),
+
+        )
+
+
     def get_queryset(self, request):
         return (
             super()

atlas/templates/atlas/base.html

@@ -5,19 +5,83 @@
 {% endblock %}
 
 {% block navigation %}
-    Atlas:
     {% if request.user.is_authenticated %}
-        <a href="{% url 'atlas:collection_view' %}">Collections</a> /
+        <nav class="navbar navbar-expand-lg navbar-dark submenu">
-        <a href="{% url 'atlas:case_view' %}">Cases</a> /
+            <div class="container-fluid">
-        <a href="{% url 'atlas:series_view' %}">Series</a> /
+                <a class="navbar-brand" href="{% url 'atlas:index' %}">Atlas</a>
-        <a href="{% url 'atlas:categories_list' %}">Categories</a> /
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-        {% comment %} <a href="{% url 'atlas:resource_view' %}">Resources</a> / {% endcomment %}
+                    <span class="navbar-toggler-icon"></span>
-        <a href="{% url 'atlas:case_create' %}" title="Create a new atlas case">Create Case</a> /
+                </button>
-        <a href="{% url 'atlas:series_create' %}" title="Create a new image series">Create Series</a> /
+                <div class="collapse navbar-collapse" id="navbarNav">
-        <a href="{% url 'atlas:resource_view' %}" title="Resources">Resources</a> /
+                    <ul class="navbar-nav">
-        <a href="{% url 'atlas:user_uploads' %}" title="View unimported uploads">Uploads</a> /
+                        <li class="nav-item dropdown">
-        <a href="{% url 'atlas:question_schema_overview' %}" title="View and edit question schemas">Question Schemas</a> /
+                            <a class="nav-link d-inline" href="{% url 'atlas:collection_view' %}">Collections</a>
-        <a href="{% url 'atlas:help' %}" title="View the atlas help pages">Help</a>
+                            <a class="nav-link d-inline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                <span class="visually-hidden">Toggle Dropdown</span>
+                            </a>
+
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:user_collections' %}">Collections to view / take</a>
+                                </li>
+                                <li><hr class="dropdown-divider"></li>
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:collection_view' %}">Manage Collections</a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:exam_create' %}">Create collection</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link d-inline" href="{% url 'atlas:case_view' %}">Cases</a>
+                            <a class="nav-link d-inline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                <span class="visually-hidden">Toggle Dropdown</span>
+                            </a>
+
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:case_view' %}">Manage Cases</a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:case_create' %}">Create Case</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link d-inline" href="{% url 'atlas:series_view' %}">Series</a>
+                            <a class="nav-link d-inline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                                <span class="visually-hidden">Toggle Dropdown</span>
+                            </a>
+
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:series_view' %}">Manage Series</a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item" href="{% url 'atlas:series_create' %}">Create Series</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'atlas:categories_list' %}">Categories</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'atlas:resource_view' %}" title="Resources">Resources</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'atlas:user_uploads' %}" title="View unimported uploads">Uploads</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'atlas:question_schema_overview' %}" title="View and edit question schemas">Question Schemas</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'atlas:help' %}" title="View the atlas help pages">Help</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
     {% endif %}
     {% comment %} </br>
 Questions by:

atlas/templates/atlas/case_display_block.html

@@ -1,4 +1,24 @@
 <div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
+    <h2>Case: {{ case.title }}</h2>
+    {% if case.previous_case or case.next_case %}
+        <div class="alert alert-info" role="alert">
+            This case is part of a series.<br/>
+            <div class="row">
+            {% if case.previous_case %}
+                <div class="col-sm-6 mb-3 mb-sm-0">
+                    <h5 class="card-title">Previous Case</h5>
+                    {{ case.previous_case.get_link }}
+                </div>
+            {% endif %}
+            {% if case.next_case %}
+                <div class="col-sm-6">
+                    <h5 class="card-title">Next Case</h5>
+                    {{ case.next_case.get_link }}
+                </div>
+            {% endif %}
+            </div>
+        </div>
+    {% endif %}
     <div><a href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">View case in OHIF</a> <a target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">(new tab)</a>
 
         <div class="date">
@@ -7,7 +27,6 @@
         <div class="id">
             ID: {{ case.id }}
         </div>
-        <p class="pre-whitespace"><b>Title:</b> {{ case.title }}</p>
 
         <p class="pre-whitespace"><b>Description:</b> {{ case.description }}</p>
 
@@ -176,6 +195,9 @@
             {% endfor %}
         </ul>
     </p>
+
+
+
     <p class="pre-whitespace"><b>Previous case:</b> {{ case.previous_case.get_link }}</p>
     <p class="pre-whitespace"><b>Next case:</b> {{ case.next_case.get_link }}</p>
     <div>

atlas/templates/atlas/case_form.html

@@ -1,6 +1,7 @@
 {% extends "atlas/base.html" %}
 <!-- {% load static from static %} -->
 
+{% load crispy_forms_tags %}
 {% block css %}
 {% endblock %}
 {% block js %}
@@ -59,6 +60,8 @@
         {% include "atlas/question_link_header.html" %}
     {% endif %}
 
+
+
     <h2>Submit Case</h2>
     <details>
         <summary>Instructions</summary>
@@ -72,9 +75,12 @@
     {% endif %}
 
     <form class="highlight" action="" method="post" enctype="multipart/form-data" id="atlas-form">
-        {% csrf_token %}
+        {% crispy form form.helper %}
+
+        {% comment %} {% crispy series_formset %} {% endcomment %}
+
+        {% comment %} {{ form }} {% endcomment %}
 
-        {{ form }}
         <h3>Series:</h3>
         Add image sets here. These can only be added once created (they can also be added to cases on creation).
         <input type="button" value="Add More Series" id="add_more_series">
@@ -84,12 +90,12 @@
                     <li class="no-error series-formset">
                         {{form.non_field_errors}}
                         {{form.errors}}
-                    {{ form }}
+                        {{ form | crispy}}
                     </li>
                 {% endfor %}
             </ol>
         </div>
-        {{ series_formset.management_form }}
+        {{ series_formset.management_form | crispy }}
         <h3>Differential:</h3>
         Add differential here.
         <input type="button" value="Add Another Differential" id="add_more_differential">
@@ -99,12 +105,12 @@
                     <li class="no-error casedifferential_formset">
                         {{form.non_field_errors}}
                         {{form.errors}}
-                    {{ form }}
+                        {{ form  | crispy}}
                     </li>
                 {% endfor %}
             </ol>
         </div>
-        {{ casedifferential_formset.management_form }}
+        {{ casedifferential_formset.management_form | crispy }}
         <h3>Resource:</h3>
         Add resource here. Resource can be anything that is useful for the case (videos, pdf, etc). This can either be avalaible before attempting the case (such a for a pre reading list) or after.
         <input type="button" value="Add Another Resource" id="add_more_resource">
@@ -114,28 +120,28 @@
                     <li class="no-error caseresource_formset">
                         {{form.non_field_errors}}
                         {{form.errors}}
-                    {{ form }}
+                        {{ form  | crispy}}
                     </li>
                 {% endfor %}
             </ol>
         </div>
-        {{ caseresource_formset.management_form }}
+        {{ caseresource_formset.management_form  | crispy}}
         <br/>
         <input type="submit" class="submit-button" value="Submit" name="submit">
     </form>
     <div id="empty_series_form" style="display:none">
         <li class='no_error series-formset'>
-            {{ series_formset.empty_form }}
+            {{ series_formset.empty_form  | crispy}}
         </li>
     </div>
     <div id="empty_casedifferential_form" style="display:none">
         <li class='no_error casedifferential_formset'>
-            {{ casedifferential_formset.empty_form }}
+            {{ casedifferential_formset.empty_form  | crispy}}
         </li>
     </div>
     <div id="empty_caseresource_form" style="display:none">
         <li class='no_error caseresource_formset'>
-            {{ caseresource_formset.empty_form }}
+            {{ caseresource_formset.empty_form  | crispy}}
         </li>
     </div>
 {% endblock %}

atlas/templates/atlas/case_view.html

@@ -0,0 +1,27 @@
+{% extends 'atlas/base.html' %}
+
+{% load render_table from django_tables2 %}
+{% block css %}
+{% endblock %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <h2>My Cases</h2>
+        <details>
+            <summary>
+                <h4>Filter</h4>
+            </summary>
+            <div id="view-filter-options">
+                <form action="" method="get">
+                    {{ filter.form }}
+                    <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
+                </form>
+            </div>
+            View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
+        </details>
+        {% render_table table %}
+    </div>
+
+    <div id="exam-options"></div>
+{% endblock %}

atlas/templates/atlas/collection_index_view.html

@@ -1,7 +1,6 @@
 {% extends 'atlas/base.html' %}
 
 {% block content %}
-    <a href="{% url 'atlas:exam_create' %}">Create collection</a>
     <ul>
         {% for collection in collections %}
             <li><a href='{{collection.get_absolute_url}}'>{{collection.name}}</a></li>

atlas/templates/atlas/series_view.html

@@ -0,0 +1,27 @@
+{% extends 'atlas/base.html' %}
+
+{% load render_table from django_tables2 %}
+{% block css %}
+{% endblock %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <h2>My Series</h2>
+        <details>
+            <summary>
+                <h4>Filter</h4>
+            </summary>
+            <div id="view-filter-options">
+                <form action="" method="get">
+                    {{ filter.form }}
+                    <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
+                </form>
+            </div>
+            View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
+        </details>
+        {% render_table table %}
+    </div>
+
+    <div id="exam-options"></div>
+{% endblock %}

atlas/templates/atlas/view.html

@@ -7,10 +7,6 @@
 {% block content %}
 
     <div class="container-fluid">
-        Create a new <a href='{{request.path}}create'>collection</a> / <a href="{% url 'atlas:user_collections' %}">Collections to view / take</a>
-
-
-
         <h2>My Collections</h2>
         <details>
             <summary>

atlas/views.py

@@ -1182,7 +1182,7 @@ def get_examination_id(request):
 class CaseView(LoginRequiredMixin, SingleTableMixin, FilterView):
     model = Case
     table_class = CaseTable
-    template_name = "atlas/view.html"
+    template_name = "atlas/case_view.html"
 
     filterset_class = CaseFilter
 
@@ -1190,7 +1190,7 @@ class CaseView(LoginRequiredMixin, SingleTableMixin, FilterView):
 class SeriesView(LoginRequiredMixin, SingleTableMixin, FilterView):
     model = Series
     table_class = SeriesTable
-    template_name = "atlas/view.html"
+    template_name = "atlas/series_view.html"
 
     filterset_class = SeriesFilter
 

rad/static/css/anatomy.css

@@ -142,18 +142,6 @@ button a {
   color: inherit;
 }
 
-.main-nav-header {
-  /* max-width: 50%; */
-  float: right;
-}
-
-.main-nav-header span {
-  float: right;
-  padding-left: 10px;
-}
-
-.top-bar-link {}
-
 .marking-list pre {
   display: inline;
   white-space: pre-wrap;
@@ -1114,7 +1102,7 @@ tr:has(> td > a) {
 #logout-form {
   display: inline;
 }
-#logout-form button {
+/* #logout-form button {
   background: none;
   border: none;
   cursor: pointer;
@@ -1122,7 +1110,7 @@ tr:has(> td > a) {
   text-decoration: underline;
   color: #3282b8;
 }
-
+ */
 .resource-block {
   max-width: fit-content;
 }
@@ -1318,3 +1306,17 @@ details.help-text > summary {
 .accordion-button {
   background-color: darkgray;
 }
+
+.navbar {
+  padding: 0px;
+}
+
+.navbar .nav-link {
+  padding: 0px;
+}
+
+.navbar .navbar-brand {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+

sbas/templates/sbas/base.html

@@ -5,16 +5,39 @@
 {% endblock %}
 
 {% block navigation %}
-    Sbas:
+<nav class="navbar navbar-expand-lg navbar-dark submenu">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="{% url 'sbas:index' %}">SBAs</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav">
                 {% if request.user.is_authenticated %}
-        <a href="{% url 'sbas:exam_list' %}">Exams</a> /
+                    <li class="nav-item">
-        <a href="{% url 'sbas:exam_create' %}" title="Create a new exam">Create Exam</a> /
+                        <a class="nav-link" href="{% url 'sbas:exam_list' %}"><i class="bi bi-mortarboard"></i> Exams</a>
-        <a href="{% url 'sbas:question_view' %}">Questions</a> /
+                    </li>
-        <a href="{% url 'sbas:question_create' %}" title="Create a new question">Create Question</a>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'sbas:question_view' %}"><i class="bi bi-question-circle"></i> Questions</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><i class="bi bi-file-earmark-plus"></i> Create</a>
+                        <ul class="dropdown-menu">
+                          <li><a class="dropdown-item" href="{% url 'sbas:exam_create' %}" title="Create a new exam"><i class="bi bi-mortarboard"></i> Exam</a></li>
+                          <li><a class="dropdown-item" href="{% url 'sbas:question_create' %}" title="Create a new question"><i class="bi bi-question-circle"></i> Question</a></li>
+                        </ul>
+                      </li>
+                        
                     {% if request.user.is_superuser %}
-            / <a href="{% url 'sbas:user_answer_table_view' %}" title="User answers">Answers</a>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{% url 'sbas:user_answer_table_view' %}" title="User answers">Answers</a>
+                        </li>
                     {% endif %}
                 {% endif %}
+            </ul>
+        </div>
+    </div>
+</nav>
 {% endblock %}
 {% block content %}
 {% endblock %}

templates/base.html

@@ -73,57 +73,87 @@
         {% endblock %}
         <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
         <link rel="stylesheet" href="{% static 'css/forms.css' %}">
+        <style>
+
+            .dropdown-menu {
+                background-color: rgb(28, 25, 25)
+            }
+            .dropdown-item {
+                color: lightblue;
+            }
+        </style>
         {% block css %}
         {% endblock %}
     </head>
 
 
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
-        <div class="main-nav-header">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary py-0">
+            <div class="container-fluid">
+                <a class="navbar-brand pt-0" href="/">Home</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"><i class="bi bi-text-indent-right"></i></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto ">
                         {% if request.user.is_authenticated %}
-                <span id="logout-link" class="top-bar-link">
+                            <li id="atlas-link" class="nav-item">
+                                <a class="nav-link active" href="{% url 'atlas:index' %}">Atlas</a>
+                            </li>
+                            <li class="nav-item dropdown pt-0">
+                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    FRCR
+                                </a>
+                                <ul class="dropdown-menu">
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'rapids:index' %}">Rapids</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'longs:index' %}">Longs</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'anatomy:index' %}">Anatomy</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'physics:index' %}">Physics</a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item" href="{% url 'sbas:index' %}">SBAs</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            {% if request.user|has_group:"cid_user_manager" %}
+                                <li id="candidate-link" class="nav-item">
+                                    <a class="nav-link active" href="{% url 'people' %}">People</a>
+                                </li>
+                            {% endif %}
+                            <li id="profile-link" class=" nav-item">
+                                <a class="nav-link active" href="{% url 'profile' %}">Profile</a>
+                            </li>
+                        {% endif %}
+
+                        {% if request.user.is_staff %}
+                            <li class="nav-item">
+                                <a class="nav-link active" href="{% url 'admin:index' %}">Admin</a>
+                            </li>
+                        {% endif %}
+                        {% if request.user.is_authenticated %}
+                            <li id="logout-link" class="nav-item">
                                 <form  id="logout-form" method="post" action="{% url 'logout' %}">
                                     {% csrf_token %}
-                        <button type="submit">Log out</button>
+                                    <button class="nav-link btn btn-link" type="submit">Log out</button>
                                 </form>
                                 {% comment %} <a href="{% url 'logout' %}">Logout</a> {% endcomment %}
-                </span>
+                            </li>
-                <span id="profile-link" class=" top-bar-link">
-                    <a href="{% url 'profile' %}">Profile</a>
-                </span>
-                <span id="rapids-link" class="top-bar-link">
-                    <a href="{% url 'rapids:index' %}">Rapids</a>
-                </span>
-                <span id="longs-link" class="top-bar-link">
-                    <a href="{% url 'longs:index' %}">Longs</a>
-                </span>
-                <span id="physics-link" class="top-bar-link">
-                    <a href="{% url 'physics:index' %}">Physics</a>
-                </span>
-                <span id="anatomy-link" class="top-bar-link">
-                    <a href="{% url 'anatomy:index' %}">Anatomy</a>
-                </span>
-                <span id="sbas-link" class="top-bar-link">
-                    <a href="{% url 'sbas:index' %}">SBAs</a>
-                </span>
-                <span id="atlas-link" class="top-bar-link">
-                    <a href="{% url 'atlas:index' %}">Atlas</a>
-                </span>
-                {% if request.user|has_group:"cid_user_manager" %}
-                    <span id="candidate-link" class="top-bar-link">
-                        <a href="{% url 'people' %}">People</a>
-                    </span>
                         {% endif %}
-            {% endif %}
+                    </ul>
-            {% if request.user.is_staff %}
+{% comment %}       <form class="d-flex" role="search">
-                <span id="admin-link" class="top-bar-link">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-                    <a href="{% url 'admin:index' %}">Admin</a>
+        <button class="btn btn-outline-success" type="submit">Search</button>
-                </span>
+      </form> {% endcomment %}
-            {% endif %}
-            <span id="index-link" class="top-bar-link">
-                <a href="{% url 'home' %}">Home</a>
-            </span>
                 </div>
+            </div>
+        </nav>
         <div class="content container">
             {% block navigation %}
             {% endblock %}