Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style: UI updates using bootstrap and custom styling
Browse files Browse the repository at this point in the history
@AfaqShuaib09
AfaqShuaib09 committed Jan 29, 2025
1 parent 40a3e56 commit bfe3451
Showing 11 changed files with 173 additions and 50 deletions.
9 changes: 9 additions & 0 deletions course_discovery/apps/tagging/context_processors.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
from django.conf import settings # import the settings file

def tagging(request):
"""
Add some constants to the context.
"""
return {
'LOGO_URL': settings.LOGO_URL,
}
2 changes: 1 addition & 1 deletion course_discovery/apps/tagging/templates/partials/course_table.html
View file
Original file line number Diff line number Diff line change
@@ -87,7 +87,7 @@
{% endif %}
{% for page_num in courses.paginator.page_range %}
<li class="page-item {% if courses.number == page_num %}active{% endif %}">
<a class="page-link" href="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
<a class="page-link {% if courses.number == page_num %}active-link{% endif %}" href="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
hx-get="?page={{ page_num }}&search={{ request.GET.search|default:'' }}&sort={{ current_sort }}&direction={{ current_direction }}"
hx-target="#course-table">
{{ page_num }}
86 changes: 67 additions & 19 deletions course_discovery/apps/tagging/templates/tagging/base.html
View file
Original file line number Diff line number Diff line change
@@ -7,31 +7,79 @@
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://unpkg.com/htmx.org"></script>
</head>
<style>
.site-header .active {
border-bottom: 2px solid #454545;
}
.page-link {
color: #00262b;
transition: color 0.3s ease;
}
.page-link:hover {
color: #00404a;
background: floralwhite !important;
}
.active > .page-link,
.page-link.active {
border-color: #00262b;
}
.active-link {
background-color: #00404a !important;
}
.btn-primary {
background-color: #00262b !important;
transition: background-color 0.3s ease;
border: 1px solid #00262b;
}
.btn-primary:hover {
background-color: #00404a !important;
border: 1px solid #00404a;
}
a {
color: #00404a;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<header class="site-header mb-3 py-3 border-bottom border-gray-300">
<div class="container">
<a class="navbar-brand" href="{% url 'tagging:course_list' %}">Course Tagging</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'tagging:vertical_list' %}">Verticals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'tagging:sub_vertical_list' %}">Sub-Verticals</a>
</li>
</ul>
<ul class="navbar-nav mr-10">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link text-light" href="#">{{ user.username }}</a>
</li>
{% endif %}
</ul>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<a class="navbar-brand" href="{% url 'tagging:course_list' %}">
<img src="{{ LOGO_URL }}" alt="edX logo" height="30" class="d-inline-block align-middle" />
<span class="fw-bold ml-2 me-3">Course Tagging</span>
</a>
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item {% if request.path == '/tagging/verticals/' %}active{% endif %}">
<a class="nav-link" href="{% url 'tagging:vertical_list' %}">Verticals</a>
</li>
<li class="nav-item {% if request.path == '/tagging/sub_verticals/' %}active{% endif %}">
<a class="nav-link" href="{% url 'tagging:sub_vertical_list' %}">Sub-Verticals</a>
</li>
</ul>
</div>
</nav>
</div>

<div class="d-flex align-items-center">
<div class="dropdown">

<button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" style="text-decoration: none; color: #454545;">
<i class="bi bi-person-circle fs-4 me-2"></i> <span class="fs-5">{{ user.username }}</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="{% url 'logout' %}">Sign Out</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>

<main class="py-4">
{% block content %}
2 changes: 1 addition & 1 deletion course_discovery/apps/tagging/templates/tagging/course_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "tagging/base.html" %}

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

<form method="get" class="mb-4" hx-get="{% url 'tagging:course_list' %}" hx-target="#course-table" hx-trigger="keyup changed delay:500ms from:search">
44 changes: 30 additions & 14 deletions course_discovery/apps/tagging/templates/tagging/course_tagging_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
{% extends "tagging/base.html" %}

{% block content %}
<div class="container mt-5">
<h1 class="mb-4">Course: {{ course.title }}</h1>
<h2>Key: {{ course.key }}</h2>
<div class="container">
<div class="my-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<h2 class="mb-0">Course: {{ course.title }}</h2>
<h3 class="mb-0">Key: {{ course.key }}</h3>
</div>
</div>
</div>

<h3>Assign or Edit Vertical and Sub-Vertical</h3>
<form method="post" action=""
hx-post=""
hx-target="#message-container"
hx-swap="innerHTML">
{% csrf_token %}
<div class="card">
<div class="card-header">
<h3>Assign or Edit Vertical and Sub-Vertical</h3>
</div>
<div class="card-body">
<form method="post" action=""
hx-post=""
hx-target="#message-container"
hx-swap="innerHTML">
{% csrf_token %}

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

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

<button type="submit" class="btn btn-primary">Save</button>
<div class="d-flex justify-content-end">
<div class="me-2">
<a href="{% url 'tagging:course_list' %}" class="btn btn-secondary">Back to Courses</a>
</div>
<button type="submit" class="btn btn-primary edx-button">Save</button>
</div>
</form>

<!-- Message container for success/error -->
<div id="message-container" class="mt-3"></div>
</div>
</div>

