openfun / fun-apps

:warning: DEPRECATED :warning:
Other
15 stars 20 forks source link

Add media rule to fun.css .plan #649

Open hugolpz opened 5 years ago

hugolpz commented 5 years ago

Related to same .plan class / section as #647.

When testing the responsiveness of the the blue ".plan" section, there is a failure at one point, due to one media rule missing. See 1. working vs 2. failing and 3. failing.

Screenshot from 2019-05-06 15-20-10 Screenshot from 2019-05-06 15-19-42 Screenshot from 2019-05-06 18-55-50

In 1) we have [70px][1] vs [-70px][2] (matching) :

.course-about .description section.plan {
  ... 
  margin-right: -70px;
}
.main-content .left {
    ...
    padding-right: 70px;
    padding-bottom: 70px;
    background-color: white;
}

In 2) we have both [30px][3] vs [-70px][2] (mismatch) :

@media (max-width: 920px) and (min-width: 831px)
.course-about .left {
    padding-left: 100px;
    padding-right: 30px;
}
.course-about .description section.plan {
    ...
    margin-right: -70px;
}

We also have in 3) we have [15px][4] vs [-70px][2] (mismatch) :

@media (max-width: 830px) and (min-width: 768px)
.course-about .left {
    padding-left: 105px;
    padding-right: 15px;
}
.course-about .description section.plan {
    ...
    margin-right: -70px;
}

[1]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 1636 [2]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 1925 [3]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 2118 [4]: https://www.fun-mooc.fr/static/lms/funsite/css/fun.fca3ea428acf.css : 2096


As an other issue, given we talk about the .plan section which presents the very central information of the MOOC's structure and contents, I would recommend to add the following rule :

.course-about .description section.plan li {
    font-size:1.4em; margin-bottom:.4em;
}
hugolpz commented 5 years ago

Note : ceci affecte le rendu sur la plupart des support mobiles et rajoutant un scroller horizontal pour permettre la visualisation de cette marge hors cadre souhaité.

rmoch commented 5 years ago

On regardera si on peut résoudre ce problème qui me semble mineur, lors de la prochaine release. Merci de votre proposition.

hugolpz commented 5 years ago

Super! Merci l'équipe :muscle: :heart: