klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-25 18:44:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

pedagogy: correctly display uv infos

Browse Source
This commit is contained in:
Antoine Bartuccio 2019-07-07 16:33:03 +02:00
parent 28748af5d3
commit 3bff09b04c
Signed by: klmp200
GPG Key ID: E7245548C53F904B
2 changed files with 96 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
core/static/core/style.scss
View File

@ -30,6 +30,12 @@ $shadow-color: rgb(223, 223, 223);
$background-bouton-color: hsl(0, 0%, 90%); $background-bouton-color: hsl(0, 0%, 90%);
/*--------------------------MEDIA QUERY HELPERS------------------------*/
$small-devices: 576px;
$medium-devices: 768px;
$large-devices: 992px;
$extra-large-devices: 1200px;
/*--------------------------------GENERAL------------------------------*/ /*--------------------------------GENERAL------------------------------*/
body { body {
@ -1670,6 +1676,10 @@ label {
/* --------------------------------------pedagogy-----------------------------------*/ /* --------------------------------------pedagogy-----------------------------------*/
$pedagogy-blue: #1bb9ea;
$pedagogy-light-blue: #caf0ff;
$pedagogy-white-text: #f0f0f0;
.pedagogy { .pedagogy {
&.star_not_checked { &.star_not_checked {
color : #f7f7f7; color : #f7f7f7;
@ -1680,7 +1690,7 @@ label {
&.stars_grade { &.stars_grade {
display: none; display: none;
} }
@media screen and (max-width: 992px) { @media screen and (max-width: $large-devices) {
&.stars_grade { &.stars_grade {
display: block; display: block;
} }
@ -1698,7 +1708,7 @@ label {
width: 100%; width: 100%;
.input_search { .input_search {
background: #caf0ff; background: $pedagogy-light-blue;
width: 300px; width: 300px;
height: 21px; height: 21px;
} }
@ -1709,7 +1719,7 @@ label {
margin-left: 20px; margin-left: 20px;
} }
.radio_guide input[type="radio"],input[type="checkbox"] { .radio_guide input[type="radio"],input[type="checkbox"] {
display:none; display:none;
} }
.radio_guide { .radio_guide {
margin-top: 10px; margin-top: 10px;
@ -1717,16 +1727,16 @@ label {
} }
.radio_guide label { .radio_guide label {
display:inline-block; display:inline-block;
background-color:#1bb9ea; background-color: $pedagogy-blue;
padding: 10px 20px; padding: 10px 20px;
font-family:Arial; font-family:Arial;
font-size:16px; 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; background-color:#ea7900;
} }
.radio_guide input[type="checkbox"]:checked + label { .radio_guide input[type="checkbox"]:checked + label {
background-color:#ea7900; background-color:#ea7900;
} }
.radio_guide label:hover { .radio_guide label:hover {
@ -1737,6 +1747,37 @@ label {
#pedagogy { #pedagogy {
font-family: "Fira Sans"; font-family: "Fira Sans";
color: #062f38; 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 { .comment {
max-width: 100%; max-width: 100%;
max-height: 200px; max-height: 200px;
@ -1753,8 +1794,8 @@ label {
.dif_grade { .dif_grade {
height: 156px; height: 156px;
width: 8%; width: 8%;
background-color: #1bb9ea; background-color: $pedagogy-blue;
color: #f0f0f0; color: $pedagogy-white-text;
height: 156px; height: 156px;
float: left; float: left;
font-weight: bold; font-weight: bold;
@ -1772,10 +1813,10 @@ label {
padding-right: 40px; padding-right: 40px;
padding-top: 0px; padding-top: 0px;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0); 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 { .dif_grade {
width: 11%; width: 11%;
} }
@ -1787,27 +1828,32 @@ label {
} }
.not_rated { .not_rated {
color: #f0f0f0; color: $pedagogy-white-text;
text-align: center; text-align: center;
} }
.info { .info {
background-color: #1bb9ea; background-color: $pedagogy-blue;
width: 100%; width: 100%;
float: left; float: left;
.date_info { .date_info {
color: #f0f0f0; color: $pedagogy-white-text;
text-align: center; text-align: center;
width : 34%; width : 34%;
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
float: left; float: left;
@media screen and (max-width: $large-devices) {
width: 0%;
}
} }
.author_info { .author_info {
color: #f0f0f0; color: $pedagogy-white-text;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding-right: 33%; padding-right: 33%;
@ -1824,13 +1870,18 @@ label {
width : 33%; width : 33%;
& a { & a {
color: #f0f0f0; color: $pedagogy-white-text;
font-weight: bold; font-weight: bold;
} }
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
float: left; float: left;
@media screen and (max-width: $large-devices) {
clip-path: none;
width : 32%;
}
} }
} }

39
pedagogy/templates/pedagogy/uv_detail.jinja
View File

@ -20,17 +20,36 @@
<h1>{{ object.code }} - {{ object.title }}</h1> <h1>{{ object.code }} - {{ object.title }}</h1>
<p style = "word-spacing: 20px;">{{ object.department }} {{ object.credit_type }} {{ object.semester_translated }}</p> <p style = "word-spacing: 20px;">{{ object.department }} {{ object.credit_type }} {{ object.semester_translated }}</p>
<p>{{ object.objectives|markdown }}</p>
<p>{{ object.program|markdown }}</p>
<p>{{ object.skills|markdown }}</p>
<p>{{ object.key_concepts }}</p>
<p>{% trans %}UV manager: {% endtrans %}{{ object.manager }}</p>
<p>{{ display_star(object.grade_global_average) }}</p> <br>
<p>{{ display_star(object.grade_utility_average) }}</p>
<p>{{ display_star(object.grade_interest_average) }}</p> <div class="grid-container">
<p>{{ display_star(object.grade_teaching_average) }}</p> <div class="grade">
<p>{{ display_star(object.grade_work_load_average) }}</p> <p>{% trans %}global grade{% endtrans %}</p>
<p>{% trans %}utility{% endtrans %}</p>
<p>{% trans %}interest{% endtrans %}</p>
<p>{% trans %}teaching{% endtrans %}</p>
<p>{% trans %}work load{% endtrans %}</p>
</div>
<div class="grade-stars">
<p>{{ display_star(object.grade_global_average) }}</p>
<p>{{ display_star(object.grade_utility_average) }}</p>
<p>{{ display_star(object.grade_interest_average) }}</p>
<p>{{ display_star(object.grade_teaching_average) }}</p>
<p>{{ display_star(object.grade_work_load_average) }}</p>
</div>
<div class="uv-infos">
<p><b>{% trans %}Objectives{% endtrans %}</b></p>
<p>{{ object.objectives|markdown }}</p>
<p><b>{% trans %}Program{% endtrans %}</b></p>
<p>{{ object.program|markdown }}</p>
<p><b>{% trans %}Earned skills{% endtrans %}</b></p>
<p>{{ object.skills|markdown }}</p>
<p><b>{% trans %}Key concepts{% endtrans %}</b></p>
<p>{{ object.key_concepts }}</p>
<p><b>{% trans %}UV manager: {% endtrans %}</b>{{ object.manager }}</p>
</div>
</div>
{% if object.comments.exists() %} {% if object.comments.exists() %}
<h2>{% trans %}Comments{% endtrans %}</h2> <h2>{% trans %}Comments{% endtrans %}</h2>