From 3bff09b04c0710da6fd94a03800fe2b804177a5b Mon Sep 17 00:00:00 2001 From: Bartuccio Antoine Date: Sun, 7 Jul 2019 16:33:03 +0200 Subject: [PATCH] pedagogy: correctly display uv infos --- core/static/core/style.scss | 83 +++++++++++++++++---- pedagogy/templates/pedagogy/uv_detail.jinja | 39 +++++++--- 2 files changed, 96 insertions(+), 26 deletions(-) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index daec3c62..286141a8 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -30,6 +30,12 @@ $shadow-color: rgb(223, 223, 223); $background-bouton-color: hsl(0, 0%, 90%); +/*--------------------------MEDIA QUERY HELPERS------------------------*/ +$small-devices: 576px; +$medium-devices: 768px; +$large-devices: 992px; +$extra-large-devices: 1200px; + /*--------------------------------GENERAL------------------------------*/ body { @@ -1670,6 +1676,10 @@ label { /* --------------------------------------pedagogy-----------------------------------*/ +$pedagogy-blue: #1bb9ea; +$pedagogy-light-blue: #caf0ff; +$pedagogy-white-text: #f0f0f0; + .pedagogy { &.star_not_checked { color : #f7f7f7; @@ -1680,7 +1690,7 @@ label { &.stars_grade { display: none; } - @media screen and (max-width: 992px) { + @media screen and (max-width: $large-devices) { &.stars_grade { display: block; } @@ -1698,7 +1708,7 @@ label { width: 100%; .input_search { - background: #caf0ff; + background: $pedagogy-light-blue; width: 300px; height: 21px; } @@ -1709,7 +1719,7 @@ label { margin-left: 20px; } .radio_guide input[type="radio"],input[type="checkbox"] { - display:none; + display:none; } .radio_guide { margin-top: 10px; @@ -1717,16 +1727,16 @@ label { } .radio_guide label { display:inline-block; - background-color:#1bb9ea; + background-color: $pedagogy-blue; padding: 10px 20px; font-family:Arial; font-size:16px; - border-radius: 4px; + border-radius: 4px; } - .radio_guide input[type="radio"]:checked + label { + .radio_guide input[type="radio"]:checked + label { background-color:#ea7900; } - .radio_guide input[type="checkbox"]:checked + label { + .radio_guide input[type="checkbox"]:checked + label { background-color:#ea7900; } .radio_guide label:hover { @@ -1737,6 +1747,37 @@ label { #pedagogy { font-family: "Fira Sans"; color: #062f38; + + + .grid-container { + display: grid; + grid-template-columns: 10% 9% 1fr; + grid-template-rows: 156px 1fr; + 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; + } + } + + .grade-stars { + grid-area: grade-stars; + color: $pedagogy-white-text; + background-color: $pedagogy-blue; + } + + .uv-infos { + grid-area: uv-infos; + padding-left: 10px; + } + .comment { max-width: 100%; max-height: 200px; @@ -1753,8 +1794,8 @@ label { .dif_grade { height: 156px; width: 8%; - background-color: #1bb9ea; - color: #f0f0f0; + background-color: $pedagogy-blue; + color: $pedagogy-white-text; height: 156px; float: left; font-weight: bold; @@ -1772,10 +1813,10 @@ label { padding-right: 40px; padding-top: 0px; clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0); - background-color: #1bb9ea; + background-color: $pedagogy-blue; } - @media screen and (max-width: 992px) { + @media screen and (max-width: $large-devices) { .dif_grade { width: 11%; } @@ -1787,27 +1828,32 @@ label { } .not_rated { - color: #f0f0f0; + color: $pedagogy-white-text; text-align: center; } .info { - background-color: #1bb9ea; + background-color: $pedagogy-blue; width: 100%; float: left; .date_info { - color: #f0f0f0; + color: $pedagogy-white-text; text-align: center; width : 34%; padding: 5px; margin: 0px; float: left; + + @media screen and (max-width: $large-devices) { + width: 0%; + } + } .author_info { - color: #f0f0f0; + color: $pedagogy-white-text; text-align: center; font-weight: bold; padding-right: 33%; @@ -1824,13 +1870,18 @@ label { width : 33%; & a { - color: #f0f0f0; + color: $pedagogy-white-text; font-weight: bold; } padding: 5px; margin: 0px; float: left; + + @media screen and (max-width: $large-devices) { + clip-path: none; + width : 32%; + } } } diff --git a/pedagogy/templates/pedagogy/uv_detail.jinja b/pedagogy/templates/pedagogy/uv_detail.jinja index d820cf8a..98b9acad 100644 --- a/pedagogy/templates/pedagogy/uv_detail.jinja +++ b/pedagogy/templates/pedagogy/uv_detail.jinja @@ -20,17 +20,36 @@

{{ object.code }} - {{ object.title }}

{{ object.department }} {{ object.credit_type }} {{ object.semester_translated }}

-

{{ object.objectives|markdown }}

-

{{ object.program|markdown }}

-

{{ object.skills|markdown }}

-

{{ object.key_concepts }}

-

{% trans %}UV manager: {% endtrans %}{{ object.manager }}

-

{{ display_star(object.grade_global_average) }}

-

{{ display_star(object.grade_utility_average) }}

-

{{ display_star(object.grade_interest_average) }}

-

{{ display_star(object.grade_teaching_average) }}

-

{{ display_star(object.grade_work_load_average) }}

+
+ +
+
+

{% trans %}global grade{% endtrans %}

+

{% trans %}utility{% endtrans %}

+

{% trans %}interest{% endtrans %}

+

{% trans %}teaching{% endtrans %}

+

{% trans %}work load{% endtrans %}

+
+
+

{{ display_star(object.grade_global_average) }}

+

{{ display_star(object.grade_utility_average) }}

+

{{ display_star(object.grade_interest_average) }}

+

{{ display_star(object.grade_teaching_average) }}

+

{{ display_star(object.grade_work_load_average) }}

+
+
+

{% trans %}Objectives{% endtrans %}

+

{{ object.objectives|markdown }}

+

{% trans %}Program{% endtrans %}

+

{{ object.program|markdown }}

+

{% trans %}Earned skills{% endtrans %}

+

{{ object.skills|markdown }}

+

{% trans %}Key concepts{% endtrans %}

+

{{ object.key_concepts }}

+

{% trans %}UV manager: {% endtrans %}{{ object.manager }}

+
+
{% if object.comments.exists() %}

{% trans %}Comments{% endtrans %}