Skip to content

Commit f4fa5aa

Browse files
davehorsfalldavehorsfall
committed
update assement and skill wheel views
1 parent 2c7f00b commit f4fa5aa

File tree

6 files changed

+197
-95
lines changed

6 files changed

+197
-95
lines changed

‎main/forms.py‎

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
from typing import TYPE_CHECKING, Any
44

55
from crispy_forms.helper import FormHelper
6-
from crispy_forms.layout import HTML, Div, Field, Layout, Submit
6+
from crispy_forms.layout import HTML, Div, Layout, Submit
77
from django import forms
88
from django.forms import ModelForm
99

@@ -83,6 +83,7 @@ def __init__(self, *args: Any, user: "UserType", **kwargs: Any) -> None:
8383
required=False,
8484
initial=initial_value,
8585
label="Skill Level",
86+
widget=forms.Select(attrs={"class": "form-select form-select-sm"}),
8687
)
8788

8889
# Set up crispy forms helper
@@ -95,39 +96,71 @@ def __init__(self, *args: Any, user: "UserType", **kwargs: Any) -> None:
9596
for parent_category, subcategories in skill_organization.items():
9697
# Add parent category heading
9798
parent_heading = (
98-
f'<h3 class="h3 text-primary border-bottom">{parent_category}</h3>'
99+
f'<h2 class="card-title text-primary mt-5">{parent_category}</h2>'
99100
)
100101
parent_div = Div(HTML(parent_heading), css_class="mb-5")
101102

102103
subcategory_elements = []
103104
for subcategory, skills_list in subcategories.items():
104105
# Add subcategory heading
105106
subcategory_heading = f"<h4>{subcategory}</h4>"
106-
subcategory_div = Div(HTML(subcategory_heading), css_class="ms-3 mb-4")
107-
108-
# Create skills grid
109-
grid_classes = "row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 ms-3"
110-
skills_grid = Div(css_class=grid_classes)
111107

108+
# Outer card div
109+
subcategory_div = Div(css_class="mt-5 card rounded-1")
110+
111+
# Card body div with heading and table
112+
card_body_div = Div(css_class="card-body")
113+
114+
# Add subcategory heading inside card body
115+
card_body_div.append(HTML(subcategory_heading))
116+
117+
# Build the table for skills
118+
table_html = """
119+
<table class="table mt-2">
120+
<thead>
121+
<tr>
122+
<th scope="col">Skill</th>
123+
<th scope="col">Description</th>
124+
<th scope="col">Your Level</th>
125+
</tr>
126+
</thead>
127+
<tbody>
128+
"""
112129
for skill in skills_list:
113-
skill_card = Div(
114-
Div(
115-
HTML(f'<h6 class="card-title">{skill.name}</h6>'),
116-
HTML(f'<p class="card-text">{skill.description}</p>'),
117-
css_class="card-body",
118-
),
119-
Div(
120-
Field(f"skill_{skill.id}"),
121-
css_class="card-footer",
122-
),
123-
css_class="card h-100 bg-light border-1",
124-
)
125-
skills_grid.append(Div(skill_card, css_class="col"))
130+
table_html += f"""
131+
<tr>
132+
<td class="fw-semibold">{skill.name}</td>
133+
<td>{skill.description}</td>
134+
<td>{{{{ form.skill_{skill.id} }}}}</td>
135+
</tr>
136+
"""
137+
table_html += """
138+
</tbody>
139+
</table>
140+
"""
141+
142+
# Append table to card body
143+
card_body_div.append(HTML(table_html))
144+
145+
# Add a submit button for this subcategory
146+
subcategory_submit = Div(
147+
Submit(
148+
f"submit_{subcategory.replace(' ', '_')}",
149+
"Save",
150+
css_class="btn btn-primary mt-3",
151+
),
152+
css_class="mt-3",
153+
)
154+
card_body_div.append(subcategory_submit)
126155

127-
subcategory_div.append(skills_grid)
156+
# Append card body to the card
157+
subcategory_div.append(card_body_div)
158+
159+
# Add the subcategory div to elements
128160
subcategory_elements.append(subcategory_div)
129161

130162
parent_div.extend(subcategory_elements)
163+
131164
layout_elements.append(parent_div)
132165

