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

ui: Update styling for navbar menu items

Browse Source 
- Drop menu_link and menu_link_active classes and use the bootstrap's default
classes.

- Override values for bootstrap variables instead of overriding the styles
themselves.

Tests:

- Test that navbar shows same colors as before in mobile view and desktop view.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2024-12-06 09:53:36 -08:00 committed by Veiko Aasa
parent fb95c5dce2
commit 3b369cd90f
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
2 changed files with 27 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plinth/templates/base.html
View File

@ -87,8 +87,8 @@
{% block mainmenu_left %}
<a href="{% url 'index' %}" class="navbar-brand
{% if not active_menu_urls %} menu_link_active {% else %}
menu_link {% endif %}" title="{{ box_name }}">
{% if not active_menu_urls %}active{% endif %}"
title="{{ box_name }}">
<i class="fa fa-freedombox fa-2x fa-inverse" aria-hidden="true"></i>
</a>
{% endblock %}
@ -115,7 +115,7 @@
{% url 'index' as index_url %}
<a href="{{ index_url }}" title='{% trans " Home" %}'
class="nav-link {% if not active_menu_urls %}
menu_link_active {% else %} menu_link {% endif %}">
active{% endif %}">
{% trans "Home" %}
</a>
</li>
@ -123,7 +123,7 @@
{% url 'apps' as apps_url %}
<a href="{{ apps_url }}" title='{% trans " Apps" %}'
class="nav-link {% if apps_url in active_menu_urls %}
menu_link_active {% else %} menu_link {% endif %}">
active{% endif %}">
<span class="fa fa-th nav-icon"></span>
{% trans "Apps" %}
</a>
@ -132,7 +132,7 @@
{% url 'system' as system_url %}
<a href="{{ system_url }}" title='{% trans " System" %}'
class="nav-link {% if system_url in active_menu_urls %}
menu_link_active {% else %} menu_link {% endif %}">
active{% endif %}">
<span class="fa fa-cog nav-icon"></span>
{% trans "System" %}
</a>

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

@ -516,42 +516,36 @@ footer {
padding: 0;
}
.main-header .navbar-nav > li > a,
.main-header .navbar-toggler {
color: #FFF;
}
.main-header .nav-item .nav-link {
padding: 0.9375rem !important;
height: 3.25rem;
}
.main-header .nav-link,
.main-header .nav-link:hover {
color: white;
.main-header .nav-link {
--bs-navbar-color: white;
--bs-navbar-active-color: white;
--bs-navbar-hover-color: white;
--bs-nav-link-color: white;
--bs-nav-link-active-color: white;
--bs-nav-link-hover-color: white;
}
.main-header .navbar-toggler {
border: 1px solid #ddd;
--bs-navbar-toggler-border-color: white;
--bs-navbar-color: white;
/* In mobile layout, during first setup, maintain the height of the navbar */
margin: 0.6875rem 0;
}
@media screen and (max-width: 767px) {
.main-header .navbar-nav .dropdown-menu {
background-color: var(--freedombox-blue-color);
}
.main-header .navbar-nav > li > a:focus,
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav li > form > input,
.main-header .navbar-nav li > form > input:focus,
.main-header .navbar-nav li > form > input:hover,
.main-header .navbar-nav .show a,
.main-header .navbar-nav .show a:hover,
.main-header .navbar-nav .show a:focus {
color: #FFF;
background: transparent;
.main-header .dropdown-menu {
--bs-dropdown-link-color: white;
--bs-dropdown-link-active-color: white;
--bs-dropdown-link-hover-color: white;
--bs-dropdown-link-hover-bg: var(--freedombox-blue-color);
--bs-dropdown-link-active-bg: var(--freedombox-blue-color);
--bs-dropdown-bg: var(--freedombox-blue-color);
--bs-dropdown-border-color: white;
}
.main-header .navbar-nav .nav-item:last-of-type .dropdown-menu {
@ -559,6 +553,11 @@ footer {
}
}
.main-header .navbar-brand.active,
.main-header .nav-link.active {
border-bottom: white 3px solid;
}
/* Cards in Index, Apps, System and Help pages */
.card-list {
display: flex;
@ -580,18 +579,6 @@ footer {
border-bottom: var(--neutral-dark-color) solid 2px;
}
a.menu_link {
text-decoration: none;
}
a.menu_link:hover,a.menu_link:active {
text-decoration: none;
}
a.menu_link_active {
border-bottom: white 3px solid;
}
.card {
display: block;
line-height: 1.42857143;