fix styling

evap/development/templates/development_components.html

@@ -12,13 +12,13 @@
 
 {% block content %}
     <div class="mb-3">
-        <div class="card">
+        <div class="card mb-2">
             <div class="card-header">
                 Card
             </div>
             <div class="card-body"></div>
         </div>
-        <div class="card card-outline-primary">
+        <div class="card card-outline-primary mb-2">
             <div class="card-header">
                 Outline Primary
             </div>
@@ -56,7 +56,9 @@
                 {% endfor %}
             </div>
             <div class="row mb-2">
-                <div class="col"></div>
+                <div class="col">
+                    <div class="badge bg-primary-outline">Primary Outline</div>
+                </div>
                 <div class="col">
                     <div class="badge bg-secondary-outline">Secondary Outline</div>
                 </div>
@@ -367,9 +369,15 @@
             Bars
         </div>
         <div class="card-body">
-            {% include 'progress_bar.html' with done=6 total=12 %}
-            {% include 'progress_bar.html' with done=7 total=7 icon='user' %}
-            {% include 'progress_bar.html' with done=1 total=8 warning=True %}
+            <div class="mb-3">
+                {% include 'progress_bar.html' with done=6 total=12 %}
+            </div>
+            <div class="mb-3">
+                {% include 'progress_bar.html' with done=7 total=7 icon='user' %}
+            </div>
+            <div>
+                {% include 'progress_bar.html' with done=1 total=8 warning=True %}
+            </div>
         </div>
     </div>
     <div class="card mb-3">
@@ -464,7 +472,7 @@ <h6>Special rows</h6>
                     </tr>
                 </tbody>
             </table>
-            <h6>Link table</h6>
+            <h6 class="mt-3">Link table</h6>
             <table class="table table-seamless-links vertically-aligned">
                 <thead>
                     <tr>

evap/evaluation/templates/footer.html

@@ -6,7 +6,7 @@
         <div class="vote-bg-orange" style="width: 6%;"></div>
         <div class="vote-bg-red" style="width: 3%;"></div>
     </div>
-    <nav class="navbar navbar-dark bg-dark navbar-expand">
+    <nav class="navbar navbar-expand">
         <div class="collapse navbar-collapse justify-content-between">
             <ul class="navbar-nav justify-content-start">
                 <li class="nav-item my-auto">

evap/evaluation/templates/navbar.html

@@ -1,7 +1,7 @@
 {% load static %}
 {% load evaluation_filters %}
 
-<nav class="navbar navbar-dark {% if debug %}bg-debug{% else %}bg-dark{% endif %} {% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %}navbar-expand-xl{% else %}navbar-expand-lg{% endif %} ps-0">
+<nav class="navbar {% if debug %}bg-debug {% endif %}{% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %}navbar-expand-xl{% else %}navbar-expand-lg{% endif %} ps-0">
     <a class="d-block
         {% if user.is_participant and user.is_responsible_or_contributor_or_delegate or user.is_reviewer %}
             d-xl-none

evap/evaluation/templates/sortable_form_js.html

