Skip to content

ui-fixes #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
s-sajid-ali merged 5 commits into from
Jun 9, 2026
Merged

ui-fixes #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
15725e3
Fix navbar toggler a11y and remove duplicate logout button
s-sajid-ali Jun 8, 2026
4294a2c
Add role="button" to all navbar dropdown toggle anchors
s-sajid-ali Jun 8, 2026
c09a6e9
more items from bootstrap5
s-sajid-ali Jun 8, 2026
7f52895
always build frontend assets
s-sajid-ali Jun 9, 2026
cf18500
everyting from bootstrap5
s-sajid-ali Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion coldfront/static/bundles/coldfront.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions coldfront/static/bundles/coldfront.js
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion coldfront/static/src/bs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Popover, Tooltip } from 'bootstrap';
import { getElementsByQueryGenerator } from './util';

function buildNativeHelpText(element: HTMLElement): string | null {
Expand All @@ -13,7 +14,7 @@ function buildNativeHelpText(element: HTMLElement): string | null {

export function initBootstrap(): void {
for (const element of getElementsByQueryGenerator(
'[data-bs-toggle="tooltip"], [data-bs-toggle="popover"]'
'[data-bs-toggle="tooltip"]'
)) {
const helpText = buildNativeHelpText(element);
if (!helpText) {
Expand All @@ -22,5 +23,19 @@ export function initBootstrap(): void {

element.setAttribute('title', helpText);
element.setAttribute('aria-label', helpText);
Tooltip.getOrCreateInstance(element);
}

for (const element of getElementsByQueryGenerator(
'[data-bs-toggle="popover"]'
)) {
const helpText = buildNativeHelpText(element);
if (!helpText) {
continue;
}

element.setAttribute('title', helpText);
element.setAttribute('aria-label', helpText);
Popover.getOrCreateInstance(element);
}
}
4 changes: 2 additions & 2 deletions coldfront/static/src/coldfront.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0-or-later

import './scss/coldfront.scss';
import { Modal } from 'bootstrap';
import * as bootstrap from 'bootstrap';
import 'htmx.org';
import { initDateSelector } from './dateSelector';
import { initSelect2 } from './select2';
Expand All @@ -24,7 +24,7 @@ Object.assign(window, {
},
$: jQuery,
jQuery,
bootstrap: { Modal },
bootstrap,
});

function initDocument(): void {
Expand Down
8 changes: 4 additions & 4 deletions coldfront/static/src/scss/custom/portal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ a {
--bs-table-cell-padding-x: 0.75rem;
}

// BS5 expects .active on .nav-link, but navbar_active_item puts it on .nav-item.
// Active highlight (full-opacity color)
.navbar-nav .nav-item.active > .nav-link {
// Keep active styling working whether .active is placed on the nav item or link.
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
color: #fff;
}
// Navbar links shouldn't get the global hover underline.
Expand Down Expand Up @@ -240,4 +240,4 @@ div.table-responsive > div.dt-container > div.row {
margin-left: 0;
margin-right: 0;
margin-bottom: 0.5rem;
}
}
92 changes: 46 additions & 46 deletions coldfront/templates/common/authorized_navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,52 @@
{% load common_tags %}

<nav class="navbar navbar-expand-md navbar-dark bg-nyu-primary-violet">
<div class="container">
<a class="navbar-brand d-block d-sm-none text-primary" href="#">ColdFront</a>
<div class="container">
<a class="navbar-brand d-block d-sm-none text-primary" href="#">ColdFront</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-main">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-collapse collapse" id="navbar-main">
<ul class="navbar-nav">
<li id="navbar-home" class="nav-item">
<a class="nav-link {% navbar_active_item 'home' request %}" href="/">Home</a>
</li>
<li id="navbar-center-summary" class="nav-item">
<a class="nav-link {% navbar_active_item 'center-summary' request %}" href="{% url 'center-summary' %}">Center Summary</a>
</li>
<li id="navbar-project-menu" class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% navbar_active_item 'project' request %}" href="#" data-bs-toggle="dropdown">Project</a>
<div class="dropdown-menu">
<a id="navbar-project" class="dropdown-item" href="{% url 'project-list' %}">Projects</a>
<a id="navbar-allocation" class="dropdown-item" href="{% url 'allocation-list' %}">Allocations</a>
<a id="navbar-resource" class="dropdown-item" href="{% url 'resource-list' %}">Resources</a>
{% if settings.ALLOCATION_ACCOUNT_ENABLED %}
<a class="dropdown-item" href="{% url 'allocation-account-list' %}">Allocation Accounts</a>
{% endif %}
{% if request.user.userprofile.is_pi %}
<a id="navbar-user-allocation" class="dropdown-item" href="{% url 'user-list-allocations' %}">User Allocations</a>
{% endif %}
</div>
</li>
{% if request.user.is_superuser %}
{% include 'common/navbar_admin.html' %}
{% elif request.user.is_staff %}
{% include 'common/navbar_nonadmin_staff.html' %}
{% elif perms.project.can_review_pending_project_reviews or perms.grant.can_view_all_grants %}
{% include 'common/navbar_director.html' %}
{% endif %}
{% if request.user.is_superuser or perms.allocation.can_manage_invoice %}
{% include 'common/navbar_invoice.html' %}
{% endif %}
{% if settings.CENTER_HELP_URL %}
{% include 'common/navbar_help.html' %}
{% endif %}
</ul>
<ul class="navbar-nav ms-auto">
{% include 'common/navbar_login.html' %}
</ul>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="navbar-nav">
<li id="navbar-home" class="nav-item">
<a class="nav-link {% navbar_active_item 'home' request %}" href="/">Home</a>
</li>
<li id="navbar-center-summary" class="nav-item">
<a class="nav-link {% navbar_active_item 'center-summary' request %}" href="{% url 'center-summary' %}">Center Summary</a>
</li>
<li id="navbar-project-menu" class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% navbar_active_item 'project' request %}" href="#" role="button" data-bs-toggle="dropdown">Project</a>
<div class="dropdown-menu">
<a id="navbar-project" class="dropdown-item" href="{% url 'project-list' %}">Projects</a>
<a id="navbar-allocation" class="dropdown-item" href="{% url 'allocation-list' %}">Allocations</a>
<a id="navbar-resource" class="dropdown-item" href="{% url 'resource-list' %}">Resources</a>
{% if settings.ALLOCATION_ACCOUNT_ENABLED %}
<a class="dropdown-item" href="{% url 'allocation-account-list' %}">Allocation Accounts</a>
{% endif %}
{% if request.user.userprofile.is_pi %}
<a id="navbar-user-allocation" class="dropdown-item" href="{% url 'user-list-allocations' %}">User Allocations</a>
{% endif %}
</div>
</li>
{% if request.user.is_superuser %}
{% include 'common/navbar_admin.html' %}
{% elif request.user.is_staff %}
{% include 'common/navbar_nonadmin_staff.html' %}
{% elif perms.project.can_review_pending_project_reviews or perms.grant.can_view_all_grants %}
{% include 'common/navbar_director.html' %}
{% endif %}
{% if request.user.is_superuser or perms.allocation.can_manage_invoice %}
{% include 'common/navbar_invoice.html' %}
{% endif %}
{% if settings.CENTER_HELP_URL %}
{% include 'common/navbar_help.html' %}
{% endif %}
</ul>
<ul class="navbar-nav ms-auto">
{% include 'common/navbar_login.html' %}
</ul>
</div>
</div>
</nav>
2 changes: 1 addition & 1 deletion coldfront/templates/common/navbar_admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load common_tags %}