133166
# Add submit button

‎main/templates/main/base.account.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Account
4747
Change Password
4848
</a>
4949
</nav>
50-
<nav class="nav flex-column pb-2 pb-lg-4 mb-1">
50+
<nav class="nav flex-column pb-2 pb-lg-4 mb-3">
5151
<h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Dashboard</h4>
5252
<a class="nav-link fw-semibold py-2 px-0 {% if url_name == 'self-assess' %}active{% endif %}"
5353
href="{% url 'self-assess' %}">
@@ -61,7 +61,7 @@ <h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Dashboa
6161
</a>
6262
</nav>
6363
{% endwith %}
64-
<nav class="nav flex-column">
64+
<nav class="nav flex-column pb-2 pb-lg-4 mb-3">
6565
<form method="post" action="{% url 'logout' %}">
6666
{% csrf_token %}
6767
<button type="submit" class="btn btn-link nav-link fw-semibold py-0 px-2">Sign out</button>

‎main/templates/main/pages/competencies.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
{% with cat_id=forloop.counter %}
6464
<section class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4 mb-4">
6565
<div class="card-body">
66-
<h2 id="header-{{ cat_id }}" class="card-title">{{ category.title }}</h2>
66+
<h2 id="header-{{ cat_id }}" class="card-title text-primary">{{ category.title }}</h2>
6767
<p class="card-text">{{ category.description }}</p>
6868
<p class="card-text">
6969
<span class="badge bg-secondary me-1">{{ category.competency_count }} Competencies</span>

‎main/templates/main/self-assess.html‎

