Skip to content

Commit 55356f8

Browse files
Travis GilbertTravis Gilbert
Travis Gilbert
authored and
Travis Gilbert
committed
fix(admin): add GCLBA sidebar branding and table zebra striping
Override SmartBase's navigation.html to replace the default logo with the GCLBA diamond icon + "Genesee County Land Bank Authority" text at 18px bold. Add #F0F4F8 alternating row backgrounds to the dashboard Recent Submissions table for readability.
1 parent 810e771 commit 55356f8

2 files changed

Lines changed: 168 additions & 2 deletions

File tree

‎static/sb_admin/css/gclba_theme.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,10 @@ a.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
128128
.dash-table td { padding: 8px 12px 8px 0; font-size: 14px;
129129
color: var(--color-dark-700, #374151); }
130130
.dash-table tbody tr { border-bottom: 1px solid var(--color-border-light, #f3f4f6); }
131-
.dash-table tbody tr:hover { background: var(--color-bg-hover, rgba(0,0,0,.02)); }
132-
[data-theme="dark"] .dash-table tbody tr:hover { background: rgba(255,255,255,.03); }
131+
.dash-table tbody tr:nth-child(even) { background: #F0F4F8; }
132+
.dash-table tbody tr:hover { background: #e4ecf3; }
133+
[data-theme="dark"] .dash-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
134+
[data-theme="dark"] .dash-table tbody tr:hover { background: rgba(255,255,255,.06); }
133135

134136
/* ── Timeline dot ────────────────────────────────────────── */
135137
.timeline-dot { width: 16px; height: 16px; border-radius: 50%;

‎templates/sb_admin/navigation.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
{% load static sb_admin_tags widget_tweaks i18n %}
2+
{% comment %}
3+
GCLBA override of SmartBase navigation.html.
4+
Replaces the default SmartBase logo images with GCLBA text branding.
5+
Everything else is identical to the vendor template.
6+
{% endcomment %}
7+
8+
{% block content %}
9+
{% if not sec_fetch_site or request.META.HTTP_SEC_FETCH_DEST == 'document' %}
10+
{# ── Mobile top bar ──────────────────────────────────────── #}
11+
<header class="flex items-center bg-light border-b border-dark-200 p-12 xl:hidden">
12+
<div class="js-sidebar-toggle mr-12" data-sidebar-target="main-navigation">
13+
<svg class="w-24 h-24">
14+
<use xlink:href="#Hamburger-button"></use>
15+
</svg>
16+
</div>
17+
<a href="/admin/" class="flex items-center gap-8" style="text-decoration:none;">
18+
<img src="{% static 'img/gclba-logo-icon-400.png' %}"
19+
alt="GCLBA" style="height:28px; width:auto;">
20+
<span style="font-size:13px; font-weight:700; color:#2d5f7a; line-height:1.2;">
21+
GCLBA
22+
</span>
23+
</a>
24+
<div class="w-32 h-32 rounded-full leading-none flex-center flex-shrink-0 bg-dark-300 ml-auto">
25+
{{ username_data.initials }}
26+
</div>
27+
</header>
28+
29+
{# ── Sidebar navigation ──────────────────────────────────── #}
30+
<nav class="w-260 xl:fixed top-0 bottom-0 left-0 max-lg:sidebar border-r border-dark-200 overflow-hidden flex flex-col relative bg-dark-50 z-1"
31+
id="main-navigation">
32+
33+
{# Desktop sidebar header — GCLBA branding #}
34+
<header class="px-20 py-20 hidden xl:!block border-b border-dark-200">
35+
<a href="/admin/" style="text-decoration:none; display:block;">
36+
<img src="{% static 'img/gclba-logo-icon-400.png' %}"
37+
alt="GCLBA" style="height:44px; width:auto; margin-bottom:8px;">
38+
<div style="font-size:18px; font-weight:700; color:#2d5f7a; line-height:1.25;">
39+
Genesee County<br>Land Bank Authority
40+
</div>
41+
<div style="font-size:12px; color:#6b7280; margin-top:4px; font-weight:500;">
42+
Sales Admin
43+
</div>
44+
</a>
45+
</header>
46+
47+
{# Mobile sidebar close button #}
48+
<header class="px-16 py-8 flex items-center xl:hidden border-b border-dark-200 bg-light min-h-56">
49+
<div class="js-sidebar-toggle w-24 h-24 flex-center ml-auto" data-sidebar-target="main-navigation">
50+
<svg class="w-20 h-20 flex-shrink-0">
51+
<use xlink:href="#Close"></use>
52+
</svg>
53+
</div>
54+
</header>
55+
56+
{# Menu items #}
57+
<div class="h-full overflow-auto custom-scrollbar max-lg:py-16">
58+
<ul class="-my-2 px-16">
59+
{% for menu_item in request_data.menu_items %}
60+
<li class="py-2">
61+
{% if menu_item.sub_items %}
62+
<div class="menu-item">
63+
<a href="{{ menu_item.get_url|default:menu_item.sub_items.0.get_url }}"
64+
class="inline-flex w-full p-8 justify-start collapse-btn{% if not menu_item.is_active %} collapsed{% endif %}"
65+
aria-expanded="{% if menu_item.is_active %}true{% else %}false{% endif %}"
66+
>
67+
{% if menu_item.get_icon %}
68+
<svg class="w-20 h-20 mr-8 flex-shrink-0">
69+
<use xlink:href="#{{ menu_item.get_icon }}"></use>
70+
</svg>
71+
{% endif %}
72+
<span>{{ menu_item.get_label }}</span>
73+
</a>
74+
<ul id="{{ menu_item.get_id }}" class="collapse -mb-2 mt-2{% if menu_item.is_active %} show{% endif %}">
75+
{% for sub_menu_item in menu_item.sub_items %}
76+
<li class="py-2">
77+
<a href="{{ sub_menu_item.get_url }}"
78+
class="menu-item text-dark-600 leading-20 pl-36 py-8 pr-8{% if sub_menu_item.is_active %} active{% endif %}">
79+
<span>{{ sub_menu_item.get_label }}</span>
80+
</a>
81+
</li>
82+
{% endfor %}
83+
</ul>
84+
</div>
85+
{% else %}
86+
<div class="menu-item{% if menu_item.is_active %} active{% endif %}">
87+
<a href="{{ menu_item.get_url }}" class="inline-flex w-full p-8">
88+
{% if menu_item.get_icon %}
89+
<svg class="w-20 h-20 mr-8 flex-shrink-0">
90+
<use xlink:href="#{{ menu_item.get_icon }}"></use>
91+
</svg>
92+
{% endif %}
93+
<span>{{ menu_item.get_label }}</span>
94+
</a>
95+
</div>
96+
{% endif %}
97+
</li>
98+
{% endfor %}
99+
</ul>
100+
</div>
101+
102+
{# Footer — user profile + logout #}
103+
<footer class="mt-auto border-t border-dark-200">
104+
<div class="relative">
105+
<div class="dropdown-btn flex items-center w-full p-16 cursor-pointer min-h-72"
106+
data-bs-toggle="dropdown"
107+
data-bs-offset="[16,8]"
108+
data-bs-popper-placement="top-start">
109+
<div class="w-32 h-32 rounded-full leading-none flex-center flex-shrink-0 bg-dark-300">
110+
{{ username_data.initials }}
111+
</div>
112+
<div class="ml-8">
113+
<div class="text-14 text-dark-900">{{ username_data.full_name }}</div>
114+
<div class="text-12 leading-16 js-alias-domain-name hidden"></div>
115+
</div>
116+
<svg class="w-16 h-16 ml-auto flex-shrink-0">
117+
<use xlink:href="#Sort Alt"></use>
118+
</svg>
119+
</div>
120+
<div class="dropdown-menu max-h-432">
121+
<form id="logout-form" method="post" action="{% url 'sb_admin:logout' %}" class="hidden">
122+
{% csrf_token %}
123+
</form>
124+
125+
<ul>
126+
<li class="flex items-center p-12 text-dark-900 border-b border-dark-100 cursor-pointer hover:bg-dark-100"
127+
onclick="document.getElementById('logout-form').submit();">
128+
<svg class="w-16 h-16 flex-shrink-0 mr-8">
129+
<use xlink:href="#Logout"></use>
130+
</svg>
131+
{% trans 'Logout' %}
132+
</li>
133+
<li class="flex items-center p-12 text-dark-900 cursor-pointer hover:bg-dark-100" onclick="window.location='{% url "sb_admin:password_change" %}'">
134+
<svg class="w-16 h-16 flex-shrink-0 mr-8">
135+
<use xlink:href="#Lock"></use>
136+
</svg>
137+
{% trans 'Change password' %}
138+
</li>
139+
{% block color_scheme %}
140+
<li class="border-t border-dark-100 pt-8">
141+
<form hx-post="{% url 'sb_admin:color_scheme' %}" hx-trigger="change" hx-swap="none" id="color-schema-form" class="js-color-scheme-picker">
142+
{{ color_scheme_form.color_scheme }}
143+
</form>
144+
</li>
145+
{% endblock %}
146+
{% if request_data.global_filter_instance %}
147+
<li class="border-t border-dark-100 pt-8">
148+
<form hx-post="{% url 'sb_admin:global_filter' %}" hx-trigger="change" hx-swap="none" id="global_filter_form">
149+
{% for field in request_data.global_filter_instance %}
150+
{{ field }}
151+
{{ field.errors }}
152+
{% endfor %}
153+
</form>
154+
</li>
155+
{% endif %}
156+
</ul>
157+
</div>
158+
</div>
159+
160+
</footer>
161+
</nav>
162+
<div class="bg-filter js-sidebar-toggle" data-sidebar-target="main-navigation"></div>
163+
{% endif %}
164+
{% endblock %}

0 commit comments

Comments
 (0)