Fix Borders in Navbar-Button-Switches (e-valuation#2070)

* remove border & border-radius from .btn in .btn-switch-navbar. Use clipping instead * .btn-navbar is scoped to .btn-switch-navbar, using btn instead to improve readability
Kakadus · Dec 4, 2023 · f983e22 · f983e22
1 parent 18f9194
commit f983e22
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 17 deletions.
diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html
@@ -92,7 +92,7 @@
                             {% csrf_token %}
                             <input name="language" type="hidden" value="{{ language_code }}">
                             <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ language_name }}" type="submit" onclick="setSpinnerIcon('span-set-language-{{ language_code }}')"
-                                class="btn btn-sm btn-navbar{% if current_language == language_code %} active{% endif %}">
+                                class="btn btn-sm{% if current_language == language_code %} active{% endif %}">
                                 <span id="span-set-language-{{ language_code }}">{{ language_code|upper }}</span>
                             </button>
                         </form>
@@ -105,13 +105,13 @@
                         <div class="btn-group">
                             <form class="d-flex" method="post" action="{% url 'staff:exit_staff_mode' %}">
                                 {% csrf_token %}
-                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Regular mode' %}" type="submit" class="btn btn-sm btn-navbar {% if user.is_staff == False %}active{% endif %}" onclick="setSpinnerIcon('span-exit-staff-mode')">
+                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Regular mode' %}" type="submit" class="btn btn-sm {% if user.is_staff == False %}active{% endif %}" onclick="setSpinnerIcon('span-exit-staff-mode')">
                                     <span id="span-exit-staff-mode" class="fas fa-user"></span>
                                 </button>
                             </form>
                             <form id="enter-staff-mode-form" class="d-flex" method="post" action="{% url 'staff:enter_staff_mode' %}">
                                 {% csrf_token %}
-                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Staff mode' %}" type="submit" class="btn btn-sm btn-navbar {% if user.is_staff %}active{% endif %}" onclick="setSpinnerIcon('span-enter-staff-mode')">
+                                <button data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans 'Staff mode' %}" type="submit" class="btn btn-sm {% if user.is_staff %}active{% endif %}" onclick="setSpinnerIcon('span-enter-staff-mode')">
                                     <span id="span-enter-staff-mode" class="fas fa-briefcase"></span>
                                 </button>
                             </form>

diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss
@@ -77,16 +77,6 @@ body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top {
     }
 }
 
-// make buttons in btn-groups usable in forms
-.btn-switch-navbar .btn-group > :not(:last-child) > .btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-.btn-switch-navbar .btn-group > :not(:first-child) > .btn {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
 // remove horizontal line after "add another" in formsets
 .dynamic-form-add td {
     border-bottom: none;

diff --git a/evap/static/scss/components/_buttons.scss b/evap/static/scss/components/_buttons.scss
@@ -110,16 +110,17 @@ a:not([href]):not(.disabled) {
     .btn-group {
         border: $darker-gray 1px solid;
         border-radius: 0.2rem;
+        overflow: hidden;
 
-        .btn-navbar {
+        .btn {
+            border: none;
+            border-radius: 0;
             padding: 0 0.25rem;
             background-color: tint-color($darker-gray, 10%);
-            border-width: 0;
             color: $light-gray;
             transition: none;
             min-width: 28px;
             margin-left: 0;
-            border-radius: 0.15rem;
 
             &:hover {
                 background-color: tint-color($darker-gray, 20%);
@@ -129,7 +130,6 @@ a:not([href]):not(.disabled) {
             &.active {
                 background-color: tint-color($darker-gray, 10%);
                 color: $medium-gray;
-                border-width: 0;
                 box-shadow: inset 0 0 10px shade-color($darker-gray, 40%);
                 opacity: 1;
             }