From 6c43b1c43d8c130818515cedaedee889593d27e2 Mon Sep 17 00:00:00 2001
From: Bartuccio Antoine <klmp200@klmp200.net>
Date: Thu, 25 Jul 2019 19:01:53 +0200
Subject: [PATCH] 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() }}
+    <meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
+{% endblock head %}
+
 {% block content %}
 <div class="pedagogy">
 	<form id="search_form" action="{{ url('pedagogy:guide') }}" method="get">
-		{% if can_create_uv(user) %}
-		<p>
-			<a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a>
-		</p>
-		<p>
-			<a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
-		</p>
-		{% endif %}
-		<p>
-			<input id="search_input" class="input-search" type="text" name="search">
-			<button class="button-search">{% trans %}Search{% endtrans %}</button>
-		</p>
-		<div class="radio-guide">
-			{% for (display_name, real_name) in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %}
-				<input type="radio" name="department" id="radio{{ real_name }}" value="{{ real_name }}"><label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
-			{% endfor %}
-		</div>
-		<div class="radio-guide">
-			{% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
-				<input type="radio" name="credit_type" id="radio{{ credit_type }}" value="{{ credit_type }}"><label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
-			{% endfor %}
+		<div class="search-form-container">
+			{% if can_create_uv(user) %}
+			<div class="action-bar">
+				<p>
+					<a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a>
+				</p>
+				<p>
+					<a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
+				</p>
+			</div>
+			{% endif %}
+			<div class="search-bar">
+				<input id="search_input" class="search-bar-input" type="text" name="search">
+				<button class="search-bar-button">{% trans %}Search{% endtrans %}</button>
+			</div>
+			<div class="radio-department">
+				<div class="radio-guide">
+					{% for (display_name, real_name) in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %}
+						<input type="radio" name="department" id="radio{{ real_name }}" value="{{ real_name }}"><label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
+					{% endfor %}
+				</div>
+			</div>
+			<div class="radio-credit-type">
+				<div class="radio-guide">
+					{% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
+						<input type="radio" name="credit_type" id="radio{{ credit_type }}" value="{{ credit_type }}"><label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
+					{% endfor %}
+				</div>
+			</div>
 
-			<input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN"><label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
-			<input type="checkbox" name="semester" id="radioSPRING" value="SPRING"><label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
-			<span><input type="checkbox" name="semester" id="radioAP" value="AUTUMN_AND_SPRING"><label for="radioAP">AP</label></span>
+			<div class="radio-semester">
+				<div class="radio-guide">
+					<input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN"><label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
+					<input type="checkbox" name="semester" id="radioSPRING" value="SPRING"><label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
+					<span><input type="checkbox" name="semester" id="radioAP" value="AUTUMN_AND_SPRING"><label for="radioAP">AP</label></span>
+				</div>
+			</div>
+			<input type="text" name="json" hidden>
 		</div>
-		<input type="text" name="json" hidden>
 	</form>
-	<br>
 	<table id="dynamic_view">
 		<thead>
 			<tr>
@@ -226,5 +242,7 @@
     $("#search_form").on("change", function(e){
     	$(this).submit();
     });
+
+    // $("#dynamic_view").hide();
 </script>
 {% endblock content %}
\ No newline at end of file