From c6415a3b395f8caf5da4aa91d05e4e294715b775 Mon Sep 17 00:00:00 2001
From: Yinan Zhou <yinan.a.zhou@gmail.com>
Date: Wed, 24 Jul 2024 11:31:25 -0400
Subject: [PATCH 1/3] fix: adjust styles for user account btn in the navbar

- Avoid customize boostrap class

Refs: #135
---
 web-app/django/VIM/static/css/app.css  | 11 ++++++++---
 web-app/django/VIM/templates/base.html | 13 ++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/web-app/django/VIM/static/css/app.css b/web-app/django/VIM/static/css/app.css
index c46c7b3..f05577c 100644
--- a/web-app/django/VIM/static/css/app.css
+++ b/web-app/django/VIM/static/css/app.css
@@ -55,17 +55,22 @@ header {
   font-family: 'Noto Sans', sans-serif;
 }
 
-.login-btn:hover {
+.login-btn:hover,
+.login-btn:focus {
   color: #435334;
   border: 1px solid #faf1e4;
   background-color: #faf1e4;
 }
 
-.dropdown-menu {
+.umil-dropdown-menu {
   background-color: #faf1e4;
 }
 
-.dropdown-item:hover {
+.umil-dropdown-item {
+  color: #435334;
+}
+
+.umil-dropdown-item:hover {
   background-color: #cedebd;
 }
 
diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html
index 33d22b1..ef2ad00 100644
--- a/web-app/django/VIM/templates/base.html
+++ b/web-app/django/VIM/templates/base.html
@@ -52,17 +52,20 @@
           </form>
           <div class="text-end d-flex">
             {% if user.is_authenticated %}
-              <div class="dropdown me-3">
-                <button class="btn dropdown-toggle"
+              <div class="dropdown me-2">
+                <button class="btn dropdown-toggle login-btn"
                         type="button"
                         data-bs-toggle="dropdown"
                         aria-expanded="false">{{ user.username }}</button>
-                <ul class="dropdown-menu" aria-labelledby="userDropdown">
+                <ul class="dropdown-menu umil-dropdown-menu"
+                    aria-labelledby="userDropdown">
                   <li>
-                    <a class="dropdown-item" href="{% url 'main:change_password' %}">Change Password</a>
+                    <a class="dropdown-item umil-dropdown-item"
+                       href="{% url 'main:change_password' %}">Change Password</a>
                   </li>
                   <li>
-                    <a class="dropdown-item" href="{% url 'main:logout' %}">Log out</a>
+                    <a class="dropdown-item umil-dropdown-item"
+                       href="{% url 'main:logout' %}">Log out</a>
                   </li>
                 </ul>
               </div>

From 514c4ddde0fccda5fffad16374e0dc0506ae6ada Mon Sep 17 00:00:00 2001
From: Yinan Zhou <yinan.a.zhou@gmail.com>
Date: Wed, 24 Jul 2024 11:32:51 -0400
Subject: [PATCH 2/3] fix: de-activate dropdown on click-away && fix tooltip

- Remove dropdown from tooltip list

Refs: #135
---
 .../instruments/templates/instruments/index.html     | 12 +++++++++---
 web-app/django/VIM/static/js/LanguageTooltip.js      |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
index 9523360..42bc80a 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -79,7 +79,12 @@ <h4>######</h4>
             <h4 class="ms-3 me-2 my-auto">
               <small>INSTRUMENT LIST</small>
             </h4>
-            <div class="dropdown mx-2 notranslate" id="instrument-language-element">
+            <div class="dropdown mx-2 notranslate"
+                 id="instrument-language-element"
+                 data-bs-toggle="tooltip"
+                 data-bs-title="Instrument Name Language"
+                 aria-label="Instrument Name Language"
+                 aria-pressed="true">
               <button class="btn btn-warning dropdown-toggle position-relative py-0"
                       type="button"
                       aria-expanded="false"
@@ -87,10 +92,11 @@ <h4 class="ms-3 me-2 my-auto">
                       data-bs-title="Instrument name language">
                 {{ active_language.autonym|title }}
               </button>
-              <ul class="dropdown-menu">
+              <ul class="dropdown-menu umil-dropdown-menu">
                 {% for language in languages %}
                   <li>
-                    <a class="dropdown-item" href="?language={{ language.en_label }}">{{ language.autonym|title }}</a>
+                    <a class="dropdown-item umil-dropdown-item"
+                       href="?language={{ language.en_label }}">{{ language.autonym|title }}</a>
                   </li>
                 {% endfor %}
               </ul>
diff --git a/web-app/django/VIM/static/js/LanguageTooltip.js b/web-app/django/VIM/static/js/LanguageTooltip.js
index f8337ae..c020970 100644
--- a/web-app/django/VIM/static/js/LanguageTooltip.js
+++ b/web-app/django/VIM/static/js/LanguageTooltip.js
@@ -1,5 +1,5 @@
 const tooltipTriggerList = document.querySelectorAll(
-  '[data-bs-toggle="tooltip"], [data-bs-toggle="dropdown"]'
+  '[data-bs-toggle="tooltip"]'
 );
 const tooltipList = [...tooltipTriggerList].map(
   (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)

From 57a81c62c0d1d51be0873601d6a74cef04ee7cbc Mon Sep 17 00:00:00 2001
From: Yinan Zhou <yinan.a.zhou@gmail.com>
Date: Wed, 24 Jul 2024 11:44:49 -0400
Subject: [PATCH 3/3] fix: synchronize radio btn selections between two
 pagination number settings

Refs: #135
---
 .../templates/instruments/includes/paginationOptions.html      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html
index de01ead..4b6bba6 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html
@@ -2,21 +2,18 @@
   <span class="text-start">View</span>
   <input type="radio"
          class="btn-check option-radio"
-         name="options-group2"
          id="20"
          autocomplete="off" />
   <label class="btn" title="View 20 entries per page" for="20">20</label>
   <label class="col-form-label mb-1">|</label>
   <input type="radio"
          class="btn-check option-radio"
-         name="options-group2"
          id="50"
          autocomplete="off" />
   <label class="btn" title="View 50 entries per page" for="50">50</label>
   <label class="col-form-label mb-1">|</label>
   <input type="radio"
          class="btn-check option-radio"
-         name="options-group2"
          id="100"
          autocomplete="off" />
   <label class="btn" title="View 100 entries per page" for="100">100</label>