adding user menu

allianceauth/static/css/auth-base.css

@@ -91,7 +91,7 @@ ul.list-group.list-group-horizontal > li.list-group-item {
 }
 
 /* highlight active menu items
---------------------------------------------------------------------------------------------------------------------- */
+------------------------------------------------------------------------------------- */
 @media all {
     .template-light-mode .nav-pills > li > a.active {
         background-color: rgb(236, 240, 241);
@@ -102,6 +102,65 @@ 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 {
+        display: block;
+        padding: 3px 20px;
+        clear: both;
+        font-weight: 400;
+        line-height: 1.42857143;
+        color: rgb(123, 138, 139);
+        white-space: nowrap;
+    }
+
+    .top-user-menu .navbar-form {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+}
+
+@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;
+    }
+}
+
+/* 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;
+    }
+}
+
+/* eve time in navbar
+------------------------------------------------------------------------------------- */
+@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) {
 

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" %}
+<li>
-    <i class="fas {% if NIGHT_MODE %}fa-toggle-on{% else %}fa-toggle-off{% endif %}" aria-hidden="true"></i>
+    <a href="{% url 'nightmode' %}?next={{ request.path|urlencode }}">
-</a>
+        <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,70 @@
+{% 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 }}">
+            {% endwith %}
+        {% else %}
+            {% translate "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>
+            <form id="f-lang-select" class="navbar-form" 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>
+        </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>
+                <li class="nav-item-eve-time">
-                        {% include 'allianceauth/night-toggle.html' %}
+                    <div class="eve-time-wrapper">Eve Time: <span class="eve-time-clock"></span></div>
-                    </li>
+                </li>
-                    <li
+                <li class="{% navactive request 'notifications:' %}" id="menu_item_notifications">
-                        class="{% navactive request 'notifications:' %}" id="menu_item_notifications"
-                    >
                     {% include 'allianceauth/notifications_menu_item.html' %}
-                    </li>
+                </li>
-                {% if user.is_authenticated %}
+
-                    {% if user.is_staff %}
+                {% include 'allianceauth/top-menu-user-dropdown.html' %}
-                        <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 %}
             </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>