Merge pull request #480 from direct-framework/feat/ui-design-nav

General UI and Nav

Author: davehorsfall

data/events.csv

@@ -0,0 +1,15 @@
+Title,Start Date,End Date,Description,Contributors,Image
+SSI CW23 Hack Day 2023,2023-05-04,2023-05-04,"Slides; Notes; Teams: HackMD, Miro, Github","Aleksandra Nenadic, Aman Goel, Dave Horsfall, Diego Alonso Álvarez, Eli Chadwick, Iain Barrass, Hannah Williams, Lieke de Boer, Paul K Korir, Martin O’Reilly, Matthew Bluteau, Nadine Spychala, Sean Marshallsay",assets/img/blog/single/image.jpg
+UKHSA internal presentation,2023-05-12,2023-05-12,Slides,Hannah Williams,assets/img/blog/single/image.jpg
+RSE South workshop,2023-05-16,2023-05-16,Slides,Hannah Williams,assets/img/blog/single/image.jpg
+UK Carpentries Community Call,2023-06-26,2023-06-26,Slides,"Aleksandra Nenadic, Matthew Bluteau, Dave Horsfall",assets/img/blog/single/image.jpg
+RS London South-East,2023-07-17,2023-07-17,Abstract,"Hannah Williams, Diego Alonso Álvarez",assets/img/blog/single/image.jpg
+RSE Conference 2023,2023-09-05,2023-09-08,Meeting notes,"Dave Horsfall, Hannah Williams, Matthew Bluteau",assets/img/blog/single/image.jpg
+Professionalising data science roles workshop,2023-10-02,2023-10-02,,Dave Horsfall,assets/img/blog/single/image.jpg
+DRI retreat,2024-03-18,2024-03-22,Emma & Sam attending; Emma involved in panels; Promote project via panels and poster,,assets/img/blog/single/image.jpg
+Dagstuhl Seminar 24161 Research Software Engineering: Bridging Knowledge Gaps,2024-04-14,2024-04-19,Toby attending and will try to promote project,,assets/img/blog/single/image.jpg
+Collaborations Workshop 2024,2024-04-30,2024-05-02,"Lightning talk/workshop; Target discussions, invite people to short interviews",,assets/img/blog/single/image.jpg
+N8CIR In person RSE Meetup Summer 2024,2024-06-01,2024-08-31,No website/dates available?,,assets/img/blog/single/image.jpg
+RSECon24,2024-09-03,2024-09-05,Submit panel in collaboration with Met Office via Emma; Submit workshop focused on defining & categorising skills,,assets/img/blog/single/image.jpg
+CarpentryConnect Heidelberg,2024-11-12,2024-11-14,"Aleks, Toby, Matt B working on submissions",,assets/img/blog/single/image.jpg
+CW25,2025-05-13,2025-05-15,"Proposal; Workshop notes & blogpost & Hack Day notes; Workshop slides, Hack Day slides",,assets/img/blog/single/image.jpg

direct_webapp/settings/settings.py

@@ -130,7 +130,7 @@
 MIDDLEWARE.insert(1, "whitenoise.middleware.WhiteNoiseMiddleware")
 STATIC_ROOT = BASE_DIR / "staticfiles"
 AUTH_USER_MODEL = "main.User"
-LOGIN_REDIRECT_URL = "/profile"
+LOGIN_REDIRECT_URL = "/account/overview"
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 SITE_TITLE = "DIRECT Framework"
 

main/forms.py

@@ -3,7 +3,7 @@
 from typing import TYPE_CHECKING, Any
 
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import HTML, Div, Field, Layout, Submit
+from crispy_forms.layout import HTML, Div, Layout, Submit
 from django import forms
 from django.forms import ModelForm
 
@@ -83,6 +83,7 @@ def __init__(self, *args: Any, user: "UserType", **kwargs: Any) -> None:
                 required=False,
                 initial=initial_value,
                 label="Skill Level",
