klmp200
/
Sith
mirror of https://github.com/ae-utbm/sith3.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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)
This commit is contained in:
Antoine Bartuccio 2019-07-25 19:01:53 +02:00
parent f9227fa29d
commit 6c43b1c43d
Signed by: klmp200
GPG Key ID: E7245548C53F904B
2 changed files with 98 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1708,8 +1708,7 @@ $pedagogy-white-text: #f0f0f0;
#dynamic_view { #dynamic_view {
font-size: 1.1em; font-size: 1.1em;
table { overflow-wrap: break-word;
}
td { td {
text-align: center; text-align: center;
@ -1719,20 +1718,56 @@ $pedagogy-white-text: #f0f0f0;
} }
#search_form { #search_form {
margin: 0px;
width: 100%;
.input-search { .search-form-container {
background: $pedagogy-light-blue; display: grid;
width: 300px; grid-template-columns: auto auto;
height: 21px; 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; .action-bar {
color: white; grid-area: action-bar;
font-weight: bold; margin-bottom: 10px;
margin-left: 20px;
} }
.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"] { .radio-guide input[type="radio"],input[type="checkbox"] {
display:none; display:none;
} }
@ -1741,25 +1776,21 @@ $pedagogy-white-text: #f0f0f0;
color: white; color: white;
} }
.radio-guide label { .radio-guide label {
display:inline-block; display: inline-block;
background-color: $pedagogy-blue; 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:$pedagogy-orange; background-color: $pedagogy-orange;
} }
.radio-guide input[type="checkbox"]:checked + label { .radio-guide input[type="checkbox"]:checked + label {
background-color:$pedagogy-orange; background-color: $pedagogy-orange;
} }
.radio-guide label:hover { .radio-guide label:hover {
background-color: $pedagogy-hover-blue; background-color: $pedagogy-hover-blue;
}
#radioAUTUMN + label {
margin-left: 50px;
} }
} }

70
pedagogy/templates/pedagogy/guide.jinja
View File

@ -5,38 +5,54 @@
{% trans %}UV Guide{% endtrans %} {% trans %}UV Guide{% endtrans %}
{% endblock %} {% endblock %}
{% block head %}
{{ super() }}
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
{% endblock head %}
{% block content %} {% block content %}
<div class="pedagogy"> <div class="pedagogy">
<form id="search_form" action="{{ url('pedagogy:guide') }}" method="get"> <form id="search_form" action="{{ url('pedagogy:guide') }}" method="get">
{% if can_create_uv(user) %} <div class="search-form-container">
<p> {% if can_create_uv(user) %}
<a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a> <div class="action-bar">
</p> <p>
<p> <a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a>
<a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a> </p>
</p> <p>
{% endif %} <a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
<p> </p>
<input id="search_input" class="input-search" type="text" name="search"> </div>
<button class="button-search">{% trans %}Search{% endtrans %}</button> {% endif %}
</p> <div class="search-bar">
<div class="radio-guide"> <input id="search_input" class="search-bar-input" type="text" name="search">
{% for (display_name, real_name) in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %} <button class="search-bar-button">{% trans %}Search{% endtrans %}</button>
<input type="radio" name="department" id="radio{{ real_name }}" value="{{ real_name }}"><label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label> </div>
{% endfor %} <div class="radio-department">
</div> <div class="radio-guide">
<div class="radio-guide"> {% for (display_name, real_name) in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %}
{% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %} <input type="radio" name="department" id="radio{{ real_name }}" value="{{ real_name }}"><label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
<input type="radio" name="credit_type" id="radio{{ credit_type }}" value="{{ credit_type }}"><label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label> {% endfor %}
{% 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> <div class="radio-semester">
<input type="checkbox" name="semester" id="radioSPRING" value="SPRING"><label for="radioSPRING"><i class="fa fa-sun-o"></i></label> <div class="radio-guide">
<span><input type="checkbox" name="semester" id="radioAP" value="AUTUMN_AND_SPRING"><label for="radioAP">AP</label></span> <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> </div>
<input type="text" name="json" hidden>
</form> </form>
<br>
<table id="dynamic_view"> <table id="dynamic_view">
<thead> <thead>
<tr> <tr>
@ -226,5 +242,7 @@
$("#search_form").on("change", function(e){ $("#search_form").on("change", function(e){
$(this).submit(); $(this).submit();
}); });
// $("#dynamic_view").hide();
</script> </script>
{% endblock content %} {% endblock content %}