@@ -16,8 +16,8 @@
 
         $('#' + tableId + ' tbody tr').formset({
             prefix: prefix,
-            deleteCssClass: removeAsButton ? 'btn btn-danger btn-sm fas fa-trash' : 'delete-row',
-            deleteText: removeAsButton ? '' : '{% trans 'Delete' %}',
+            deleteCssClass: removeAsButton ? 'btn btn-danger btn-sm' : 'delete-row',
+            deleteText: removeAsButton ? '<span class="fas fa-trash"></span>' : '{% trans 'Delete' %}',
             addText: '{% trans 'add another' %}',
             added: function(row) {
                 row.find('input[id$=-order]').val(row.parent().children().length);

evap/staff/templates/staff_evaluation_person_management.html

@@ -115,10 +115,12 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
                         <p class="card-text">{% trans 'This will create a CSV file containing login keys for all external participants.' %}</p>
                     </div>
                     <div class="card-footer text-center">
-                        <button name="operation" value="export-login-keys" type="submit" class="btn btn-sm btn-primary form-submit-btn"
-                        {% if not evaluation.has_external_participant %} disabled data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans "This evaluation has no external participants." %}"{% endif %}>
-                            {% trans 'Export login keys' %}
-                        </button>
+                        <div{% if not evaluation.has_external_participant %} data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans "This evaluation has no external participants." %}"{% endif %}>
+                            <button name="operation" value="export-login-keys" type="submit" class="btn btn-sm btn-primary form-submit-btn"
+                            {% if not evaluation.has_external_participant %} disabled{% endif %}>
+                                {% trans 'Export login keys' %}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </form>

evap/static/scss/_adjustments.scss

@@ -9,6 +9,8 @@ body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top {
 // make collapsed card have no double bottom border
 // (bootstrap bug: https://github.com/twbs/bootstrap/issues/27108)
 .collapsible {
+    overflow: hidden;  // don't let background color overflow rounded border
+
     .card-header {
         border-bottom: none;
     }

evap/static/scss/_variables.scss

@@ -25,6 +25,12 @@ $container-max-widths: (
     xxl: 1320px
 );
 
+$border-radius:               .25rem !default;
+$border-radius-sm:            .2rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-xl:            .75rem !default;
+$border-radius-2xl:           1.5rem !default;
+
 $border-color: $medium-gray;
 
 $headings-margin-bottom: 1rem;
@@ -54,14 +60,13 @@ $btn-disabled-opacity: 0.45;
 
 $dropdown-padding-y: 0.25rem;
 $dropdown-link-hover-bg: $light-gray;
-$dropdown-link-active-bg: $dark-gray;
 $dropdown-item-padding-y: 0.15rem;
 $dropdown-item-padding-x: 1rem;
 
 $navbar-toggler-padding-y: 0;
 $navbar-toggler-padding-x: 0;
-$navbar-dark-color: $light-gray;
-$navbar-dark-hover-color: $white;
+$navbar-light-color: $light-gray;
+$navbar-light-hover-color: $white;
 
 $tooltip-max-width: 260px;
 $tooltip-opacity: 1;
@@ -76,3 +81,8 @@ $link-decoration: none;
 $link-hover-decoration: underline;
 
 $small-font-size: 0.8rem;
+
+$breadcrumb-divider-color: $medium-gray;
+
+$input-btn-focus-width: .25rem;
+$input-btn-focus-color-opacity: .25;

evap/static/scss/components/_badge.scss

@@ -64,12 +64,12 @@
     background-color: $white;
     color: $evap-dark-blue;
     border: 1px solid $evap-dark-blue;
-    padding: 0.16em 0.35em;
+    padding: 0.27em 0.35em;
 }
 
 .bg-secondary-outline {
     background-color: $white;
     color: $secondary;
     border: 1px solid $secondary;
-    padding: 0.16em 0.35em;
+    padding: 0.27em 0.35em;
 }

evap/static/scss/components/_buttons.scss

@@ -8,8 +8,7 @@
 .btn-light {
     border-color: $medium-gray;
 }
-.btn-light:focus,
-.btn-light.focus {
+.btn-light:focus-visible {
     box-shadow: 0 0 0 $btn-focus-width rgba($dark-gray, 0.5);
 }
 .btn-light.active,
@@ -30,7 +29,7 @@
 .btn-light:not(:disabled):not(.disabled).active {
     border-color: $dark-gray;
 
-    &:focus {
+    &:focus-visible {
         box-shadow: inset 0 0 5px $dark-gray, 0 0 0 $btn-focus-width rgba($dark-gray, 0.5);
     }
 }
@@ -122,10 +121,6 @@ a:not([href]):not(.disabled) {
                 color: $white;
             }
 
-            &:focus {
-                box-shadow: none;
-            }
-
             &.active {
                 background-color: tint-color($darker-gray, 10%);
                 color: $medium-gray;
@@ -159,23 +154,21 @@ a:not([href]):not(.disabled) {
     max-width: 16em;
 }
 
-.vote-btn {
+.btn.vote-btn {
     width: 6rem;
     height: 2.5rem;
     padding: 0.25rem;
     font-size: 0.85rem;
     white-space: normal;
     line-height: 1rem;
-    border-color: $medium-gray;
+    border-color: $medium-gray !important;
 
     &:last-child {
         width: 3.5rem;
     }
 
-    &.focus,
-    &:focus {
-        outline: none;
-        box-shadow: 0 0 0 0.2rem rgba($evap-dark-blue, 0.5);
+    .btn-check:focus-visible + & {
+        box-shadow: 0 0 0 $input-btn-focus-width rgba($evap-dark-blue, 0.25);
     }
 
     .vote-type-bipolar &:not(:last-child) {
@@ -187,10 +180,9 @@ a:not([href]):not(.disabled) {
 textarea,
 button,
 a.collapse-toggle {
-    &.tab-selectable.focus,
-    &.tab-selectable:focus {
+    &.tab-selectable:focus-visible {
         outline: none;
-        box-shadow: 0 0 0 0.2rem rgba($evap-dark-blue, 0.5);
+        box-shadow: 0 0 0 $input-btn-focus-width rgba($evap-dark-blue, 0.25);
     }
 }
 
@@ -208,22 +200,27 @@ a.collapse-toggle {
 
 .vote-btn-text {
     position: relative;
-    top: -1px;
+    top: -1.2px;
 }
 
 @each $name, $color in $vote-colors {
-    .vote-btn-#{$name} {
+    .btn.vote-btn-#{$name} {
         background-color: $lighter-gray;
         color: shade-color($color, 40%);
 
         &:hover {
-            background-color: change-color($color, $lightness: 85%);
+            background-color: tint-color($color, 60%);
+            color: shade-color($color, 40%);
         }
     }
 
     .btn-check:checked + .vote-btn-#{$name} {
         background-color: $color;
-        color: change-color($color, $lightness: 30%);
+        color: shade-color($color, 60%);
+
+        &:hover {
+            background-color: tint-color($color, 30%);
+        }
     }
 }
 
@@ -258,7 +255,7 @@ a.collapse-toggle {
 
     box-shadow: inset 0 0 10px $dark-gray;
 
-    &:focus {
+    &:focus-visible {
         box-shadow: $btn-focus-box-shadow, inset 0 0 10px $dark-gray;
     }
 

evap/static/scss/components/_distribution-bar.scss

@@ -36,10 +36,18 @@
 
     .left {
         left: $distance;
+
+        .pole-icon {
+            vertical-align: -0.15rem;
+        }
     }
 
     .right {
         right: $distance;
+
+        .pole-icon {
+            vertical-align: -0.25rem;
+        }
     }
 
     .pole-icon {

evap/static/scss/components/_grid.scss

@@ -63,7 +63,7 @@
 }
 
 #results-grid > :not(:first-child) {
-    border-top: 2 * $table-border-width solid $table-border-color;
+    border-top: calc(2 * $table-border-width) solid $table-border-color;
 
     @include media-breakpoint-up(lg) {
         border-top-width: $table-border-width;

evap/static/scss/components/_nav.scss

@@ -1,6 +1,7 @@
 .navbar {
     padding: 0 1rem;
     -webkit-font-smoothing: subpixel-antialiased;
+    background-color: $darker-gray;
 }
 
 .navbar-nav .nav-link,

evap/student/templates/student_vote_questionnaire_group.html

@@ -39,7 +39,7 @@ <h4 class="{% if not forloop.first %} mt-3 {% elif contributor %} me-auto {% end
                                 </span>
                                 {% if allows_textanswer %}
                                     <span class="my-auto" data-bs-toggle="tooltip" data-container=".col-question" title="{% trans 'Add a text answer to this question' %}">
-                                        <button type="button" class="btn btn-textanswer collapsed" data-bs-toggle="collapse" data-bs-target=".collapse-{{ field.name }}" tabindex="-1">
+                                        <button type="button" class="btn btn-light btn-textanswer collapsed" data-bs-toggle="collapse" data-bs-target=".collapse-{{ field.name }}" tabindex="-1">
                                             <span class="far fa-comment"></span>
                                         </button>
                                     </span>
@@ -60,7 +60,7 @@ <h4 class="{% if not forloop.first %} mt-3 {% elif contributor %} me-auto {% end
                                 <div class="vote-inputs tab-row {{ field.field.widget.attrs.choices.css_class }} btn-group" data-bs-toggle="buttons">
                                 {% for choice, color in field|zip:field.field.widget.attrs.choices.colors %}
                                     <input id="{{ choice.id_for_label }}" class="tab-selectable num-selectable btn-check" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" autocomplete="off"{% if field.value == choice.data.value %} checked{% endif %}{% if preview %} disabled{% endif %}/>
-                                    <label for="{{ choice.id_for_label }}" class="btn btn-sm vote-btn vote-btn-{{ color }} d-flex{% if field.value == choice.data.value %} active{% endif %}{% if field.errors %} choice-error{% endif %}">
+                                    <label for="{{ choice.id_for_label }}" class="btn btn-sm btn-light vote-btn vote-btn-{{ color }} d-flex{% if field.value == choice.data.value %} active{% endif %}{% if field.errors %} choice-error{% endif %}">
                                         <span class="m-auto vote-btn-text">{{ choice.choice_label|linebreaksbr }} {{ choice.id }}</span>
                                     </label>
                                 {% endfor %}