+                widget=forms.Select(attrs={"class": "form-select form-select-sm"}),
             )
 
         # Set up crispy forms helper
@@ -95,39 +96,71 @@ def __init__(self, *args: Any, user: "UserType", **kwargs: Any) -> None:
         for parent_category, subcategories in skill_organization.items():
             # Add parent category heading
             parent_heading = (
-                f'<h3 class="h3 text-primary border-bottom">{parent_category}</h3>'
+                f'<h2 class="card-title text-primary mt-5">{parent_category}</h2>'
             )
             parent_div = Div(HTML(parent_heading), css_class="mb-5")
 
             subcategory_elements = []
             for subcategory, skills_list in subcategories.items():
                 # Add subcategory heading
                 subcategory_heading = f"<h4>{subcategory}</h4>"
-                subcategory_div = Div(HTML(subcategory_heading), css_class="ms-3 mb-4")
-
-                # Create skills grid
-                grid_classes = "row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 ms-3"
-                skills_grid = Div(css_class=grid_classes)
 
+                # Outer card div
+                subcategory_div = Div(css_class="mt-5 card rounded-1")
+
+                # Card body div with heading and table
+                card_body_div = Div(css_class="card-body")
+
+                # Add subcategory heading inside card body
+                card_body_div.append(HTML(subcategory_heading))
+
+                # Build the table for skills
+                table_html = """
+                <table class="table mt-2">
+                    <thead>
+                        <tr>
+                            <th scope="col">Skill</th>
+                            <th scope="col">Description</th>
+                            <th scope="col">Your Level</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                """
                 for skill in skills_list:
-                    skill_card = Div(
-                        Div(
-                            HTML(f'<h6 class="card-title">{skill.name}</h6>'),
-                            HTML(f'<p class="card-text">{skill.description}</p>'),
-                            css_class="card-body",
-                        ),
-                        Div(
-                            Field(f"skill_{skill.id}"),
-                            css_class="card-footer",
-                        ),
-                        css_class="card h-100 bg-light border-1",
-                    )
-                    skills_grid.append(Div(skill_card, css_class="col"))
+                    table_html += f"""
+                        <tr>
+                            <td class="fw-semibold">{skill.name}</td>
+                            <td>{skill.description}</td>
+                            <td>{{{{ form.skill_{skill.id} }}}}</td>
+                        </tr>
+                    """
+                table_html += """
+                    </tbody>
+                </table>
+                """
+
+                # Append table to card body
+                card_body_div.append(HTML(table_html))
+
+                # Add a submit button for this subcategory
+                subcategory_submit = Div(
+                    Submit(
+                        f"submit_{subcategory.replace(' ', '_')}",
+                        "Save",
+                        css_class="btn btn-primary mt-3",
+                    ),
+                    css_class="mt-3",
+                )
+                card_body_div.append(subcategory_submit)
 
-                subcategory_div.append(skills_grid)
+                # Append card body to the card
+                subcategory_div.append(card_body_div)
+
+                # Add the subcategory div to elements
                 subcategory_elements.append(subcategory_div)
 
             parent_div.extend(subcategory_elements)
+
             layout_elements.append(parent_div)
 
         # Add submit button

main/static/assets/css/theme.css

@@ -1,4 +1,4 @@
-{% extends "main/base_auth.html" %}
+{% extends "main/base.auth.html" %}
 {% block content %}
     <h2>Oops!</h2>
     <p>User Registration is not currently enabled</p>

main/static/assets/css/theme.css.map

@@ -1,4 +1,4 @@
-{% extends "main/base_auth.html" %}
+{% extends "main/base.auth.html" %}
 {% block content %}
     {% if user.is_authenticated %}
         <h2>Success!</h2>

main/static/assets/css/theme.min.css

@@ -1,4 +1,4 @@
-{% extends "main/base_auth.html" %}
+{% extends "main/base.auth.html" %}
 {% load crispy_forms_tags %}
 {% block content %}
     <h2>Register your account</h2>