From 6c43b1c43d8c130818515cedaedee889593d27e2 Mon Sep 17 00:00:00 2001 From: Bartuccio Antoine Date: Thu, 25 Jul 2019 19:01:53 +0200 Subject: [PATCH 1/4] pedagogy: better display on mobile for guide page Widen search bar and use a grid template Reduce zooming when clicking on the search bar (firexfox) Remove zooming when clicking on search bar (chrome) --- core/static/core/style.scss | 77 +++++++++++++++++-------- pedagogy/templates/pedagogy/guide.jinja | 70 +++++++++++++--------- 2 files changed, 98 insertions(+), 49 deletions(-) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index e919eb81..0751b1e7 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1708,8 +1708,7 @@ $pedagogy-white-text: #f0f0f0; #dynamic_view { font-size: 1.1em; - table { - } + overflow-wrap: break-word; td { text-align: center; @@ -1719,20 +1718,56 @@ $pedagogy-white-text: #f0f0f0; } #search_form { - margin: 0px; - width: 100%; - .input-search { - background: $pedagogy-light-blue; - width: 300px; - height: 21px; + .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"; } - .button-search { - background: $pedagogy-orange; - color: white; - font-weight: bold; - margin-left: 20px; + + .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"; + + .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; } @@ -1741,25 +1776,21 @@ $pedagogy-white-text: #f0f0f0; color: white; } .radio-guide label { - display:inline-block; + display: inline-block; background-color: $pedagogy-blue; padding: 10px 20px; - font-family:Arial; - font-size:16px; + font-family: Arial; + font-size: 16px; border-radius: 4px; } .radio-guide input[type="radio"]:checked + label { - background-color:$pedagogy-orange; + background-color: $pedagogy-orange; } .radio-guide input[type="checkbox"]:checked + label { - background-color:$pedagogy-orange; + background-color: $pedagogy-orange; } .radio-guide label:hover { - background-color: $pedagogy-hover-blue; - } - - #radioAUTUMN + label { - margin-left: 50px; + background-color: $pedagogy-hover-blue; } } diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja index 4046d0a1..471dfbbf 100644 --- a/pedagogy/templates/pedagogy/guide.jinja +++ b/pedagogy/templates/pedagogy/guide.jinja @@ -5,38 +5,54 @@ {% trans %}UV Guide{% endtrans %} {% endblock %} +{% block head %} + {{ super() }} + +{% endblock head %} + {% block content %}
- {% if can_create_uv(user) %} -

- {% trans %}Create UV{% endtrans %} -

-

- {% trans %}Moderate comments{% endtrans %} -

- {% endif %} -

- - -

-
- {% for (display_name, real_name) in [("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 %} +
+ {% if can_create_uv(user) %} +
+

+ {% trans %}Create UV{% endtrans %} +

+

+ {% trans %}Moderate comments{% endtrans %} +

+
+ {% endif %} +
+ + +
+
+
+ {% for (display_name, real_name) in [("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 %} +
+
- - - +
+
+ + + +
+
+
- -
@@ -226,5 +242,7 @@ $("#search_form").on("change", function(e){ $(this).submit(); }); + + // $("#dynamic_view").hide(); {% endblock content %} \ No newline at end of file From 3380980c5c49c239dd09f371c122ec83608f6ff9 Mon Sep 17 00:00:00 2001 From: Bartuccio Antoine Date: Mon, 29 Jul 2019 15:35:16 +0200 Subject: [PATCH 2/4] pedagogy: add generic font for .radio-guide --- core/static/core/style.scss | 4 ++-- pedagogy/templates/pedagogy/guide.jinja | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 0751b1e7..f94ea361 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1722,7 +1722,7 @@ $pedagogy-white-text: #f0f0f0; .search-form-container { display: grid; grid-template-columns: auto auto; - grid-template-rows: auto auto auto; + grid-template-rows: auto auto auto; grid-template-areas: "action-bar action-bar" "search-bar search-bar" @@ -1779,7 +1779,7 @@ $pedagogy-white-text: #f0f0f0; display: inline-block; background-color: $pedagogy-blue; padding: 10px 20px; - font-family: Arial; + font-family: Arial, sans-serif; font-size: 16px; border-radius: 4px; } diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja index 471dfbbf..1084a9af 100644 --- a/pedagogy/templates/pedagogy/guide.jinja +++ b/pedagogy/templates/pedagogy/guide.jinja @@ -242,7 +242,5 @@ $("#search_form").on("change", function(e){ $(this).submit(); }); - - // $("#dynamic_view").hide(); {% endblock content %} \ No newline at end of file From d29603c584f87b21eb39ded096a7b31ded8082cb Mon Sep 17 00:00:00 2001 From: Bartuccio Antoine Date: Wed, 7 Aug 2019 20:03:21 +0200 Subject: [PATCH 3/4] pedagogy: fix display of guide on smaller devices --- core/static/core/style.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index f94ea361..8fd94e3b 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1742,6 +1742,22 @@ $pedagogy-white-text: #f0f0f0; 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; From f09de0ab7dc3e868de42dd9984bffa564bdd5858 Mon Sep 17 00:00:00 2001 From: Bartuccio Antoine Date: Thu, 8 Aug 2019 12:46:51 +0200 Subject: [PATCH 4/4] pedagogy: remove stars on small devices for grade --- core/static/core/style.scss | 13 +++++++++++++ pedagogy/templates/pedagogy/macros.jinja | 5 +++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 8fd94e3b..af72efc0 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -1694,6 +1694,10 @@ $pedagogy-white-text: #f0f0f0; margin-top: 0px; } + &.grade-without-star { + display: none + } + @media screen and (max-width: $large-devices){ &.star-not-checked { margin-left: 5px; @@ -1705,6 +1709,15 @@ $pedagogy-white-text: #f0f0f0; } } + @media screen and (max-width: $small-devices){ + &.grade-without-star { + display: block; + } + &.grade-with-star { + display: none; + } + } + #dynamic_view { font-size: 1.1em; diff --git a/pedagogy/templates/pedagogy/macros.jinja b/pedagogy/templates/pedagogy/macros.jinja index 20cb23c3..ea1874e8 100644 --- a/pedagogy/templates/pedagogy/macros.jinja +++ b/pedagogy/templates/pedagogy/macros.jinja @@ -3,11 +3,12 @@ {% if grade >= 0 %} {% for i in range(5) %} {% if i <= grade %} - + {% else %} - + {% endif %} {% endfor %} + {{ grade }}/5 {% else %} {% trans %} not rated {% endtrans %} {% endif %}