Merge pull request #136 from DDMAL/ui-fix

UI fix
DDMAL · Jul 24, 2024 · fc6d596 · fc6d596
2 parents 3214b63 + 57a81c6
commit fc6d596
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 15 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
@@ -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>

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -79,18 +79,24 @@ <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"
                       data-bs-toggle="dropdown"
                       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/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/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)

diff --git 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>