Lines changed: 43 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,96 +2,77 @@
22
{% block body_class %}
33
bg-secondary
44
{% endblock body_class %}
5+
{% load static %}
56
{% load crispy_forms_tags %}
7+
{% block title %}
8+
Digital Research Competencies Framework
9+
{% endblock title %}
610
{% block content %}
711
<!-- Page container -->
812
<div class="container py-5 mt-4 mt-lg-5 mb-lg-4 my-xl-5">
13+
<nav aria-label="breadcrumb">
14+
<ol class="pt-lg-3 pb-lg-4 pb-2 breadcrumb">
15+
<li class="breadcrumb-item">
16+
<a href="{% url 'index' %}">Home</a>
17+
</li>
18+
<li class="breadcrumb-item">
19+
<a href="{% url 'privacy' %}">Framework</a>
20+
</li>
21+
<li class="breadcrumb-item active" aria-current="page">Competencies</li>
22+
</ol>
23+
</nav>
924
<div class="row pt-sm-2 pt-lg-0">
1025
<!-- Sidebar (offcanvas on screens < 992px) -->
11-
<aside class="col-lg-3 pe-lg-4 pe-xl-5 mt-n3">
12-
<div class="position-lg-sticky top-0">
13-
<div class="d-none d-lg-block" style="padding-top: 80px;"></div>
26+
<aside class="col-lg-3">
27+
<div class="position-lg-sticky competencies-sticky">
1428
<div class="offcanvas-lg offcanvas-start" id="sidebarAccount">
1529
<button class="btn-close position-absolute top-0 end-0 mt-3 me-3 d-lg-none"
1630
type="button"
1731
data-bs-dismiss="offcanvas"
1832
data-bs-target="#sidebarAccount"
1933
aria-label="Close"></button>
2034
<div class="offcanvas-body">
21-
<div class="pb-2 pb-lg-0 mb-4 mb-lg-5">
35+
<div class="mb-3">
2236
<h3 class="h5 mb-1">{{ request.user.username }}</h3>
2337
<p class="fs-sm text-body-secondary mb-0">{{ request.user.email }}</p>
2438
</div>
2539
{% with request.resolver_match.url_name as url_name %}
26-
<nav class="nav flex-column pb-2 pb-lg-4 mb-3">
27-
<h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Account</h4>
28-
<a class="nav-link fw-semibold py-2 px-0 {% if url_name == 'account-overview' %}active{% endif %}"
29-
href="{% url 'account-overview' %}">
30-
<i class="ai-user-check fs-5 opacity-60 me-2"></i>
31-
Overview
40+
<div class="d-flex gap-2 mb-4">
41+
<a href="{% url 'self-assess' %}"
42+
class="btn {% if url_name == 'self-assess' %}btn-primary{% else %}btn-secondary{% endif %}">
43+
Assessment
3244
</a>
33-
<a class="nav-link fw-semibold py-2 px-0 {% if url_name == 'profile' %}active{% endif %}"
34-
href="{% url 'profile' %}">
35-
<i class="ai-settings fs-5 opacity-60 me-2"></i>
36-
Update Profile
45+
<a href="{% url 'skill_profile' %}"
46+
class="btn {% if url_name == 'skill_profile' %}btn-primary{% else %}btn-secondary{% endif %}">
47+
Skills Wheel
3748
</a>
38-
<a class="nav-link fw-semibold py-2 px-0 disabled {% if url_name == 'change-password' %}active{% endif %}"
39-
href="{% url 'account-overview' %}">
40-
<i class="ai-wallet fs-5 opacity-60 me-2"></i>
41-
Change Password
42-
</a>
43-
</nav>
44-
<nav class="nav flex-column pb-2 pb-lg-4 mb-1">
45-
<h4 class="fs-xs fw-medium text-body-secondary text-uppercase pb-1 mb-2">Dashboard</h4>
46-
<a class="nav-link fw-semibold py-2 px-0 {% if url_name == 'self-assess' %}active{% endif %}"
47-
href="{% url 'self-assess' %}">
48-
<i class="ai-cart fs-5 opacity-60 me-2"></i>
49-
Assess Skills
50-
</a>
51-
<a class="nav-link fw-semibold py-2 px-0 {% if url_name == 'skill_profile' %}active{% endif %}"
52-
href="{% url 'skill_profile' %}">
53-
<i class="ai-activity fs-5 opacity-60 me-2"></i>
54-
View Skills
55-
</a>
56-
</nav>
49+
</div>
5750
{% endwith %}
58-
<nav class="nav flex-column">
59-
<form method="post" action="{% url 'logout' %}">
60-
{% csrf_token %}
61-
<button type="submit" class="btn btn-link nav-link fw-semibold py-0 px-2">Sign out</button>
62-
</form>
63-
</nav>
6451
</div>
6552
</div>
6653
</div>
6754
</aside>
6855
<!-- Page content -->
69-
<div class="col-lg-9 pt-4 pb-2 pb-sm-4">
56+
<div class="col-lg-9 pb-2 pb-sm-4">
7057
<section class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4 mb-4">
7158
<div class="card-body">
72-
<section class="container pt-5 mt-5">
73-
<div class="row">
74-
<div class="col-md-12">
75-
<h1>Self Assessment Questionnaire</h1>
76-
<p class="lead">
77-
Please assess your skill level for each competency below.
78-
You can leave skills blank if they are not applicable to you.
79-
</p>
80-
{% if messages %}
81-
{% for message in messages %}
82-
<div class="alert alert-success alert-dismissible fade show" role="alert">
83-
{{ message }}
84-
<button type="button"
85-
class="btn-close"
86-
data-bs-dismiss="alert"
87-
aria-label="Close"></button>
88-
</div>
89-
{% endfor %}
90-
{% endif %}
91-
{% crispy form %}
59+
<h1>Self Assessment Questionnaire</h1>
60+
<p class="lead">
61+
Please assess your skill level for each competency below.
62+
You can leave skills blank if they are not applicable to you.
63+
</p>
64+
{% if messages %}
65+
{% for message in messages %}
66+
<div class="alert alert-success alert-dismissible fade show" role="alert">
67+
{{ message }}
68+
<button type="button"
69+
class="btn-close"
70+
data-bs-dismiss="alert"
71+
aria-label="Close"></button>
9272
</div>
93-
</div>
94-
</section>
73+
{% endfor %}
74+
{% endif %}
75+
{% crispy form %}
9576
</div>
9677
</section>
9778
</div>

‎main/templates/main/user_skill_profile.html‎