<script>
function filterSubVerticals(event) {
4 changes: 2 additions & 2 deletions course_discovery/apps/tagging/templates/tagging/sub_vertical_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{% extends "tagging/base.html" %}

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

{% if courses %}
<ul class="list-group">
9 changes: 6 additions & 3 deletions course_discovery/apps/tagging/templates/tagging/sub_vertical_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{% extends "tagging/base.html" %}

{% block content %}
<div class="container mt-5">
<h1>Sub-Vertical List</h1>
<table class="table table-striped">
<div class="container my-4">
<h1 class="my-3">Sub-Vertical List</h1>
<table class="table table-bordered">
<thead class="table-dark">
<thead>
<tr>
<th>#</th>
<th>
<a href="?sort=name&direction={% if current_sort == 'name' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
Sub-Vertical
@@ -21,6 +23,7 @@ <h1>Sub-Vertical List</h1>
<tbody>
{% for sub_vertical in sub_verticals %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
<a href="{% url 'tagging:sub_vertical_detail' slug=sub_vertical.slug %}">
{{ sub_vertical.name }}
56 changes: 50 additions & 6 deletions course_discovery/apps/tagging/templates/tagging/vertical_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,54 @@
{% extends "tagging/base.html" %}

{% block content %}
<div class="container mt-5">
<div class="container mt-4">
<h1 class="mb-4">Vertical: {{ vertical.name }}</h1>
<h2>Sub-Verticals</h2>
<ul class="list-group mb-4">
<h3 class="my-4">Sub-Verticals</h3>
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Sub-Vertical Name</th>
<th>Courses</th>
</tr>
</thead>
<tbody>
{% for sub_vertical in vertical.sub_verticals.all %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
<a href="{% url 'tagging:sub_vertical_detail' slug=sub_vertical.slug %}">
{{ sub_vertical.name }}
</a>
</td>
<td>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse{{ forloop.counter }}" aria-expanded="false">
View Courses
</button>
<div class="collapse mt-2" id="collapse{{ forloop.counter }}">
<ol class="list-group ps-3">
{% for course_vertical in sub_vertical.coursevertical_sub_verticals.all %}
<li class="list-group-item">
<a href="{% url 'tagging:course_tagging_detail' uuid=course_vertical.course.uuid %}">
{{ course_vertical.course.title }}
</a>
</li>
{% empty %}
<li class="list-group-item text-muted">No courses available</li>
{% endfor %}
</ol>
</div>
</td>
</tr>
{% empty %}
<tr>
<td colspan="3" class="text-center text-muted">No sub-verticals assigned.</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- <ul class="list-group mb-4">
{% for sub_vertical in vertical.sub_verticals.all %}
<li class="list-group-item">
<a href="{% url 'tagging:sub_vertical_detail' slug=sub_vertical.slug %}">
@@ -14,9 +58,9 @@ <h2>Sub-Verticals</h2>
{% empty %}
<li class="list-group-item text-muted">No sub-verticals assigned.</li>
{% endfor %}
</ul>
</ul> -->

<h2>Tagged Courses</h2>
<!-- <h2>Tagged Courses</h2>
<ul class="list-group">
{% for course in courses %}
<li class="list-group-item">
@@ -27,6 +71,6 @@ <h2>Tagged Courses</h2>
{% empty %}
<li class="list-group-item text-muted">No courses assigned to this vertical.</li>
{% endfor %}
</ul>
</ul> -->
</div>
{% endblock %}
6 changes: 4 additions & 2 deletions course_discovery/apps/tagging/templates/tagging/vertical_list.html
View file
Original file line number Diff line number Diff line change
@@ -3,9 +3,10 @@
{% block content %}
<div class="container mt-5">
<h1>Verticals List</h1>
<table class="table table-striped">
<thead>
<table class="table table-bordered">
<thead class="table-light">
<tr>
<th>#</th>
<th>
<a href="?sort=name&direction={% if current_sort == 'name' and current_direction == 'asc' %}desc{% else %}asc{% endif %}">
Vertical Name
@@ -20,6 +21,7 @@ <h1>Verticals List</h1>
<tbody>
{% for vertical in verticals %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
<a href="{% url 'tagging:vertical_detail' slug=vertical.slug %}">
{{ vertical.name }}
2 changes: 1 addition & 1 deletion course_discovery/apps/tagging/views.py
View file
Original file line number Diff line number Diff line change
@@ -57,7 +57,7 @@ class CourseListView(VerticalTaggingAdministratorPermissionRequiredMixin, ListVi
model = Course
template_name = "tagging/course_list.html"
context_object_name = "courses"
paginate_by = 2
paginate_by = 20

def get_queryset(self):
search_query = self.request.GET.get('search', '').strip()
3 changes: 2 additions & 1 deletion course_discovery/settings/base.py
View file
Original file line number Diff line number Diff line change
@@ -257,6 +257,7 @@
'django.template.context_processors.tz',
'django.template.context_processors.request',
'django.contrib.messages.context_processors.messages',
'course_discovery.apps.tagging.context_processors.tagging',
'course_discovery.apps.core.context_processors.core',
),
'debug': True, # Django will only display debug pages if the global DEBUG setting is set to True.
@@ -265,7 +266,6 @@
]
# END TEMPLATE CONFIGURATION


# COOKIE CONFIGURATION
# The purpose of customizing the cookie names is to avoid conflicts when
# multiple Django services are running behind the same hostname.
@@ -808,3 +808,4 @@
VERTICALS_MANAGEMENT_GROUPS = []

COURSE_VERTICALS_UPDATE_RECIPIENTS = ['user@domain.org']
LOGO_URL='https://edx-cdn.org/v3/default/logo.svg'

0 comments on commit bfe3451

Please sign in to comment.