nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-03-25 09:21:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: Use inline SVG icons for navigation bar at the top

Browse Source 
Tests:

- All the icons appear as before in both light/dark themes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2026-03-12 19:25:48 -07:00 committed by James Valleroy
parent d0f1f95bbb
commit 07955b4e64
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plinth/templates/base.html
View File

@ -92,10 +92,10 @@
{% block mainmenu_left %}
{% url 'index' as index_url %}
<a href="{{ index_url }}" class="navbar-brand
<a href="{{ index_url }}" class="navbar-brand
{% if index_url == active_section_url %}active{% endif %}"
title="{{ box_name }}">
<i class="fa fa-freedombox fa-2x fa-inverse" aria-hidden="true"></i>
{% icon 'freedombox' %}
</a>
{% endblock %}
@ -109,7 +109,7 @@
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
{% icon 'bars' %}
</button>
{% endblock %}
@ -130,7 +130,7 @@
<a href="{{ apps_url }}" title='{% trans " Apps" %}'
class="nav-link {% if apps_url == active_section_url %}
active{% endif %}">
<span class="fa fa-th nav-icon"></span>
{% icon 'th' %}
{% trans "Apps" %}
</a>
</li>
@ -139,7 +139,7 @@
<a href="{{ system_url }}" title='{% trans " System" %}'
class="nav-link {% if system_url == active_section_url %}
active{% endif %}">
<span class="fa fa-cog nav-icon"></span>
{% icon 'cog' %}
{% trans "System" %}
</a>
</li>
@ -162,7 +162,7 @@
class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
role="button" aria-expanded="false" aria-haspopup="true"
id="id_user_menu_link">
<i class="fa fa-user nav-icon"></i>
{% icon 'user' %}
{{ request.user.username }}
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start"
@ -212,7 +212,7 @@
<a class="nav-link"
href="{% url 'language-selection' %}?next={{ request.path|iriencode }}"
title="{% trans "Select language" %}">
<span class="fa fa-globe-w nav-icon"></span>
{% icon 'globe-w' %}
<span class="nav-text d-inline-block d-md-none">
{% trans "Select language" %}
</span>
@ -221,7 +221,7 @@
<li class="nav-item">
<a class="nav-link" href="{% url 'help:about' %}"
title="{% trans "About" %}">
<span class="fa fa-question-circle nav-icon"></span>
{% icon 'question-circle' %}
<span class="nav-text d-inline-block d-md-none">
{% trans "About" %}
</span>
@ -230,7 +230,7 @@
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}"
title="{% trans "Log in" %}">
<i class="fa fa-user nav-icon"></i>
{% icon 'user' %}
{% trans "Log in" %}</a>
</li>
{% endif %}

30
static/themes/default/css/main.css
View File

@ -194,23 +194,20 @@ body {
padding-left: 40px;
}
.navbar .fa:not(.fa-bars) {
margin-right: 0.25rem;
}
.no-brand .navbar-brand {
display: none;
}
.navbar-brand .fa {
float: left;
margin-top: -0.4375rem;
padding: 0.5rem;
.navbar-brand {
font-size: 2.5rem;
display: block;
height: 3.25rem;
padding: 0;
margin-right: -1.125rem;
}
.navbar-brand {
height: 3.3125rem;
margin-right: -1.25rem;
.navbar-brand svg {
vertical-align: -6%;
}
@media (max-width: 767px) {
@ -488,6 +485,11 @@ footer {
border: none;
}
.main-header .navbar {
--bs-navbar-brand-color: var(--freedombox-navbar-color);
--bs-navbar-brand-hover-color: var(--freedombox-navbar-color);
}
.main-header > .container > nav.navbar {
padding: 0;
}
@ -513,6 +515,12 @@ footer {
margin: 0.6875rem 0;
}
.main-header .navbar-toggler svg {
display: block;
margin: 0.1em 0;
height: 0.8em;
}
@media screen and (max-width: 767px) {
.main-header .dropdown-menu {
--bs-dropdown-link-color: var(--freedombox-navbar-color);