Sunil Mohan Adapa 36c4bc30fb
context_processors: Use breadcrumbs to highlight current section
- We were using hacky logic of assuming that if a page using the URL
/plinth/sys/..., then it belongs to 'system' section based on the URL match.
This won't work when the URL does not follow this pattern for any reason.

- Instead use the breadcrumbs mechanism which uses menu items and URL names to
determine the section a page belongs to.

Tests:

- Visit page, apps page, system page, help pages, an app page in apps sections,
an app page in system section, backups -> create backup page and notice that the
correct section is highlighted.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2024-12-25 12:24:29 +02:00

278 lines
12 KiB
HTML

{% load i18n %}
{% load static %}
{% load plinth_extras %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}
<!doctype html>
<html class="no-js" lang="en">
<!-- the "no-js" class will be removed if Javascript is turned on -->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine and Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile Viewport Fix http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- R2D2, you know better than to trust a strange computer! -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, notranslate" />
<meta name="msnbot" content="noindex, nofollow, noarchive, noodp" />
<meta name="slurp" content="noindex, nofollow, noarchive, noodp, noydir" />
<meta name="application-name" content="{{ box_name }}" />
<meta name="description"
content="{% blocktrans trimmed %}
FreedomBox is a personal server designed for privacy and
data ownership. It is free software that lets you install
and manage server apps with ease.
{% endblocktrans %}" />
{% block title %}
<title>
{% if title %} {{ title }} {% else %} {{ box_name }} {% endif %}
</title>
{% endblock %}
<!-- Favicon. Works with IE >= 11 and other GUI browsers -->
<link rel="icon" type="image/png"
href="{% static 'theme/img/freedombox-logo-32px.png' %}"/>
<!-- The is the icon for iOS's Web Clip. Size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<link rel="apple-touch-icon" sizes="57x57" href="{% static 'theme/img/apple-touch-icon-57px-precomposed.png' %}"/>
<link rel="apple-touch-icon" sizes="72x72" href="{% static 'theme/img/apple-touch-icon-72px-precomposed.png' %}"/>
<link rel="apple-touch-icon" sizes="114x114" href="{% static 'theme/img/apple-touch-icon-114px-precomposed.png' %}"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="{% static '/javascript/bootstrap5/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static '/javascript/fork-awesome/css/fork-awesome.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/main.css' %}"/>
{% if user_css %}
<link rel="stylesheet" href="{% static user_css %}"/>
{% endif %}
<!-- Local link to system jQuery -->
<!-- TODO Deferring jQuery is causing scripts to be loaded before jQuery is available -->
<script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>
<!-- Local link to system Bootstrap JS -->
<script type="text/javascript" src="{% static '/javascript/popper.js/umd/popper.js' %}" defer></script>
<script type="text/javascript" src="{% static 'theme/js/fix.js' %}" defer></script>
<script type="text/javascript" src="{% static '/javascript/bootstrap5/js/bootstrap.bundle.min.js' %}" defer></script>
<script type="text/javascript" src="{% static 'theme/js/main.js' %}" defer></script>
{% if refresh_page_sec is not None %}
<noscript>
<meta http-equiv="refresh" content="{{ refresh_page_sec }}" />
</noscript>
{% endif %}
{% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
{% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head>
<body class="{%block body_class %}{%endblock%}"
{% if refresh_page_sec is not None %}
data-refresh-page-sec="{{ refresh_page_sec }}"
{% endif %}>
<div id="wrapper">
<div class="main-header fixed-top">
<div class="container">
<nav class="navbar navbar-expand-md">
{% block mainmenu_left %}
{% url 'index' as index_url %}
<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>
</a>
{% endblock %}
{% block notifications_dropdown %}
<ul class="navbar-nav">
{% include "notifications-dropdown.html" %}
</ul>
{% endblock %}
{% block mainmenu_toggler %}
<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>
</button>
{% endblock %}
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav flex-grow-1">
{% block mainmenu_left_collapse %}
{% if user.is_authenticated and user_is_admin %}
<li class="nav-item">
{% url 'index' as index_url %}
<a href="{{ index_url }}" title='{% trans " Home" %}'
class="nav-link {% if index_url == active_section_url %}
active{% endif %}">
{% trans "Home" %}
</a>
</li>
<li class="nav-item">
{% url 'apps' as apps_url %}
<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>
{% trans "Apps" %}
</a>
</li>
<li class="nav-item">
{% url 'system' as system_url %}
<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>
{% trans "System" %}
</a>
</li>
{% endif %}
{% endblock %}
</ul>
<ul class="navbar-nav">
{% block mainmenu_right %}
{% if user.is_authenticated %}
{% include "notifications-dropdown.html" %}
{% include "help-menu.html" %}
<li id="id_user_menu" class="nav-item dropdown">
<a href="{% url 'users:edit' request.user.username %}"
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>
{{ request.user.username }}
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="id_user_menu_link">
<li>
<a id="id_user_edit_menu" class="dropdown-item"
href="{% url 'users:edit' request.user.username %}"
title="{% trans "Edit"%}">
{% trans "Edit" %}
</a>
</li>
<li>
<a id="id_change_password_menu" class="dropdown-item"
href="{% url 'users:change_password' request.user.username %}"
title="{% trans "Change password" %}">
{% trans "Change password" %}
</a>
</li>
<li class="dropdown-divider d-none d-md-block"></li>
{% if user_is_admin %}
<li>
<a class="dropdown-item" href="{% url 'power:restart' %}"
title="{% trans "Restart"%}">
{% trans "Restart" %}
</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'power:shutdown' %}"
title="{% trans "Shut down" %}">
{% trans "Shut down" %}
</a>
</li>
<li class="dropdown-divider d-none d-md-block"></li>
{% endif %}
<li>
<form class="form form-logout" method="post"
action="{% url 'users:logout' %}">
{% csrf_token %}
<input type="submit" class="dropdown-item no-running-status"
value="{% trans "Log out" %}"/>
</form>
</li>
</ul>
</li>
{% else %}
<li class="nav-item">
<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>
<span class="nav-text d-inline-block d-md-none">
{% trans "Select language" %}
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'help:about' %}"
title="{% trans "About" %}">
<span class="fa fa-question-circle nav-icon"></span>
<span class="nav-text d-inline-block d-md-none">
{% trans "About" %}
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}"
title="{% trans "Log in" %}">
<i class="fa fa-user nav-icon"></i>
{% trans "Log in" %}</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<form id="logout-nojs" class="form form-inline form-logout nav-item"
method="post" action="{% url 'users:logout' %}">
{% csrf_token %}
<input type="submit" class="nav-link no-running-status btn btn-link"
value="{% trans "Log out" %}"/>
</form>
{% endif %}
{% endblock %}
</ul>
</div>
</nav>
{% include "notifications.html" %}
</div>
</div>
{% block container %}
<div class="container content-container">
{% block content_row %}
{% include 'messages.html' %}
{% block content %}
{# main content goes here #}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
<footer>
<div class="container">
{% block footer_block %}
{% endblock %}
</div>
<div class="d-none">
<a href="{% static 'jslicense.html' %}" data-jslicense="1">
{% trans "JavaScript license information" %}</a>
</div>
</footer><!--/.footer-->
</div><!--/#container-->
{% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
{% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
</body>
</html>