Skip to content

Commit 2dbf2db

Browse files
AfaqShuaib09AfaqShuaib09
committed
style: add bootstrap styling to tagging app
1 parent 84d41b9 commit 2dbf2db

19 files changed

+283
-140
lines changed

‎course_discovery/apps/tagging/context_processors.py

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
from django.conf import settings
2+
3+
4+
def tagging(request):
5+
"""
6+
Add some constants to the context.
7+
"""
8+
return {
9+
'HEADER_LOGO_URL': settings.HEADER_LOGO_URL,
10+
}

‎course_discovery/apps/tagging/management/commands/tests/test_update_course_verticals.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ def setUp(self):
3535
def build_csv(self, rows):
3636
csv_file_content = "course,vertical,subvertical\n"
3737
for row in rows:
38-
row_content = f"{row["course"]},{row["vertical"]},{row["subvertical"]}\n"
38+
row_content = f'{row["course"]},{row["vertical"]},{row["subvertical"]}\n'
3939
csv_file_content += row_content
4040

4141
csv_file = SimpleUploadedFile(

‎course_discovery/apps/tagging/mixins.py

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
from django.conf import settings
2-
from django.contrib.auth.mixins import LoginRequiredMixin
3-
from django.core.exceptions import PermissionDenied
2+
from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
43

54

6-
class VerticalTaggingAdministratorPermissionRequiredMixin(LoginRequiredMixin):
5+
class VerticalTaggingAdministratorPermissionRequiredMixin(
6+
LoginRequiredMixin, UserPassesTestMixin
7+
):
78
"""
89
A mixin to enforce permission on VERTICALS_MANAGEMENT_GROUPS for class-based views.
910
"""
1011

11-
def dispatch(self, request, *args, **kwargs):
12-
response = super().dispatch(request, *args, **kwargs)
13-
if response.status_code == 403:
14-
return response
15-
16-
in_vertical_management_group = request.user.groups.filter(
12+
def test_func(self):
13+
"""
14+
Check if the user is in the VERTICALS_MANAGEMENT_GROUPS group or is a superuser.
15+
"""
16+
return self.request.user.is_superuser or self.request.user.groups.filter(
1717
name__in=settings.VERTICALS_MANAGEMENT_GROUPS
1818
).exists()
19-
20-
if not request.user.is_superuser and not in_vertical_management_group:
21-
raise PermissionDenied("You do not have permission to access this page.")
22-
23-
return response

‎course_discovery/apps/tagging/templates/partials/course_table.html

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -74,36 +74,43 @@
7474
</table>
7575

7676
{% if is_paginated %}
77-
<nav>
78-
<ul class="pagination">
79-
{% if page_obj.has_previous %}
80-
<li class="page-item">
81-
<a class="page-link" href="?page={{ page_obj.previous_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
82-
hx-get="?page={{ page_obj.previous_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
83-
hx-target="#course-table">
84-
&laquo;
85-
</a>
86-
</li>
87-
{% endif %}
88-
{% for page_num in paginator.page_range %}
89-
<li class="page-item {% if page_obj.number == page_num %}active{% endif %}">
90-
<a class="page-link" href="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
91-
hx-get="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
92-
hx-target="#course-table">
93-
{{ page_num }}
94-
</a>
95-
</li>
96-
{% endfor %}
97-
{% if page_obj.has_next %}
98-
<li class="page-item">
99-
<a class="page-link" href="?page={{ page_obj.next_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
100-
hx-get="?page={{ page_obj.next_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
101-
hx-target="#course-table">
102-
&raquo;
103-
</a>
104-
</li>
105-
{% endif %}
106-
</ul>
107-
</nav>
108-
{% endif %}
77+
<nav>
78+
<ul class="pagination">
79+
{% if page_obj.has_previous %}
80+
<li class="page-item">
81+
<a class="page-link" href="?page={{ page_obj.previous_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
82+
hx-get="?page={{ page_obj.previous_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
83+
hx-target="#course-table">
84+
&laquo;
85+
</a>
86+
</li>
87+
{% endif %}
88+
89+
{% for page_num in elided_page_range %}
90+
{% if page_num == "..." %}
91+
<li class="page-item disabled">
92+
<span class="page-link">...</span>
93+
</li>
94+
{% else %}
95+
<li class="page-item {% if page_obj.number == page_num %}active{% endif %}">
96+
<a class="page-link" href="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
97+
hx-get="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
98+
hx-target="#course-table">
99+
{{ page_num }}
100+
</a>
101+
</li>
102+
{% endif %}
103+
{% endfor %}
109104

105+
{% if page_obj.has_next %}
106+
<li class="page-item">
107+
<a class="page-link" href="?page={{ page_obj.next_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
108+
hx-get="?page={{ page_obj.next_page_number }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
109+
hx-target="#course-table">
110+
&raquo;
111+
</a>
112+
</li>
113+
{% endif %}
114+
</ul>
115+
</nav>
116+
{% endif %}

‎course_discovery/apps/tagging/templates/tagging/base.html

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
{% load static %}
12
<!DOCTYPE html>
23
<html lang="en">
34
<head>
@@ -7,31 +8,48 @@
78
<!-- Bootstrap CSS -->
89
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
910
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
12+
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
1013
<script src="https://unpkg.com/htmx.org"></script>
14+
<link href="{% static 'css/tagging.css' %}" rel="stylesheet">
1115
</head>
1216
<body>
13-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
17+
<header class="site-header mb-3 py-3 border-bottom border-gray-300">
1418
<div class="container">
15-
<a class="navbar-brand" href="{% url 'tagging:course_list' %}">Course Tagging</a>
16-
<div class="collapse navbar-collapse" id="navbarNav">
17-
<ul class="navbar-nav me-auto">
18-
<li class="nav-item">
19-
<a class="nav-link" href="{% url 'tagging:vertical_list' %}">Verticals</a>
20-
</li>
21-
<li class="nav-item">
22-
<a class="nav-link" href="{% url 'tagging:sub_vertical_list' %}">Sub-Verticals</a>
23-
</li>
24-
</ul>
25-
<ul class="navbar-nav mr-10">
26-
{% if user.is_authenticated %}
27-
<li class="nav-item">
28-
<a class="nav-link text-light" href="#">{{ user.username }}</a>
29-
</li>
30-
{% endif %}
31-
</ul>
19+
<div class="d-flex justify-content-between align-items-center">
20+
<div class="d-flex align-items-center">
21+
<a class="navbar-brand" href="{% url 'tagging:course_list' %}">
22+
<img src="{{ HEADER_LOGO_URL }}" alt="header logo" height="30" class="d-inline-block align-middle" />
23+
<span class="fw-bold ml-2 me-3">Course Tagging</span>
24+
</a>
25+
<nav class="navbar navbar-expand-lg">
26+
<div class="collapse navbar-collapse" id="navbarNav">
27+
<ul class="navbar-nav">
28+
<li class="nav-item {% if request.resolver_match.url_name == 'vertical_list' %}active{% endif %}">
29+
<a class="nav-link" href="{% url 'tagging:vertical_list' %}">Verticals</a>
30+
</li>
31+
<li class="nav-item {% if request.path == '/tagging/sub_verticals/' %}active{% endif %}">
32+
<a class="nav-link" href="{% url 'tagging:sub_vertical_list' %}">Sub-Verticals</a>
33+
</li>
34+
</ul>
35+
</div>
36+
</nav>
37+
</div>
38+
39+
<div class="d-flex align-items-center">
40+
<div class="dropdown">
41+
42+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" style="text-decoration: none; color: #454545;">
43+
<i class="bi bi-person-circle fs-4 me-2"></i> <span class="fs-5">{{ user.username }}</span>
44+
</button>
45+
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
46+
<li><a class="dropdown-item" href="{% url 'logout' %}">Sign Out</a></li>
47+
</ul>
48+
</div>
49+
</div>
3250
</div>
3351
</div>
34-
</nav>
52+
</header>
3553

3654
<main class="py-4">
3755
{% block content %}

‎course_discovery/apps/tagging/templates/tagging/course_list.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends "tagging/base.html" %}
22

33
{% block content %}
4-
<div class="container mt-5">
4+
<div class="container mt-4">
55
<h1 class="mb-4">Courses</h1>
66

77
<form method="get" class="mb-4" hx-get="{% url 'tagging:course_list' %}" hx-target="#course-table" hx-trigger="keyup changed delay:500ms from:search">

‎course_discovery/apps/tagging/templates/tagging/course_tagging_detail.html

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
11
{% extends "tagging/base.html" %}
22

33
{% block content %}
4-
<div class="container mt-5">
5-
<h1 class="mb-4">Course: {{ course.title }}</h1>
6-
<h2>Key: {{ course.key }}</h2>
4+
<div class="container">
5+
<div class="my-5">
6+
<div class="card-body">
7+
<div class="d-flex justify-content-between align-items-center">
8+
<h2 class="mb-0">Course: {{ course.title }}</h2>
9+
<h3 class="mb-0">Key: {{ course.key }}</h3>
10+
</div>
11+
</div>
12+
</div>
713

8-
<h3>Assign or Edit Vertical and Sub-Vertical</h3>
9-
<form method="post" action=""
10-
hx-post=""
11-
hx-target="#message-container"
12-
hx-swap="innerHTML">
13-
{% csrf_token %}
14+
<div class="card">
15+
<div class="card-header">
16+
<h3>Assign or Edit Vertical and Sub-Vertical</h3>
17+
</div>
18+
<div class="card-body">
19+
<form method="post" action=""
20+
hx-post=""
21+
hx-target="#message-container"
22+
hx-swap="innerHTML">
23+
{% csrf_token %}
1424

15-
<div class="form-group">
16-
<label for="vertical">Vertical</label>
25+
<div class="form-group mb-3">
26+
<label for="vertical" class="py-2">Vertical</label>
1727
<select name="vertical" id="vertical" class="form-control"
1828
hx-trigger="change"
1929
hx-on="change: filterSubVerticals(event)">
@@ -27,8 +37,8 @@ <h3>Assign or Edit Vertical and Sub-Vertical</h3>
2737
</select>
2838
</div>
2939

30-
<div class="form-group">
31-
<label for="sub_vertical">Sub-Vertical</label>
40+
<div class="form-group mb-3">
41+
<label for="sub_vertical" class="py-2">Sub-Vertical</label>
3242
<select name="sub_vertical" id="sub_vertical" class="form-control">
3343
<option value="">Select Sub-Vertical</option>
3444
{% for sub_vertical in all_sub_verticals %}
@@ -47,12 +57,18 @@ <h3>Assign or Edit Vertical and Sub-Vertical</h3>
4757
</select>
4858
</div>
4959

50-
<button type="submit" class="btn btn-primary">Save</button>
60+
<div class="d-flex justify-content-end">
61+
<div class="me-2">
62+
<a href="{% url 'tagging:course_list' %}" class="btn btn-secondary">Back to Courses</a>
63+
</div>
64+
<button type="submit" class="btn btn-primary">Save</button>
65+
</div>
5166
</form>
5267

5368
<!-- Message container for success/error -->
5469
<div id="message-container" class="mt-3"></div>
5570
</div>
71+
</div>
5672

5773
<script>
5874
function filterSubVerticals(event) {

‎course_discovery/apps/tagging/templates/tagging/sub_vertical_detail.html

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
{% extends "tagging/base.html" %}
22

33
{% block content %}
4-
<div class="container mt-5">
4+
<div class="container mt-4">
55
<h1 class="mb-4">Sub-Vertical: {{ sub_vertical.name }}</h1>
66
<p>Parent Vertical:
77
<a href="{% url 'tagging:vertical_detail' slug=sub_vertical.vertical.slug %}">
88
{{ sub_vertical.vertical.name }}
99
</a>
1010
</p>
11-
<h2>Tagged Courses</h2>
11+
<h3 class="my-4">Tagged Courses</h3>
1212

1313
{% if courses %}
14-
<ul class="list-group">
15-
{% for course in courses %}
16-
<li class="list-group-item">
17-
<a href="{% url 'tagging:course_tagging_detail' uuid=course.uuid %}">
18-
{{ course.title }}
19-
</a>
20-
</li>
21-
{% endfor %}
22-
</ul>
14+
<table class="table table-bordered">
15+
<thead class="table-light">
16+
<tr>
17+
<th>#</th>
18+
<th>Course Title</th>
19+
</tr>
20+
</thead>
21+
<tbody>
22+
{% for course in courses %}
23+
<tr>
24+
<td>{{ forloop.counter }}</td>
25+
<td>
26+
<a href="{% url 'tagging:course_tagging_detail' uuid=course.uuid %}">
27+
{{ course.title }}
28+
</a>
29+
</td>
30+
</tr>
31+
{% endfor %}
32+
</tbody>
33+
</table>
2334
{% else %}
2435
<p class="text-muted">No courses assigned to this sub-vertical.</p>
2536
{% endif %}

‎course_discovery/apps/tagging/templates/tagging/sub_vertical_list.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
{% extends "tagging/base.html" %}
22

33
{% block content %}
4-
<div class="container mt-5">
5-
<h1>Sub-Vertical List</h1>
6-
<table class="table table-striped">
4+
<div class="container my-4">
5+
<h1 class="my-3">Sub-Verticals</h1>
6+
<table class="table table-bordered">
7+
<thead class="table-dark">
78
<thead>
89
<tr>
10+
<th>#</th>
911
<th>
1012
<a href="?sort=name&direction={% if current_sort == 'name' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
1113
Sub-Vertical
@@ -21,6 +23,7 @@ <h1>Sub-Vertical List</h1>
2123
<tbody>
2224
{% for sub_vertical in sub_verticals %}
2325
<tr>
26+
<td>{{ forloop.counter }}</td>
2427
<td>
2528
<a href="{% url 'tagging:sub_vertical_detail' slug=sub_vertical.slug %}">
2629
{{ sub_vertical.name }}

0 commit comments

Comments
 (0)