<li id="navbar-admin" class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% navbar_active_item 'admin' request %}" href="#" data-bs-toggle="dropdown">Admin</a>
<a class="nav-link dropdown-toggle {% navbar_active_item 'admin' request %}" href="#" role="button" data-bs-toggle="dropdown">Admin</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/admin">ColdFront Administration</a>
<a id="navbar-user-search" class="dropdown-item" href="{% url 'user-search-home' %}">User Search</a>
Expand Down
2 changes: 1 addition & 1 deletion coldfront/templates/common/navbar_director.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load common_tags %}

<li id="navbar-director" class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% navbar_active_item 'director' request %}" href="#" data-bs-toggle="dropdown">Director</a>
<a class="nav-link dropdown-toggle {% navbar_active_item 'director' request %}" href="#" role="button" data-bs-toggle="dropdown">Director</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{% url 'project-list' %}?show_all_projects=on">All Projects</a>
<a class="dropdown-item" href="{% url 'allocation-list' %}?show_all_allocations=on">All Allocations</a>
Expand Down
2 changes: 1 addition & 1 deletion coldfront/templates/common/navbar_invoice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load common_tags %}

<li id="navbar-invoice" class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% navbar_active_item 'invoice' request %}" href="#" data-bs-toggle="dropdown">Invoice</a>
<a class="nav-link dropdown-toggle {% navbar_active_item 'invoice' request %}" href="#" role="button" data-bs-toggle="dropdown">Invoice</a>
<div class="dropdown-menu">
<a id="navbar-allocation-invoice-list" class="dropdown-item" href="{% url 'allocation-invoice-list' %}">Allocations
Invoice List</a>
Expand Down
11 changes: 2 additions & 9 deletions coldfront/templates/common/navbar_login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
<li id="navbar-user" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
<i class="fas fa-user" aria-hidden="true"></i> {{user.username}}
</a>
<div class="dropdown-menu">
<a id="navbar-user-user-profile" class="dropdown-item" href="{% url 'user-profile' %}"><i class="fas fa-user-circle" aria-hidden="true"></i> User Profile</a>
<button class="dropdown-item" hx-post="{% url 'logout' %}" hx-swap="none"><i class="fas fa-sign-out-alt" aria-hidden="true"></i> Log Out</button>
</div>
</li>
<ul class="navbar-nav ms-auto">
<form class="d-flex flex-wrap align-items-center gap-2">
{% csrf_token %}
<button type="button" class="btn-nyu-primary-violet" hx-post="/user/logout" hx-swap="none"><i class="fas fa-sign-out-alt" aria-hidden="true"></i>
Log Out</button>
</form>
</ul>
</li>
2 changes: 1 addition & 1 deletion coldfront/templates/common/navbar_nonadmin_staff.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
since existing templates use javascript to target it by ID
{% endcomment %}
<li id="navbar-admin" class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% navbar_active_item 'staff' request %}" href="#" data-bs-toggle="dropdown">Staff</a>
<a class="nav-link dropdown-toggle {% navbar_active_item 'staff' request %}" href="#" role="button" data-bs-toggle="dropdown">Staff</a>
<div class="dropdown-menu">
{# all staff can perform a user search #}
<a id="navbar-user-search" class="dropdown-item" href="{% url 'user-search-home' %}">User Search</a>
Expand Down
5 changes: 1 addition & 4 deletions deploy/local/deploy.fish
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@

# Run this from the project root directory

# ----- Uncomment this when making frontend changes ------
# pushd coldfront/static; and npm run build; and popd
# --------------------------------------------------------

pushd coldfront/static; and npm run build; and popd
uv run manage.py collectstatic --noinput
podman build --tag "coldfront:debugpy" -f Containerfile.debugpy
podman pod rm -f django-caddy-gunicorn
Expand Down
Loading