From b022ebb80ecc9312c87ad775db40bbb63d896c59 Mon Sep 17 00:00:00 2001 From: thomas girod Date: Tue, 23 Jul 2024 19:54:07 +0200 Subject: [PATCH 1/2] 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 From 3f49d707453971d3d5d769db9bb8f50fb6ce5c46 Mon Sep 17 00:00:00 2001 From: thomas girod Date: Sun, 28 Jul 2024 16:39:15 +0200 Subject: [PATCH 2/2] remove pedagogy style from style.scss --- core/static/core/style.scss | 511 ------------------------------------ 1 file changed, 511 deletions(-) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 36d57876..de042bb9 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1465,514 +1465,3 @@ a.ui-button:active, } } } - -/* --------------------------------------pedagogy-----------------------------------*/ - -$pedagogy-blue: #1bb9ea; -$pedagogy-orange: #ea7900; -$pedagogy-hover-blue: #0e97ce; -$pedagogy-light-blue: #caf0ff; -$pedagogy-white-text: #f0f0f0; - -.pedagogy { - #pagination { - text-align: center; - } - - &.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; - } - } - } - } - } - } -}