From 3e2b1fc92e807a8bf524ac9574a87cd73aeb42d0 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Fri, 30 Sep 2022 17:20:43 +0300
Subject: [PATCH] feat: Add a bug report link to the menu bar (#4525)

This required making some horizontal room for it, mostly by showing a
user photo or shorter tag when they are logged in.
---
 ietf/static/css/ietf.scss          |  7 +++++++
 ietf/templates/base.html           | 31 +++++++++++++++++++-----------
 ietf/templates/base/menu.html      |  2 +-
 ietf/templates/base/menu_user.html | 10 ++++++++--
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index 86b71f154..618ce267d 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -227,6 +227,13 @@ th {
     }
 }
 
+// Style the navbar user photo
+.nav-link .user-photo {
+    object-fit: cover;
+    height: 40px;
+    width: 40px;
+}
+
 // Style the righthand navigation panel
 #righthand-panel {
     max-height: 80vh;
diff --git a/ietf/templates/base.html b/ietf/templates/base.html
index 1ccef06c9..ed064a535 100644
--- a/ietf/templates/base.html
+++ b/ietf/templates/base.html
@@ -42,23 +42,32 @@
                     <img alt="IETF Logo" class="me-2"
                         src="{% static 'ietf/images/ietf-logo-nor-white.svg' %}">
                     Datatracker
-                    {% if server_mode and server_mode != "production" %}Dev Mode{% endif %}
+                    {% if server_mode and server_mode != "production" %}
+                        <span class="text-danger">&delta;</span>
+                    {% endif %}
                 </a>
                 <div class="collapse navbar-collapse" id="navbar-collapse">
                     <ul class="nav navbar-nav">
                         {% include "base/menu.html" with flavor="top" %}
                     </ul>
                 </div>
-                {% if not user.is_authenticated %}
-                    <a class="d-none d-sm-block mx-5 btn {% if server_mode and server_mode == "production" %} btn-warning {% else %} btn-info {% endif %}"
-                       rel="nofollow"
-                       href="{% url 'ietf.ietfauth.views.login' %}?next={{ request.get_full_path|removesuffix:'accounts/logout/'|urlencode }}">
-                        Sign
-                        in
+                <div class="d-flex align-items-center">
+                    <a class="nav-link {% if server_mode and server_mode != "production" %}text-danger{% else %}text-warning{% endif %} d-none d-xl-inline me-xl-4"
+                       target="_blank"
+                       href="https://github.com/ietf-tools/datatracker/issues/new/choose">
+                        Report a bug
+                        <i class="bi bi-bug"></i>
                     </a>
-                {% endif %}
-                <div class="d-flex d-none d-lg-block">
-                    <label aria-label="Document search">
+
+                    {% if not user.is_authenticated %}
+                        <a class="btn me-1 {% if server_mode and server_mode == "production" %} btn-warning {% else %} btn-info {% endif %} d-none d-sm-block"
+                           rel="nofollow"
+                           href="{% url 'ietf.ietfauth.views.login' %}?next={{ request.get_full_path|removesuffix:'accounts/logout/'|urlencode }}">
+                            Sign in
+                        </a>
+                    {% endif %}
+
+                    <label class="d-none d-md-block" aria-label="Document search">
                     <input class="form-control select2-field"
                            id="navbar-doc-search"
                            data-select2-ajax-url="{% url 'ietf.doc.views_search.ajax_select2_search_docs' model_name='docalias' doc_type='draft' %}"
@@ -137,7 +146,7 @@
                     <span class="mx-2 text-danger">
                         <i class="bi bi-bug"></i>
                         Report a bug:
-                        <a class="text-reset" href="https://github.com/ietf-tools/datatracker/issues/new/choose">GitHub</a>
+                        <a class="text-reset" target="_blank" href="https://github.com/ietf-tools/datatracker/issues/new/choose">GitHub</a>
                         {% if bugreport_email %}
                             <a class="text-reset" href="mailto:{{ bugreport_email }}">Email</a>
                         {% endif %}
diff --git a/ietf/templates/base/menu.html b/ietf/templates/base/menu.html
index 558c977c8..61ffff0c1 100644
--- a/ietf/templates/base/menu.html
+++ b/ietf/templates/base/menu.html
@@ -420,7 +420,7 @@
     {% endif %}
     <li>
         <a class="dropdown-item text-danger {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
-           href="https://github.com/ietf-tools/datatracker/issues/new/choose">
+           target="_blank" href="https://github.com/ietf-tools/datatracker/issues/new/choose">
             <i class="bi bi-bug">
             </i>
             Report a bug
diff --git a/ietf/templates/base/menu_user.html b/ietf/templates/base/menu_user.html
index 40ebfeb0e..d4c51ff9f 100644
--- a/ietf/templates/base/menu_user.html
+++ b/ietf/templates/base/menu_user.html
@@ -5,12 +5,18 @@
 <li class="nav-item dropdown">
     {% if flavor == "top" %}
         <a href="#"
-           class="nav-link dropdown-toggle"
+           class="nav-link dropdown-toggle{% if user.person.photo_thumb %} p-0{% endif %}"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">
             {% if user.is_authenticated %}
-                {{ user }}
+                {% if user.person.photo_thumb %}
+                    <img class="user-photo rounded-circle ms-1" width="40" height="40"
+                         src="{{ user.person.photo_thumb.url }}"
+                         alt="Photo of {{ user.person.name }}">
+                {% else %}
+                    {{ user.username|split:'@'|first }}
+                {% endif %}
             {% else %}
                 User
             {% endif %}