Lines changed: 81 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,74 @@
1-
{% extends "main/base.account.html" %}
1+
{% extends "main/base.html" %}
2+
{% block body_class %}
3+
bg-secondary
4+
{% endblock body_class %}
25
{% load static %}
6+
{% load crispy_forms_tags %}
37
{% load django_bootstrap5 %}
48
{% block title %}
59
Digital Research Competencies Framework
610
{% endblock title %}
711
{% block content %}
8-
<!-- Features grid -->
9-
<section class="container-fluid pt-5 mt-lg-3 mt-xl-4 mt-xxl-5">
10-
<div class="bg-body rounded-5 d-flex justify-content-center align-items-center"
11-
id="dataviz_root"
12-
style="width:100%"></div>
13-
</section>
14-
<script>
12+
<!-- Page container -->
13+
<div class="container py-5 mt-4 mt-lg-5 mb-lg-4 my-xl-5">
14+
<nav aria-label="breadcrumb">
15+
<ol class="pt-lg-3 pb-lg-4 pb-2 breadcrumb">
16+
<li class="breadcrumb-item">
17+
<a href="{% url 'index' %}">Home</a>
18+
</li>
19+
<li class="breadcrumb-item">
20+
<a href="{% url 'privacy' %}">Framework</a>
21+
</li>
22+
<li class="breadcrumb-item active" aria-current="page">Competencies</li>
23+
</ol>
24+
</nav>
25+
<div class="row pt-sm-2 pt-lg-0">
26+
<!-- Sidebar (offcanvas on screens < 992px) -->
27+
<aside class="col-lg-3">
28+
<div class="position-lg-sticky competencies-sticky">
29+
<div class="offcanvas-lg offcanvas-start" id="sidebarAccount">
30+
<button class="btn-close position-absolute top-0 end-0 mt-3 me-3 d-lg-none"
31+
type="button"
32+
data-bs-dismiss="offcanvas"
33+
data-bs-target="#sidebarAccount"
34+
aria-label="Close"></button>
35+
<div class="offcanvas-body">
36+
<div class="mb-3">
37+
<h3 class="h5 mb-1">{{ request.user.username }}</h3>
38+
<p class="fs-sm text-body-secondary mb-0">{{ request.user.email }}</p>
39+
</div>
40+
{% with request.resolver_match.url_name as url_name %}
41+
<div class="d-flex gap-2 mb-4">
42+
<a href="{% url 'self-assess' %}"
43+
class="btn btn-primary {% if url_name == 'self-assess' %}active{% endif %}">
44+
Assessment
45+
</a>
46+
<a href="{% url 'skill_profile' %}"
47+
class="btn btn-secondary {% if url_name == 'skill_profile' %}active{% endif %}">
48+
Skills Wheel
49+
</a>
50+
</div>
51+
{% endwith %}
52+
</div>
53+
</div>
54+
</div>
55+
</aside>
56+
<!-- Page content -->
57+
<div class="col-lg-9 pb-2 pb-sm-4">
58+
<section class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4 mb-4">
59+
<div class="card-body">
60+
<h1>Skills Wheel Visualisation</h1>
61+
<p class="lead">
62+
Explore your skill levels in the Digital Research Competencies Framework
63+
using the interactive Skills Wheel. Each segment represents a competency,
64+
with size according to your self-assessed level.
65+
</p>
66+
<section class="container-fluid pt-5 mt-lg-3 mt-xl-4 mt-xxl-5">
67+
<div class="bg-body rounded-5 d-flex justify-content-center align-items-center"
68+
id="dataviz_root"
69+
style="width:100%"></div>
70+
</section>
71+
<script>
1572
document.addEventListener('DOMContentLoaded', function () {
1673
const datavizRoot = document.getElementById('dataviz_root');
1774
const radialBarChartConfig = {
@@ -47,5 +104,20 @@
47104
});
48105
});
49106

50-
</script>
107+
</script>
108+
</div>
109+
</section>
110+
</div>
111+
</div>
112+
</div>
113+
<!-- Divider for dark mode only -->
114+
<hr class="d-none d-dark-mode-block">
115+
<!-- Sidebar toggle button -->
116+
<button class="d-lg-none btn btn-sm fs-sm btn-primary w-100 rounded-0 fixed-bottom"
117+
type="button"
118+
data-bs-toggle="offcanvas"
119+
data-bs-target="#sidebarAccount">
120+
<i class="ai-menu me-2"></i>
121+
Account menu
122+
</button>
51123
{% endblock content %}

0 commit comments

Comments
 (0)