diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html index c1e3309182..76dd0f3fee 100644 --- a/evap/evaluation/templates/base.html +++ b/evap/evaluation/templates/base.html @@ -24,6 +24,7 @@ {% endif %} {% endblock %} + diff --git a/evap/evaluation/templates/navbar.html b/evap/evaluation/templates/navbar.html index 58589f4053..43a7855d95 100644 --- a/evap/evaluation/templates/navbar.html +++ b/evap/evaluation/templates/navbar.html @@ -130,6 +130,16 @@ {% endif %} +
  • + + + +
    + + + +
    +
    • diff --git a/evap/evaluation/templatetags/evaluation_filters.py b/evap/evaluation/templatetags/evaluation_filters.py index a48563982a..2ef84a5965 100644 --- a/evap/evaluation/templatetags/evaluation_filters.py +++ b/evap/evaluation/templatetags/evaluation_filters.py @@ -48,7 +48,7 @@ APPROVAL_STATES = { Evaluation.State.NEW: StateValues( 0, - "fas fa-circle icon-blue", + "fas fa-circle icon-primary", Evaluation.State.NEW, _("In preparation"), ), @@ -60,12 +60,12 @@ ), Evaluation.State.EDITOR_APPROVED: StateValues( 1, - "far fa-square-check icon-blue", + "far fa-square-check icon-primary", Evaluation.State.EDITOR_APPROVED, _("Approved by editor, awaiting manager review"), ), Evaluation.State.APPROVED: StateValues( - 3, "far fa-square-check icon-green", Evaluation.State.APPROVED, _("Approved by manager") + 3, "far fa-square-check icon-success", Evaluation.State.APPROVED, _("Approved by manager") ), } diff --git a/evap/results/templates/results_index_evaluation_impl.html b/evap/results/templates/results_index_evaluation_impl.html index 34803f662c..2832a30e5d 100644 --- a/evap/results/templates/results_index_evaluation_impl.html +++ b/evap/results/templates/results_index_evaluation_impl.html @@ -29,12 +29,12 @@ {% if evaluation.state == evaluation.State.IN_EVALUATION %} {% elif evaluation.state == evaluation.State.EVALUATED %} - + {% elif evaluation.state == evaluation.State.REVIEWED %} {% if evaluation.grading_process_is_finished %} - + {% else %} - + {% endif %} {% endif %} diff --git a/evap/staff/templates/staff_evaluation_textanswers.html b/evap/staff/templates/staff_evaluation_textanswers.html index 1df6cf722c..a099cd82ad 100644 --- a/evap/staff/templates/staff_evaluation_textanswers.html +++ b/evap/staff/templates/staff_evaluation_textanswers.html @@ -54,7 +54,7 @@

    {{ evaluation.full_name }} ({{ evaluation.course.semester.name {% if evaluation.state == evaluation.State.IN_EVALUATION %} {% translate 'Still in evaluation' %} {% else %} - {% translate 'Evaluation finished' %} + {% translate 'Evaluation finished' %} {% endif %} {% include 'evaluation_badges.html' with mode='manager' %} diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html index c3787d2217..f3ece4b36c 100644 --- a/evap/staff/templates/staff_semester_view.html +++ b/evap/staff/templates/staff_semester_view.html @@ -321,7 +321,7 @@

    {{ semester.name }}

    @@ -333,17 +333,17 @@

    {{ semester.name }}

    @@ -355,17 +355,17 @@

    {{ semester.name }}

    @@ -458,13 +458,13 @@

    {{ semester.name }}

    diff --git a/evap/staff/templates/staff_semester_view_evaluation.html b/evap/staff/templates/staff_semester_view_evaluation.html index f6dfc312a8..580f3bc41d 100644 --- a/evap/staff/templates/staff_semester_view_evaluation.html +++ b/evap/staff/templates/staff_semester_view_evaluation.html @@ -33,7 +33,7 @@ {% elif state >= evaluation.State.EVALUATED %} - + {% endif %} @@ -43,15 +43,15 @@ {% elif evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.REVIEW_URGENT %} - + {% elif evaluation.textanswer_review_state == evaluation.TextAnswerReviewState.REVIEW_NEEDED %} - + {% else %} - + {% endif %} @@ -62,16 +62,16 @@ {% elif state == evaluation.State.REVIEWED %} {% if evaluation.grading_process_is_finished %} - + {% else %} - + {% endif %} {% elif state == evaluation.State.PUBLISHED %} - + {% endif %} diff --git a/evap/static/images/triangles_dark_gray.svg b/evap/static/images/triangles_dark_gray.svg new file mode 100644 index 0000000000..8cbf2cbba4 --- /dev/null +++ b/evap/static/images/triangles_dark_gray.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss index e468fd6053..75383a48f0 100644 --- a/evap/static/scss/_adjustments.scss +++ b/evap/static/scss/_adjustments.scss @@ -84,11 +84,11 @@ body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top { // explicitely set alert colors $alert-colors: ( - "secondary" $light-gray $medium-gray, - "success" $evap-light-green $evap-green, - "info" $evap-light-blue $evap-dark-blue, - "warning" $evap-light-yellow $evap-yellow, - "danger" $evap-light-red $evap-red, + "secondary" $secondary-accent $secondary, + "success" $success-accent $success, + "info" $info $info-accent, + "warning" $warning-accent $warning, + "danger" $danger-accent $danger, "light" $lighter-gray $light-gray, "dark" $dark-gray $darker-gray ); @@ -100,9 +100,9 @@ $alert-colors: ( } } .alert-primary { - background-color: tint-color($evap-dark-blue, 50%); - border-color: $evap-dark-blue; - color: shade-color($evap-dark-blue, 50%); + background-color: tint-color($primary, 50%); + border-color: $primary; + color: shade-color($primary, 50%); } // fix checkbox positions @@ -124,6 +124,16 @@ $alert-colors: ( } } +@include color-mode(dark) { + .bootstrap-datetimepicker-widget { + td.day:hover, td.dow:hover, td span:hover, th:hover { + color: $black !important; + background-color: $light-gray !important; + } + } +} + + // tomselect adjustments .ts-wrapper.multi .ts-control > div.active { background-color: $component-active-bg; @@ -138,6 +148,32 @@ $alert-colors: ( border: 0; } +@include color-mode(dark) { + .ts-control, .ts-dropdown, .ts-wrapper.single.input-active .ts-control { + background-color: $background-dark; + color: $light-gray; + border-color: $darker-gray; + + .option:hover { + background-color: $light-gray; + color: $black; + } + input { + color: $light-gray; + } + } + .ts-wrapper.multi { + .item { + background-color: $darker-gray !important; + color: $light-gray; + } + } + .ts-wrapper.plugin-remove_button .item .remove { + border-left: none; + } +} + + // Change .btn-group outlined border style to fix double borders with outlined button style // see https://github.com/twbs/bootstrap/issues/25888 .btn-group.outline-fix { @@ -181,3 +217,13 @@ input[type="search"]::-webkit-search-cancel-button { background-color: $light-gray; } } + +.distribution-bar-container { + background-color: transparent; +} + +@include color-mode(dark) { + #evaluation-table { + border-color: $darker-gray; + } +} \ No newline at end of file diff --git a/evap/static/scss/_colors.scss b/evap/static/scss/_colors.scss index cbe50af2d7..9bdb89f0b0 100644 --- a/evap/static/scss/_colors.scss +++ b/evap/static/scss/_colors.scss @@ -4,12 +4,6 @@ $evap-yellow: #efe258; $evap-orange: #f29e58; $evap-red: #eb595a; -$evap-dark-green: shade-color($evap-green, 20%); -$evap-dark-lime: shade-color($evap-lime, 20%); -$evap-dark-yellow: shade-color($evap-yellow, 20%); -$evap-dark-orange: shade-color($evap-orange, 20%); -$evap-dark-red: shade-color($evap-red, 20%); - $evap-light-green: tint-color($evap-green, 60%); $evap-light-lime: tint-color($evap-lime, 60%); $evap-light-yellow: tint-color($evap-yellow, 60%); @@ -27,12 +21,21 @@ $dark-gray: #868e96; $darker-gray: #495057; $black: #000000; +$background-accent-dark: #101113; +$background-dark: tint-color($background-accent-dark, 5%);; + $primary: $evap-dark-blue; +$primary-accent: $evap-light-blue; $secondary: $dark-gray; +$secondary-accent: $light-gray; $success: $evap-green; +$success-accent: $evap-light-green; $info: $evap-light-blue; +$info-accent: $evap-dark-blue; $warning: $evap-yellow; +$warning-accent: $evap-light-yellow; $danger: $evap-red; +$danger-accent: $evap-light-red; $light: $lighter-gray; $dark: $darker-gray; diff --git a/evap/static/scss/_utilities.scss b/evap/static/scss/_utilities.scss index c315b2fcc2..5fd06a4683 100644 --- a/evap/static/scss/_utilities.scss +++ b/evap/static/scss/_utilities.scss @@ -1,9 +1,9 @@ .warning-label { - color: $evap-dark-yellow; + color: $warning; } .error-label { - color: $evap-dark-red; + color: $danger; } .light-link { @@ -19,16 +19,16 @@ color: $medium-gray !important; } -.icon-red { - color: $evap-red !important; +.icon-danger { + color: $danger !important; } -.icon-blue { - color: $evap-dark-blue !important; +.icon-primary { + color: $primary !important; } -.icon-green { - color: $evap-green !important; +.icon-success { + color: $success !important; } a.no-underline:hover { @@ -65,10 +65,10 @@ a.no-underline:hover { .bg-debug { background: repeating-linear-gradient( 118deg, - tint-color($darker-gray, 12%), - tint-color($darker-gray, 12%) 3.5em, - $darker-gray 3.5em, - $darker-gray 7em + tint-color($dark, 12%), + tint-color($dark, 12%) 3.5em, + $dark 3.5em, + $dark 7em ); } diff --git a/evap/static/scss/_variables.scss b/evap/static/scss/_variables.scss index af318070de..43446d45b0 100644 --- a/evap/static/scss/_variables.scss +++ b/evap/static/scss/_variables.scss @@ -33,20 +33,21 @@ $border-radius-lg: .3rem !default; $border-radius-xl: .75rem !default; $border-radius-2xl: 1.5rem !default; +$body-bg-dark: $background-dark; $border-color: $medium-gray; $headings-margin-bottom: 1rem; $table-accent-bg: transparent; -$table-striped-bg: tint-color($light-gray, 50%); -$table-border-color: $light-gray; +//$table-striped-bg: tint-color($light-gray, 50%); +$table-border-color: $medium-gray; $table-group-separator-color: $medium-gray; -$card-cap-bg: $table-striped-bg; +//$card-cap-bg: $table-striped-bg; $accordion-border-width: 0; -$accordion-button-active-bg: $evap-light-blue; -$accordion-button-active-color: $evap-dark-blue; +$accordion-button-active-bg: $primary-accent; +$accordion-button-active-color: $primary; $accordion-icon-transform: rotate(90deg); $accordion-button-icon: url("data:image/svg+xml,"); $accordion-button-active-icon: url("data:image/svg+xml,"); @@ -58,6 +59,7 @@ $order-button-down-icon: url("data:image/svg+xml, { + "use strict"; + + const storedTheme = localStorage.getItem("theme"); + + const getPreferredTheme = () => { + if (storedTheme) { + return storedTheme; + } + + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }; + + const setTheme = function (theme: string) { + document.documentElement.setAttribute("data-bs-theme", theme); + }; + + setTheme(getPreferredTheme()); + + const showActiveTheme = (theme: string) => { + const btnToActive = unwrap(document.querySelector(`[data-bs-theme-value="${theme}"]`)); + + document.querySelectorAll("[data-bs-theme-value]").forEach(element => { + element.classList.remove("active"); + }); + + btnToActive.classList.add("active"); + }; + + window.addEventListener("DOMContentLoaded", () => { + showActiveTheme(getPreferredTheme()); + + document.querySelectorAll("[data-bs-theme-value]").forEach(toggle => { + toggle.addEventListener("click", () => { + const theme = unwrap(toggle.getAttribute("data-bs-theme-value")); + localStorage.setItem("theme", theme); + setTheme(theme); + showActiveTheme(theme); + }); + }); + }); +})();