mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2026-02-10 09:06:21 +01:00
Add night mode (#890)
* Split base template menus out * Add toggle for night mode setting * Add vertical flexbox row Makes each col-* expand to fill the space created by the largest column. * Use flexbox on main character and group panels * Fix data table sort control clipping * Build new css
This commit is contained in:
Basraah
GitHub
@@ -1,12 +1,9 @@
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% load navactive %}
|
||||
{% load menu_items %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -21,103 +18,13 @@
|
||||
<link href="{% static 'css/auth-base.css' %}" type="text/css" rel="stylesheet">
|
||||
{% block extra_css %}{% endblock extra_css %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% if user.is_authenticated %}
|
||||
<div id="wrapper" class="container">
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-static-top navbar-inverse auth-navbar-top" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".auth-menus-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand">
|
||||
{{ SITE_NAME }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse auth-menus-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% if notifications %}
|
||||
<li>
|
||||
<a href="{% url 'notifications:list' %}">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-bell fa-stack-2x notification-bell-color"></i>
|
||||
<i class="fa fa-inverse fa-stack-1x">{{ notifications }}</i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li><a href="{% url 'notifications:list' %}">
|
||||
<i class="fa fa-bell-o"></i></a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.is_staff %}
|
||||
<li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{% url 'auth_logout' %}">{% trans "Logout" %}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{% url 'authentication:login' %}">{% trans "Login" %}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<form id="f-lang-select" class="navbar-form navbar-right" action="{% url 'set_language' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path|slice:'3:' }}"/>
|
||||
<div class="form-group">
|
||||
<select onchange="this.form.submit()" class="form-control" id="lang-select" name="language">
|
||||
{% get_language_info_list for LANGUAGES as languages %}
|
||||
{% for language in languages %}
|
||||
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %}
|
||||
selected="selected"{% endif %}>
|
||||
{{ language.name_local }} ({{ language.code }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% include 'allianceauth/top-menu.html' %}
|
||||
<div class="row" id="site-body-wrapper">
|
||||
<div class="col-sm-2 auth-side-navbar" role="navigation">
|
||||
<div class="collapse navbar-collapse auth-menus-collapse auth-side-navbar-collapse">
|
||||
<ul class="nav nav-pills nav-stacked gray-icon-color" id="side-menu">
|
||||
<li>
|
||||
<a class="{% navactive request 'authentication:dashboard' %}"
|
||||
href="{% url 'authentication:dashboard' %}">
|
||||
<i class="fa fa-dashboard fa-fw"></i>{% trans " Dashboard" %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="{% navactive request 'groupmanagement:groups' %}" href="{% url 'groupmanagement:groups' %}">
|
||||
<i class="fa fa-cogs fa-fw fa-sitemap"></i>{% trans " Groups" %}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% if can_manage_groups %}
|
||||
<li>
|
||||
<a class="{% navactive request 'groupmanagement:management groupmanagement:membership groupmanagement:membership_list' %}"
|
||||
href="{% url 'groupmanagement:management' %}">
|
||||
<i class="fa fa-lock fa-sitemap fa-fw"></i>{% trans " Group Management" %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% menu_items %}
|
||||
|
||||
<li>
|
||||
<a class="{% navactive request 'authentication:help' %}"
|
||||
href="{% url 'authentication:help' %}">
|
||||
<i class="fa fa-question fa-fw"></i>{% trans " Help" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'allianceauth/side-menu.html' %}
|
||||
<div class="col-sm-10">
|
||||
{% if messages %}
|
||||
<br>
|
||||
@@ -128,10 +35,10 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
5
allianceauth/templates/allianceauth/night-toggle.html
Normal file
5
allianceauth/templates/allianceauth/night-toggle.html
Normal file
@@ -0,0 +1,5 @@
|
||||
{% load i18n %}
|
||||
<a href="{% url 'nightmode' %}?next={{ request.path|urlencode }}">
|
||||
{% trans "Night" %}
|
||||
<i class="fa {% if NIGHT_MODE %}fa-toggle-on{% else %}fa-toggle-off{% endif %}" aria-hidden="true"></i>
|
||||
</a>
|
||||
38
allianceauth/templates/allianceauth/side-menu.html
Normal file
38
allianceauth/templates/allianceauth/side-menu.html
Normal file
@@ -0,0 +1,38 @@
|
||||
{% load i18n %}
|
||||
{% load navactive %}
|
||||
{% load menu_items %}
|
||||
<div class="col-sm-2 auth-side-navbar" role="navigation">
|
||||
<div class="collapse navbar-collapse auth-menus-collapse auth-side-navbar-collapse">
|
||||
<ul class="nav nav-pills nav-stacked gray-icon-color" id="side-menu">
|
||||
<li>
|
||||
<a class="{% navactive request 'authentication:dashboard' %}"
|
||||
href="{% url 'authentication:dashboard' %}">
|
||||
<i class="fa fa-dashboard fa-fw"></i>{% trans " Dashboard" %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="{% navactive request 'groupmanagement:groups' %}" href="{% url 'groupmanagement:groups' %}">
|
||||
<i class="fa fa-cogs fa-fw fa-sitemap"></i>{% trans " Groups" %}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% if can_manage_groups %}
|
||||
<li>
|
||||
<a class="{% navactive request 'groupmanagement:management groupmanagement:membership groupmanagement:membership_list' %}"
|
||||
href="{% url 'groupmanagement:management' %}">
|
||||
<i class="fa fa-lock fa-sitemap fa-fw"></i>{% trans " Group Management" %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% menu_items %}
|
||||
|
||||
<li>
|
||||
<a class="{% navactive request 'authentication:help' %}"
|
||||
href="{% url 'authentication:help' %}">
|
||||
<i class="fa fa-question fa-fw"></i>{% trans " Help" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
58
allianceauth/templates/allianceauth/top-menu.html
Normal file
58
allianceauth/templates/allianceauth/top-menu.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{% load i18n %}
|
||||
{% load navactive %}
|
||||
<nav class="navbar navbar-default navbar-static-top auth-navbar-top" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".auth-menus-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand">
|
||||
{{ SITE_NAME }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse auth-menus-collapse">
|
||||
<ul class="nav navbar-nav navbar-right navbar-pills">
|
||||
<li>
|
||||
{% include 'allianceauth/night-toggle.html' %}
|
||||
</li>
|
||||
{% if notifications %}
|
||||
<li class="{% navactive request 'notifications:' %}">
|
||||
<a href="{% url 'notifications:list' %}">Notifications
|
||||
<span class="badge">{{ notifications }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li><a href="{% url 'notifications:list' %}">
|
||||
<i class="fa fa-bell-o"></i></a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.is_staff %}
|
||||
<li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{% url 'auth_logout' %}">{% trans "Logout" %}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{% url 'authentication:login' %}">{% trans "Login" %}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<form id="f-lang-select" class="navbar-form navbar-right" action="{% url 'set_language' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path|slice:'3:' }}"/>
|
||||
<div class="form-group">
|
||||
<select onchange="this.form.submit()" class="form-control" id="lang-select" name="language">
|
||||
{% get_language_info_list for LANGUAGES as languages %}
|
||||
{% for language in languages %}
|
||||
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %}
|
||||
selected="selected"{% endif %}>
|
||||
{{ language.name_local }} ({{ language.code }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,7 +1,20 @@
|
||||
{% load staticfiles %}
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Extra Bootstrap CSS -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap CSS -->
|
||||
{% if NIGHT_MODE %}
|
||||
{% if debug %}
|
||||
<!-- In template debug, loading less file instead of CSS -->
|
||||
<link rel="stylesheet/less" type="text/css" href="{% static 'css/themes/darkly/darkly.less' %}" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{% static 'css/themes/darkly/darkly.min.css' %}" />
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if debug %}
|
||||
<!-- In template debug, loading less file instead of CSS -->
|
||||
<link rel="stylesheet/less" type="text/css" href="{% static 'css/themes/flatly/flatly.less' %}" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{% static 'css/themes/flatly/flatly.min.css' %}" />
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<!-- End Bootstrap CSS -->
|
||||
|
||||
Reference in New Issue
Block a user