pedagogy: enhance display on mobile and fix some bugs with webkit

This commit is contained in:
Antoine Bartuccio 2019-07-07 21:56:59 +02:00
parent 3ee7ff2752
commit 240d94bd57
Signed by: klmp200
GPG Key ID: E7245548C53F904B
3 changed files with 28 additions and 15 deletions

View File

@ -1771,7 +1771,7 @@ $pedagogy-white-text: #f0f0f0;
.uv-quick-info-container {
display: grid;
grid-template-columns: 10% 10% 10% 10% auto;
grid-template-columns: 20% 20% 20% 20% auto;
grid-template-rows: 100% 100%;
grid-template-areas: "hours-cm hours-td hours-tp hours-te hours-the" "department credit-type semester . ." ;
}
@ -1815,7 +1815,7 @@ $pedagogy-white-text: #f0f0f0;
grid-template-rows: 100%;
grid-template-areas: "stars comment";
@media screen and (max-width: $medium-devices){
@media screen and (max-width: $large-devices){
grid-template-columns: 100%;
grid-template-rows: 100% 100%;
grid-template-areas: "stars" "comment";
@ -1841,7 +1841,7 @@ $pedagogy-white-text: #f0f0f0;
color: $pedagogy-white-text;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
@media screen and (max-width: $medium-devices){
@media screen and (max-width: $large-devices){
clip-path: none;
}
}
@ -1866,10 +1866,22 @@ $pedagogy-white-text: #f0f0f0;
grid-template-rows: 156px 1fr;
grid-template-areas: "grade grade-stars uv-infos" ". . uv-infos";
@media screen and (max-width: $medium-devices){
grid-template-columns: 150px 100px;
@media screen and (max-width: $large-devices){
grid-template-columns: 50% 50%;
grid-template-rows: 100% 100%;
grid-template-areas: "grade grade-stars" "uv-infos uv-infos";
.pedagogy {
&.stars-grade {
display: none;
}
&.star-checked {
display: inline;
}
&.star-not-checked {
display: inline;
}
}
}
}

View File

@ -22,15 +22,6 @@
<h1>{{ object.code }} - {{ object.title }}</h1>
<br>
<div class="uv-quick-info-container">
<div class="department">
{{ object.department }}
</div>
<div class="credit-type">
{{ object.credit_type }}
</div>
<div class="semester">
{{ object.semester_translated }}
</div>
<div class="hours-cm">
<b>{% trans %}CM: {% endtrans %}</b>{{ object.hours_CM }}
</div>
@ -46,6 +37,16 @@
<div class="hours-the">
<b>{% trans %}THE: {% endtrans %}</b>{{ object.hours_THE }}
</div>
<div class="department">
{{ object.department }}
</div>
<div class="credit-type">
{{ object.credit_type }}
</div>
<div class="semester">
{{ object.semester_translated }}
</div>
</div>
<br>