Merge branch 'top-menu-redesign' into 'v2.9.x'

Top menu redesign

See merge request allianceauth/allianceauth!1329

allianceauth/static/css/auth-base.css

@@ -3,7 +3,7 @@
 }
 
 .notification-bell-color {
-    color: #A88F1E;
+    color: #a88f1e;
 }
 
 .navbar-brand {
@@ -20,12 +20,12 @@
 }
 
 #wrapper {
-    width: 100%;
     padding: 0;
+    width: 100%;
 }
 
 #site-body-wrapper {
-    margin-right:0;
+    margin-right: 0;
 }
 
 /* Horizontal list group */
@@ -46,7 +46,7 @@ ul.list-group.list-group-horizontal > li.list-group-item {
 @media all {
     /* style nav tabs in dark mode*/
     .template-dark-mode .nav-tabs > li.active > a {
-        background-color: rgb(70, 69, 69)!important;
+        background-color: rgb(70, 69, 69) !important;
         color: rgb(255, 255, 255) !important;
     }
 
@@ -58,40 +58,47 @@ ul.list-group.list-group-horizontal > li.list-group-item {
 
     /* style group headers within a table */
     .template-light-mode .tr-group {
-        font-weight: bold;
         background-color: #e6e6e6 !important;
-    }
-    .template-dark-mode .tr-group {
         font-weight: bold;
+    }
+
+    .template-dark-mode .tr-group {
         background-color: rgb(105, 105, 105) !important;
+        font-weight: bold;
     }
 
     /* default style for tables */
-    .template-light-mode .table-aa > thead > tr > th{
+    .template-light-mode .table-aa > thead > tr > th {
         border-bottom: 1px solid #f2f2f2;
     }
-    .template-dark-mode .table-aa > thead > tr > th{
+
+    .template-dark-mode .table-aa > thead > tr > th {
         border-bottom: 1px solid rgb(70, 69, 69);
     }
-    .table-aa > thead > tr > th{
+
+    .table-aa > thead > tr > th {
         vertical-align: middle;
     }
-    .template-light-mode .table-aa > tbody > tr > td{
+
+    .template-light-mode .table-aa > tbody > tr > td {
         border-bottom: 1px solid #f2f2f2;
     }
-    .template-dark-mode .table-aa > tbody > tr > td{
+
+    .template-dark-mode .table-aa > tbody > tr > td {
         border-bottom: 1px solid rgb(70, 69, 69);
     }
+
     .table-aa > tbody > tr > td {
         vertical-align: middle;
     }
+
     .table-aa > tbody > tr:last-child {
         border-bottom: none;
     }
 }
 
 /* highlight active menu items
---------------------------------------------------------------------------------------------------------------------- */
+------------------------------------------------------------------------------------- */
 @media all {
     .template-light-mode .nav-pills > li > a.active {
         background-color: rgb(236, 240, 241);
@@ -102,15 +109,99 @@ ul.list-group.list-group-horizontal > li.list-group-item {
     }
 }
 
+/* user menu
+------------------------------------------------------------------------------------- */
+@media all {
+    img {
+        height: auto;
+        max-width: 100%;
+    }
+
+    .navbar-nav > li.top-user-menu.with-main-character > .dropdown-menu {
+        padding-top: 0.5rem;
+    }
+
+    .navbar-nav > li.top-user-menu.with-main-character a {
+        padding: 14px;
+    }
+
+    .dropdown-menu > li > a {
+        clear: both;
+        color: rgb(123, 138, 139);
+        display: block;
+        font-weight: 400;
+        line-height: 1.42857143;
+        padding: 3px 20px;
+        white-space: nowrap;
+    }
+
+    .top-user-menu {
+        color: rgb(255, 255, 255);
+    }
+
+    .top-menu-bar-language-select form {
+        border-bottom: 1px solid transparent;
+        border-top: 1px solid transparent;
+        -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255), 0 1px 0 rgb(255 255 255);
+        box-shadow: inset 0 1px 0 rgb(255 255 255), 0 1px 0 rgb(255 255 255);
+        margin-bottom: 7.5px;
+        margin-left: 5px;
+        margin-right: 5px;
+        margin-top: 7.5px;
+        padding: 10px 15px;
+    }
+}
+
+@media all and (max-width: 768px) {
+    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a {
+        padding: 5px 15px 5px 25px;
+    }
+}
+
+@media all and (min-width: 768px) {
+    .top-user-menu {
+        color: rgb(123, 138, 139);
+    }
+
+    .top-menu-bar-language-select form {
+        border: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        margin-left: 0;
+        margin-right: 0;
+        padding-bottom: 0;
+        padding-top: 0;
+        width: auto;
+    }
+}
+
+/* eve time in navbar
+------------------------------------------------------------------------------------- */
+@media all {
+    .nav-item-eve-time .eve-time-wrapper {
+        color: rgb(255, 255, 255);
+        display: block;
+        line-height: 21px;
+        padding: 10px 15px;
+        position: relative;
+    }
+}
+
+@media all and (min-width: 768px) {
+    .nav-item-eve-time .eve-time-wrapper {
+        padding-bottom: 19.5px;
+        padding-top: 19.5px;
+    }
+}
+
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
-
     /* class for vertically aligning columns in a bootstrap row */
     .row.vertical-flexbox-row2 {
-        display:  -webkit-box;
+        display: -webkit-box;
         display: -webkit-flex;
-        display:  -ms-flexbox;
-        display:         flex;
+        display: -ms-flexbox;
+        display: flex;
         flex-wrap: wrap;
     }
 
@@ -123,6 +214,6 @@ ul.list-group.list-group-horizontal > li.list-group-item {
 /* Extra Small devices (Phones, <768px) */
 @media (max-width: 767px) {
     .button-wrapper .btn {
-        margin-bottom:5px;
+        margin-bottom: 5px;
     }
 }

allianceauth/static/js/eve-time.js

@@ -0,0 +1,61 @@
+$(document).ready(function () {
+    'use strict';
+
+    /**
+     * check time
+     * @param i
+     * @returns {string}
+     */
+    let checkTime = function (i) {
+        if (i < 10) {
+            i = '0' + i;
+        }
+
+        return i;
+    };
+
+    /**
+     * render a JS clock for Eve Time
+     * @param element
+     * @param utcOffset
+     */
+    let renderClock = function (element, utcOffset) {
+        let today = new Date();
+        let h = today.getUTCHours();
+        let m = today.getUTCMinutes();
+        let s = today.getUTCSeconds();
+
+        h = h + utcOffset;
+
+        if (h > 24) {
+            h = h - 24;
+        }
+
+        if (h < 0) {
+            h = h + 24;
+        }
+
+        h = checkTime(h);
+        m = checkTime(m);
+        s = checkTime(s);
+
+        // document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
+        element.html(h + ':' + m + ':' + s);
+
+        setTimeout(function () {
+            renderClock(element, 0);
+        }, 500);
+    };
+
+    /**
+     * functions that need to be executed on load
+     */
+    let init = function () {
+        renderClock($('.eve-time-wrapper .eve-time-clock'), 0);
+    };
+
+    /**
+     * start the show
+     */
+    init();
+});

allianceauth/templates/allianceauth/base.html

@@ -50,6 +50,7 @@
             };
         </script>
         <script src="{% static 'js/refresh_notifications.js' %}"></script>
+        <script src="{% static 'js/eve-time.js' %}"></script>
 
         {% block extra_javascript %}
         {% endblock extra_javascript %}

allianceauth/templates/allianceauth/night-toggle.html

@@ -1,5 +1,8 @@
 {% load i18n %}
-<a href="{% url 'nightmode' %}?next={{ request.path|urlencode }}">
-    {% trans "Night" %}
-    <i class="fas {% if NIGHT_MODE %}fa-toggle-on{% else %}fa-toggle-off{% endif %}" aria-hidden="true"></i>
-</a>
+
+<li>
+    <a href="{% url 'nightmode' %}?next={{ request.path|urlencode }}">
+        <i class="fas {% if NIGHT_MODE %}fa-toggle-on{% else %}fa-toggle-off{% endif %}" aria-hidden="true"></i>
+        {% trans "Night Mode" %}
+    </a>
+</li>

allianceauth/templates/allianceauth/top-menu-admin.html

@@ -0,0 +1,29 @@
+{% load i18n %}
+
+
+{% if user.is_authenticated %}
+    {% if user.is_staff %}
+        <li role="separator" class="divider"></li>
+        <li><a href="{% url 'admin:index' %}" target="_blank" rel="noopener noreferer">
+            <i class="fas fa-user-shield"></i>
+            {% translate "Admin" %}</a>
+        </li>
+    {% endif %}
+{% endif %}
+
+{% if user.is_superuser %}
+    <li role="separator" class="divider"></li>
+    <li>
+        <a href="https://allianceauth.readthedocs.io/" target="_blank" rel="noopener noreferer">
+            <i class="fas fa-question-circle fa-fw"></i>
+            {% translate "AA Documentation" %}
+        </a>
+    </li>
+
+    <li>
+        <a href="https://discord.gg/fjnHAmk" target="_blank" rel="noopener noreferer">
+            <i class="fab fa-discord fa-fw"></i>
+            {% translate "AA Support Discord" %}
+        </a>
+    </li>
+{% endif %}

allianceauth/templates/allianceauth/top-menu-user-dropdown.html

@@ -0,0 +1,61 @@
+{% load i18n %}
+{% load evelinks %}
+
+<li class="top-user-menu dropdown{% if request.user.profile.main_character %} with-main-character{% endif %}">
+    <a href="#" class="dropdown-toggle" type="button" id="top-user-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        {% if request.user.profile.main_character %}
+            {% with request.user.profile.main_character as main %}
+                <img class="img-rounded ra-avatar" src="{{ main.character_id|character_portrait_url:32 }}" alt="{{ main.character_name }}">
+                <span class="hidden-sm hidden-md hidden-lg">
+                    {{ main.character_name }} - {% translate "User Menu" %}
+                </span>
+            {% endwith %}
+        {% else %}
+            {% translate "User Menu" %}
+        {% endif %}
+        <span class="caret"></span>
+    </a>
+
+    <ul class="dropdown-menu top-user-menu" aria-labelledby="top-user-menu">
+        <!-- user avatar -->
+        {% if request.user.profile.main_character %}
+            <li>
+                {% with request.user.profile.main_character as main %}
+                    <p class="text-center">
+                        <img class="img-rounded ra-avatar" src="{{ main.character_id|character_portrait_url:256 }}" alt="{{ main.character_name }}">
+                    </p>
+
+                    <p class="text-center">
+                        <span style="display: block;">{{ main.character_name }}</span>
+                        <span style="display: block;">{{ main.corporation_name }}</span>
+
+                        {% if main.alliance_name %}
+                            <span style="display: block;">{{ main.alliance_name }}</span>
+                        {% endif %}
+                    </p>
+                {% endwith %}
+            </li>
+            <li role="separator" class="divider"></li>
+        {% endif %}
+
+        <li class="top-menu-bar-language-select">
+            {% include 'public/lang_select.html' %}
+        </li>
+
+        <li role="separator" class="divider"></li>
+
+        <!-- night mode toggle -->
+        {% include 'allianceauth/night-toggle.html' %}
+
+        <!-- admin related menu items -->
+        {% include 'allianceauth/top-menu-admin.html' %}
+
+        <!-- logout / login -->
+        <li role="separator" class="divider"></li>
+        {% if user.is_authenticated %}
+            <li><a href="{% url 'logout' %}">{% translate "Logout" %}</a></li>
+        {% else %}
+            <li><a href="{% url 'authentication:login' %}">{% translate "Login" %}</a></li>
+        {% endif %}
+    </ul>
+</li>

allianceauth/templates/allianceauth/top-menu.html

@@ -10,51 +10,24 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
+
             <a class="navbar-brand">
                 <img src="{% static 'icons/favicon-32x32.png' %}" style="display: inline-block;" height="32" width="32"/>
                 {{ 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>
-                    <li
-                        class="{% navactive request 'notifications:' %}" id="menu_item_notifications"
-                    >
+                <li class="nav-item-eve-time">
+                    <div class="eve-time-wrapper">Eve Time: <span class="eve-time-clock"></span></div>
+                </li>
+                <li class="{% navactive request 'notifications:' %}" id="menu_item_notifications">
                     {% include 'allianceauth/notifications_menu_item.html' %}
-                    </li>
-                {% if user.is_authenticated %}
-                    {% if user.is_staff %}
-                        <li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
-                    {% endif %}
-                    <li><a href="{% url 'logout' %}">{% trans "Logout" %}</a></li>
-                {% else %}
-                    <li><a href="{% url 'authentication:login' %}">{% trans "Login" %}</a></li>
-                {% endif %}
-                {% if user.is_superuser %}
-                    <li>
-                        <a class="navbar-brand" style="margin-left: -4px;" href="https://allianceauth.readthedocs.io/" target="_blank">
-                            <i class="fas fa-question-circle fa-fw"></i>
-                        </a>
-                    </li>
-                {% endif %}
+                </li>
+
+                {% include 'allianceauth/top-menu-user-dropdown.html' %}
             </ul>
-            <form id="f-lang-select" class="navbar-form navbar-right" action="{% url 'set_language' %}" method="post">
-                {% csrf_token %}
-                <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>