From b022ebb80ecc9312c87ad775db40bbb63d896c59 Mon Sep 17 00:00:00 2001 From: thomas girod Date: Tue, 23 Jul 2024 19:54:07 +0200 Subject: [PATCH] improve pagination --- core/static/core/colors.scss | 30 ++ core/static/core/navbar.scss | 4 +- core/static/core/pagination.scss | 37 ++ core/static/core/style.scss | 43 +- pedagogy/static/pedagogy/css/pedagogy.scss | 511 +++++++++++++++++++++ pedagogy/templates/pedagogy/guide.jinja | 262 ++++++----- 6 files changed, 718 insertions(+), 169 deletions(-) create mode 100644 core/static/core/colors.scss create mode 100644 core/static/core/pagination.scss create mode 100644 pedagogy/static/pedagogy/css/pedagogy.scss diff --git a/core/static/core/colors.scss b/core/static/core/colors.scss new file mode 100644 index 00000000..9bb403e0 --- /dev/null +++ b/core/static/core/colors.scss @@ -0,0 +1,30 @@ +$first-color: hsl(220, 100%, 50%); +$second-color: hsl(48, 100%, 67%); +$primary-color: hsl(219.9, 53.7%, 50%); +$secondary-color: hsl(204, 64%, 44%); +$primary-color-text: hsl(0, 0%, 100%); +$secondary-color-text: hsla(0, 0%, 0%, 0.87); + +$primary-light-color: hsl(219.8, 46.4%, 64.9%); +$primary-dark-color: hsl(203, 75%, 40%); + +$secondary-light-color: hsl(40, 68%, 65%); +$secondary-dark-color: hsl(40, 68%, 35%); + +$primary-neutral-color: hsl(219.6, 20.8%, 50%); +$primary-neutral-light-color: hsl(0, 0%, 94%); +$primary-neutral-dark-color: hsl(210, 29%, 29%); + +$secondary-neutral-color: hsl(204, 64%, 44%); +$secondary-neutral-light-color: hsl(0, 0%, 91%); +$secondary-neutral-dark-color: hsl(40, 57.6%, 17%); + +$white-color: hsl(219.6, 20.8%, 98%); +$black-color: hsl(0, 0%, 17%); + +$faceblue: hsl(221, 44%, 41%); +$twitblue: hsl(206, 82%, 63%); + +$shadow-color: rgb(223, 223, 223); + +$background-button-color: hsl(0, 0%, 95%); \ No newline at end of file diff --git a/core/static/core/navbar.scss b/core/static/core/navbar.scss index 5b5e0653..9c9bf4df 100644 --- a/core/static/core/navbar.scss +++ b/core/static/core/navbar.scss @@ -1,5 +1,7 @@ +@import "colors"; + nav.navbar { - background-color: hsl(203, 75%, 40%); + background-color: $primary-dark-color; margin: 1em; color: white; border-radius: 0.6em; diff --git a/core/static/core/pagination.scss b/core/static/core/pagination.scss new file mode 100644 index 00000000..2d3f3a8d --- /dev/null +++ b/core/static/core/pagination.scss @@ -0,0 +1,37 @@ +@import "colors"; + +.pagination { + text-align: center; + gap: 10px; + + button { + background-color: $secondary-neutral-light-color; + min-width: 37px; + + &:hover { + background-color: darken($secondary-neutral-light-color, 10%); + } + + &:disabled { + color: #fff; + background-color: darken($secondary-neutral-light-color, 5%); + } + + &.active, + &.active:hover { + background-color: $primary-neutral-color; + color: white; + border-radius: 50%; + } + + &:first-of-type, + &:last-of-type { + // previous and next buttons + &:disabled { + // Hide the arrows when they are disabled, without + // changing the layout of the navigation + opacity: 0; + } + } + } +} diff --git a/core/static/core/style.scss b/core/static/core/style.scss index f169c88b..36d57876 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1,39 +1,9 @@ -$first-color: hsl(220, 100%, 50%); -$second-color: hsl(48, 100%, 67%); -$primary-color: hsl(219.9, 53.7%, 50%); -$secondary-color: hsl(204, 64%, 44%); -$primary-color-text: hsl(0, 0%, 100%); -$secondary-color-text: hsla(0, 0%, 0%, 0.87); - -$primary-light-color: hsl(219.8, 46.4%, 64.9%); -$primary-dark-color: hsl(203, 75%, 40%); - -$secondary-light-color: hsl(40, 68%, 65%); -$secondary-dark-color: hsl(40, 68%, 35%); - -$primary-neutral-color: hsl(219.6, 20.8%, 50%); -$primary-neutral-light-color: hsl(0, 0%, 94%); -$primary-neutral-dark-color: hsl(210, 29%, 29%); - -$secondary-neutral-color: hsl(204, 64%, 44%); -$secondary-neutral-light-color: hsl(0, 0%, 91%); -$secondary-neutral-dark-color: hsl(40, 57.6%, 17%); - -$white-color: hsl(219.6, 20.8%, 98%); -$black-color: hsl(0, 0%, 17%); - -$faceblue: hsl(221, 44%, 41%); -$twitblue: hsl(206, 82%, 63%); - -$shadow-color: rgb(223, 223, 223); - -$background-button-color: hsl(0, 0%, 95%); +@import "colors"; /*--------------------------MEDIA QUERY HELPERS------------------------*/ $small-devices: 576px; $medium-devices: 768px; $large-devices: 992px; -$extra-large-devices: 1200px; /*--------------------------------GENERAL------------------------------*/ @@ -43,17 +13,6 @@ body { font-family: sans-serif; } -button:disabled, -button:disabled:hover { - color: #fff; - background-color: #6c757d; -} - -button.active, -button.active:hover { - color: #fff; - background-color: $secondary-color; -} a.button, button, diff --git a/pedagogy/static/pedagogy/css/pedagogy.scss b/pedagogy/static/pedagogy/css/pedagogy.scss new file mode 100644 index 00000000..a4ebb370 --- /dev/null +++ b/pedagogy/static/pedagogy/css/pedagogy.scss @@ -0,0 +1,511 @@ +@import "core/static/core/colors"; + + +$pedagogy-blue: #1bb9ea; +$pedagogy-orange: #ea7900; +$pedagogy-hover-blue: #0e97ce; +$pedagogy-light-blue: #caf0ff; +$pedagogy-white-text: #f0f0f0; + +$small-devices: 576px; +$medium-devices: 768px; +$large-devices: 992px; + +.pedagogy { + &.star-not-checked { + color: #f7f7f7; + margin-bottom: 0; + margin-top: 0; + } + &.star-checked { + color: $pedagogy-orange; + margin-bottom: 0; + margin-top: 0; + } + + &.grade-without-star { + display: none; + } + + @media screen and (max-width: $large-devices) { + &.star-not-checked { + margin-left: 5px; + margin-right: 5px; + } + &.star-checked { + margin-left: 5px; + margin-right: 5px; + } + } + + @media screen and (max-width: $small-devices) { + &.grade-without-star { + display: block; + } + &.grade-with-star { + display: none; + } + } + + #dynamic_view { + font-size: 1.1em; + + overflow-wrap: break-word; + + td { + text-align: center; + border: none; + } + } + + #search_form { + .search-form-container { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto auto; + grid-template-areas: + "action-bar action-bar" + "search-bar search-bar" + "radio-department radio-department" + "radio-credit-type radio-semester"; + } + + .action-bar { + grid-area: action-bar; + margin-bottom: 10px; + } + + .search-bar { + grid-area: search-bar; + display: grid; + grid-template-columns: auto 200px; + grid-template-rows: auto; + grid-template-areas: "search-bar-input search-bar-button"; + + @media screen and (max-width: $medium-devices) { + grid-template-columns: auto auto; + grid-template-rows: auto; + grid-template-areas: "search-bar-input search-bar-button"; + } + + @media screen and (max-width: $small-devices) { + grid-template-columns: auto; + grid-template-rows: auto; + grid-template-areas: "search-bar-input"; + + .search-bar-button { + display: none; + } + } + + .search-bar-input { + grid-area: search-bar-input; + background: $pedagogy-light-blue; + } + + .search-bar-button { + grid-area: search-bar-button; + background: $pedagogy-orange; + color: white; + font-weight: bold; + margin-left: 20px; + } + } + + .radio-department { + grid-area: radio-department; + } + + .radio-credit-type { + grid-area: radio-credit-type; + } + + .radio-semester { + grid-area: radio-semester; + } + + .radio-guide input[type="radio"], + input[type="checkbox"] { + display: none; + } + .radio-guide { + margin-top: 10px; + color: white; + } + .radio-guide label { + display: inline-block; + background-color: $pedagogy-blue; + padding: 10px 20px; + font-family: Arial, sans-serif; + font-size: 16px; + border-radius: 4px; + } + .radio-guide input[type="radio"]:checked + label { + background-color: $pedagogy-orange; + } + .radio-guide input[type="checkbox"]:checked + label { + background-color: $pedagogy-orange; + } + .radio-guide label:hover { + background-color: $pedagogy-hover-blue; + } + } + + #uv_detail { + color: #062f38; + + .uv-quick-info-container { + display: grid; + grid-template-columns: 20% 20% 20% 20% auto; + grid-template-rows: auto auto; + grid-template-areas: + "hours-cm hours-td hours-tp hours-te hours-the" + "department credit-type semester . ."; + } + + .department { + grid-area: department; + } + + .credit-type { + grid-area: credit-type; + } + + .semester { + grid-area: semester; + } + + .hours-cm { + grid-area: hours-cm; + } + + .hours-td { + grid-area: hours-td; + } + + .hours-tp { + grid-area: hours-tp; + } + + .hours-te { + grid-area: hours-te; + } + + .hours-the { + grid-area: hours-the; + } + + #leave_comment_not_allowed { + p { + text-align: center; + color: red; + } + } + + #leave_comment { + .leave-comment-grid-container { + display: grid; + grid-template-columns: 270px auto; + grid-template-rows: 100%; + grid-template-areas: "stars comment"; + + @media screen and (max-width: $large-devices) { + grid-template-columns: 100%; + grid-template-rows: auto auto; + grid-template-areas: + "stars" + "comment"; + } + } + + .ui-accordion-content { + background-color: $white-color; + border-color: $pedagogy-orange; + border-right: none; + } + + .form-stars { + grid-area: stars; + } + + .form-comment { + grid-area: comment; + } + + .ui-accordion-header { + background-color: $pedagogy-orange; + color: $pedagogy-white-text; + clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0); + + @media screen and (max-width: $large-devices) { + clip-path: none; + } + } + + .ui-accordion-header-icon { + color: $pedagogy-white-text; + margin-right: 10px; + } + + .input-stars { + margin-top: 20px; + } + + input[type="submit"] { + float: right; + } + } + + .uv-details-container { + display: grid; + grid-template-columns: 150px 100px auto; + grid-template-rows: 156px 1fr; + grid-template-areas: + "grade grade-stars uv-infos" + ". . uv-infos"; + + @media screen and (max-width: $large-devices) { + grid-template-columns: 50% 50%; + grid-template-rows: auto auto; + grid-template-areas: + "grade grade-stars" + "uv-infos uv-infos"; + } + } + + .grade { + grid-area: grade; + color: $pedagogy-white-text; + background-color: $pedagogy-blue; + padding-right: 10px; + + > p { + text-align: right; + font-weight: bold; + } + } + + .grade-stars { + grid-area: grade-stars; + color: $pedagogy-white-text; + background-color: $pedagogy-blue; + font-weight: bold; + } + + .uv-infos { + grid-area: uv-infos; + padding-left: 10px; + } + + .comment-container { + display: grid; + grid-template-columns: 300px auto; + grid-template-rows: auto auto auto; + grid-template-areas: + "grade-block comment" + "grade-block info" + "comment-end-bar comment-end-bar"; + margin-bottom: 30px; + margin-top: 10px; + + @media screen and (max-width: $large-devices) { + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; + grid-template-areas: + "grade-block" + "comment" + "info" + "comment-end-bar"; + } + + .grade-block { + grid-area: grade-block; + width: 300px; + + display: grid; + grid-template-columns: 150px 150px; + grid-template-rows: 156px auto; + grid-template-areas: + "grade-type grade-stars" + "grade-extension grade-extension"; + grid-gap: 15px; + + clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0); + align-items: start; + + background-color: $pedagogy-blue; + + @media screen and (max-width: $large-devices) { + grid-template-columns: 50% auto; + grid-template-rows: auto; + grid-template-areas: "grade-type grade-stars"; + width: auto; + clip-path: none; + align-content: space-evenly; + align-items: end; + } + + .grade-extension { + grid-area: grade-extension; + background-color: $pedagogy-blue; + } + + .grade-type { + grid-area: grade-type; + + > p { + color: $pedagogy-white-text; + font-weight: bold; + text-align: right; + } + } + + .grade-stars { + grid-area: grade-stars; + } + } + + .comment { + grid-area: comment; + + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto; + grid-template-areas: + "anchor" + "markdown"; + + @media screen and (max-width: $large-devices) { + border-left: solid; + border-right: solid; + border-color: $pedagogy-blue; + } + + .anchor { + grid-area: anchor; + text-align: right; + margin-right: 15px; + } + + .markdown { + grid-area: markdown; + + min-height: 139px; + margin-top: 0; + margin-right: 0; + padding: 10px; + text-align: justify; + overflow: auto; + } + } + + .info { + grid-area: info; + padding-bottom: 10px; + + @media screen and (max-width: $large-devices) { + border-left: solid; + border-right: solid; + border-color: $pedagogy-blue; + } + + .status-reported { + color: red; + float: left; + padding-left: 10px; + } + + .actions { + float: right; + } + } + + .comment-end-bar { + grid-area: comment-end-bar; + + display: grid; + grid-template-columns: 33% auto auto; + grid-template-rows: 2.5em; + grid-template-areas: "author date report"; + + background-color: $pedagogy-blue; + margin-top: -1px; + + @media screen and (max-width: $large-devices) { + grid-template-columns: auto; + grid-template-rows: auto auto auto; + grid-template-areas: + "report" + "date" + "author"; + margin-top: 0; + text-align: center; + } + + .author { + grid-area: author; + + padding-top: 6px; + padding-left: 20px; + + background-color: $pedagogy-orange; + clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px); + + @media screen and (max-width: $large-devices) { + clip-path: none; + padding: 0; + padding-bottom: 7px; + } + + a { + color: $pedagogy-white-text; + font-weight: bold; + } + + a:hover { + color: $pedagogy-hover-blue; + } + } + + .date { + grid-area: date; + color: $pedagogy-white-text; + + @media screen and (max-width: $large-devices) { + padding-bottom: 7px; + } + } + + .report { + grid-area: report; + justify-self: right; + padding-right: 30px; + padding-left: 30px; + + a { + color: $pedagogy-white-text; + } + + a:hover { + color: $pedagogy-hover-blue; + } + + @media screen and (max-width: $large-devices) { + text-align: center; + justify-self: inherit; + padding-bottom: 7px; + background-color: $white-color; + + border-left: solid; + border-right: solid; + border-color: $pedagogy-blue; + + a { + color: $black-color; + } + } + } + } + } + } +} diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja index a726444f..b552de4e 100644 --- a/pedagogy/templates/pedagogy/guide.jinja +++ b/pedagogy/templates/pedagogy/guide.jinja @@ -1,4 +1,3 @@ - {% extends "core/base.jinja" %} {% block title %} @@ -9,6 +8,11 @@ {% endblock %} +{% block additional_css %} + + +{% endblock %} + {% block head %} {{ super() }} @@ -40,101 +44,107 @@
- {% for (display_name, real_name) in [ + {% set departments = [ ("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC") ] %} - - -{% endfor %} -
-
-
-
- {% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %} - - - {% endfor %} -
-
+ {% for (display_name, real_name) in departments %} + + + {% endfor %} + + +
+
+ {% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %} + + + {% endfor %} +
+
-
-
- - - - +
+
+ + + + +
+
+
+ + + + + + + + + + + {% if can_create_uv %} + + + {% endif %} + + + + + +
{% trans %}UV{% endtrans %}{% trans %}Title{% endtrans %}{% trans %}Department{% endtrans %}{% trans %}Credit type{% endtrans %}{% trans %}Edit{% endtrans %}{% trans %}Delete{% endtrans %}
+
- - - - - - - - - - - - - {% if can_create_uv %} - - - {% endif %} - - - - - -
{% trans %}UV{% endtrans %}{% trans %}Title{% endtrans %}{% trans %}Department{% endtrans %}{% trans %}Credit type{% endtrans %}{% trans %}Edit{% endtrans %}{% trans %}Delete{% endtrans %}
- - - + max_page() { + return Math.ceil(this.uvs.count / this.page_size); + } + })) + }) + {% endblock content %} \ No newline at end of file