Sunil Mohan Adapa 7ba559a8a9
base.html: Drop dependency on modernizr.js library
- The library performs a large number of tests to determine if various features
are available in the browser. In Debian most tests seem to be present unlike
other methods of distribution where users select which tests they want and build
a customized library for their app. This leads to increased page load time.

- The only functionality we use from Modernizr library are the .js and .no-js
classes we use in our CSS styling. Modernizr is not needed by Bootstrap library.
We don't use 'Modernizr.' properties in Javascript.

- A bug in the test to determine if an <input> element with type="number" allows
localization or not causes the page to scroll down to the end. This behavior
appeared in version 3.x of modernizr and despite the bug report and the fix, it
is not gone. Dropping modernizr fixes this issue.

Tests:

- The logout link in the header bar is visible only when Javascript is disabled.

- The dropdown icons next to header menus only appear when Javascript is
enabled.

- For each feature detection provided by Modernizr library, search if our
project is using that in CSS styling.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2024-08-07 23:26:32 +03:00

258 lines
11 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' %}"/>
<!-- Bootstrap base CSS -->
<link rel="stylesheet" href="{% static '/javascript/bootstrap4/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' %}"/>
<!-- 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/bootstrap4/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 %}
<a href="{% url 'index' %}" class="navbar-brand
{% if not submenu.url %} menu_link_active {% else %}
menu_link {% endif %}" title="{{ box_name }}">
<i class="fa fa-freedombox fa-2x fa-inverse" aria-hidden="true"></i>
</a>
{% endblock %}
<ul class="navbar-nav">
{% include "notifications-dropdown.html" %}
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
<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 not submenu.url %}
menu_link_active {% else %} menu_link {% 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 == submenu.url %}
menu_link_active {% else %} menu_link {% 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 == submenu.url %}
menu_link_active {% else %} menu_link {% 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-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 '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"
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>