Responsive design adaptation

author: Étienne Loks <etienne.loks@iggdrasil.net> 2018-05-18 10:25:34 +0200
committer: Étienne Loks <etienne.loks@iggdrasil.net> 2018-05-21 12:21:21 +0200
commit: 839e4293e37b7f5c601dfaae2529e02300a433a6 (patch)
tree: 8b528c00a5a5d8bd6045bc035a7cf09d9c91b851 /chimere/templates
parent: dd6e6705f38c5999c608e2c093beb15118e32d75 (diff)
download: Chimère-839e4293e37b7f5c601dfaae2529e02300a433a6.tar.bz2
Chimère-839e4293e37b7f5c601dfaae2529e02300a433a6.zip
9 files changed, 86 insertions, 34 deletions
diff --git a/chimere/templates/base.html b/chimere/templates/base.html
index b80c42f..9ce000c 100644
--- a/chimere/templates/base.html
+++ b/chimere/templates/base.html
@@ -2,8 +2,8 @@
 <html lang="fr">
 <head>
     <title>{% block title %}{{PROJECT_NAME}}{% endblock %}</title>
-    {% if MOBILE %}<meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">{% endif %}
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
     {% block og %}
     <meta property="og:title"
@@ -66,6 +66,11 @@
     {% block footer %}
     {% endblock %}
 </div>
+<a href='#' id='mobile-footer-open-img'>+</a>
+<div id="mobile-footer">
+    {% block mobilefooter %}
+    {% endblock %}
+</div>
 {% endblock %}
 </body>
 </html>
diff --git a/chimere/templates/chimere/blocks/actions.html b/chimere/templates/chimere/blocks/actions.html
index 49a8fd4..2ce5c29 100644
--- a/chimere/templates/chimere/blocks/actions.html
+++ b/chimere/templates/chimere/blocks/actions.html
@@ -10,23 +10,23 @@
             </a>
         </div>
         <div id="top-menu" class="row">
-            <div class="col-xs-2 action">
+            <div class="col-xs-3 col-sm-2 action">
                 <a href="{% url 'index' area_name %}">
                     {% trans "Map" %}
                 </a>
             </div>
             {% if area.show_directory %}
-            <div class="col-xs-2 action">
+            <div class="col-xs-3 col-sm-2 action">
                 <a href="{% url 'chimere:category-directory' area_name %}">
                     {% trans "Directory" %}
                 </a>
             </div>
             {% endif %}
-            <div class="col-xs-{%if not extra_pages %}6{% elif extra_pages|length < 3 %}4{% else %}6{% endif %}">
+            <div class="search-box-col col-sm-{%if not extra_pages %}6{% elif extra_pages|length < 3 %}4{% else %}6{% endif %}">
                 <div id='search-box'></div>
             </div>
             {% for page in extra_pages %}
-            <div class="col-xs-{% if page.image %}1{% else%}2{% endif %} action"
+            <div class="col-xs-{% if page.image %}1{% else%}3{% endif %} col-sm-{% if page.image %}1{% else%}2{% endif %} action"
                   id="btn-{{page.mnemonic}}">
                 {% if page.url %}
                 <a href='{{page.url}}' target="_blank">
diff --git a/chimere/templates/chimere/blocks/areas.html b/chimere/templates/chimere/blocks/areas.html
index c8d04f6..c6d675c 100644
--- a/chimere/templates/chimere/blocks/areas.html
+++ b/chimere/templates/chimere/blocks/areas.html
@@ -1,17 +1,17 @@
 {% load i18n %}
 {% if areas and areas.count > 1 %}
-<div id='maps-lnk' class="input-group mb-2 mr-sm-2 mb-sm-0">
+<div id='maps-lnk{{suffix}}' class="input-group mb-2 mr-sm-2 mb-sm-0">
       <div class="input-group-addon" title="{% trans 'Map' %}">
           <span class='fa fa-chimere-action fa-chimere-maps'></span>
       </div>
-      <select id='areas-select' class="form-control" title="{% trans 'Map' %}">
+      <select id='areas-select{{suffix}}' class="form-control" title="{% trans 'Map' %}">
         {% if not has_default_area %}<option value=''>--</option>{% endif %}
         {% for area in areas %}
         <option value='{{area.urn}}'{% if area_name and area.urn == area_name %} selected='selected'{% endif %}{% if not area_name and area.default %} selected='selected'{% endif %}>{{area.name}}</option>{% endfor %}
       </select>
 </div>
 <script language='javascript' type='text/javascript'>
-    jQuery('#areas-select').change(
+    jQuery('#areas-select{{suffix}}').change(
         function (){
             val = jQuery(this).val();
             if(val){
diff --git a/chimere/templates/chimere/blocks/categories.html b/chimere/templates/chimere/blocks/categories.html
index 9573643..cf13404 100644
--- a/chimere/templates/chimere/blocks/categories.html
+++ b/chimere/templates/chimere/blocks/categories.html
@@ -60,9 +60,13 @@ $(function() {
     }
 
     $(".subcategory").mouseenter(function() {
-        $(this).find(".description_icon").show();
+        if ($("#switch-menu").not(':visible').length){
+            $(this).find(".description_icon").show();
+        }
     }).mouseleave(function() {
-        $(this).find(".description_icon").hide();
+        if ($("#switch-menu").not(':visible').length){
+            $(this).find(".description_icon").hide();
+        }
     });
 
 });
diff --git a/chimere/templates/chimere/blocks/footer-mobile.html b/chimere/templates/chimere/blocks/footer-mobile.html
new file mode 100644
index 0000000..212b4e0
--- /dev/null
+++ b/chimere/templates/chimere/blocks/footer-mobile.html
@@ -0,0 +1,6 @@
+{% load i18n chimere_tags %}
+
+<a href='#' class='close-img'>X</a>
+
+{% display_areas '-footer' %}
+<h2>Chimère</h2>
+\ No newline at end of file
diff --git a/chimere/templates/chimere/blocks/inline_formset.html b/chimere/templates/chimere/blocks/inline_formset.html
index 7cc0f04..c25e469 100644
--- a/chimere/templates/chimere/blocks/inline_formset.html
+++ b/chimere/templates/chimere/blocks/inline_formset.html
@@ -5,10 +5,13 @@
 <table class='inline-table' id='table_{{formset.prefix}}'>
     {% for frm in formset%}{%if forloop.first %}
     <tr>{% for field in frm%}{% if field.label %}
-        <th>{{field.label}}</th>{% endif %}{%endfor%}
+        <th{% if field.name == 'name'%} class="hidden-sm hidden-xs"{% endif %}>
+        {{field.label}}
+        </th>{% endif %}{%endfor%}
     </tr>{%endif%}
     <tr id='tr_{{formset.prefix}}_{{forloop.counter0}}'>{% for field in frm.visible_fields %}
-        <td>{# Include the hidden fields in the form #}
+        <td{% if field.name == 'name'%} class="hidden-sm hidden-xs"{% endif %}>
+            {# Include the hidden fields in the form #}
             {% if forloop.first %}
             {% for hidden in frm.hidden_fields %}
             {{ hidden }}
diff --git a/chimere/templates/chimere/category_directory.html b/chimere/templates/chimere/category_directory.html
index f448f64..981c9d9 100644
--- a/chimere/templates/chimere/category_directory.html
+++ b/chimere/templates/chimere/category_directory.html
@@ -26,7 +26,7 @@
 {% endif %}
 </style>
 <div class="row" id="category-directory-content">
-    <div class="col-md-3 col-xs-4">
+    <div class="col-md-3{% if current_marker %} hidden-sm{% else %} col-sm-5{% endif %}{% if items %} hidden-xs{% endif %}">
         {% if not object_list.count %}
             <p>{% trans "No category defined!" %}</p>
         {% else %}
@@ -70,8 +70,23 @@
         {% endif %}
     </div>
     {% if items %}
-    <div class="col-md-3 col-xs-4">
-        <ul id="category-directory">{% for marker in items %}
+    <div class="col-md-3 col-sm-5{% if current_marker %} hidden-xs{% endif %}">
+        <ul id="category-directory">
+            <li class="visible-xs visible-sm text-center">
+                <a href="{% url 'chimere:category-directory' area_name %}">
+                    &larr;
+                    {% trans "Categories" %}
+                </a>
+            </li>
+            <li class="hidden-md hidden-lg">
+            <span>
+                <label style="color: {{category.category.color}}">
+                    {% trans category.category.name %} /
+                    {% trans category.name %}
+                </label>
+            </span>
+            </li>
+            {% for marker in items %}
             <li class='{% if marker.pk == current_marker.pk %} selected{% endif %}'>
                 <a {% if marker.pk == current_marker.pk %}style="color: {{category.category.color}}"{% endif %}
                    href="{% url 'chimere:category-directory-item-detail' area_name category.slug marker.pk %}">
@@ -83,7 +98,14 @@
     </div>
     {% endif %}
     {% if current_marker %}
-    <div class="col-md-3 col-xs-4" id="directory-marker">
+    <div class="col-md-3" id="directory-marker">
+        <p class="visible-xs text-center">
+        <a href="{% url 'chimere:category-directory-detail' area_name category.slug %}">
+            &larr;
+            {% trans category.category.name %} /
+            {% trans category.name %}
+        </a>
+        </p>
         {% include "chimere/category_item_detail.html" %}
     </div>
     {% endif %}
diff --git a/chimere/templates/chimere/edit.html b/chimere/templates/chimere/edit.html
index 9337489..080f95b 100644
--- a/chimere/templates/chimere/edit.html
+++ b/chimere/templates/chimere/edit.html
@@ -25,25 +25,25 @@
 
         <div class="container" style="width: 100%;">
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_name">{% trans "Name"%} *</label>
                     {% if form.name.errors %}<div class='errors'>{{ form.name.errors }}</div>{% endif %}
                     {{ form.name }}
                 </div>
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_subcategory">{% if form.categories.label %}{{ form.categories.label }}{% else %}{% trans "Categories" %} *{% endif %}</label>
                     {% if form.categories.errors %}<div class='errors'>{{ form.categories.errors }}</div>{% endif %}
                     {{ form.categories }}
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12">
+                <div class="col-sm-12">
                     {% block geometry %}
                     {% endblock %}
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12 full">
+                <div class="col-md-12 full">
                     <label for="id_description">{% trans "Description" %}</label>
                     {{ form.description.errors }}
                     {{ form.description }}
@@ -52,7 +52,7 @@
             </div>
             {% if form.keywords %}
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_keywords">{% trans "Keywords" %}</label>
                     {{ form.keywords.errors }}
                     {{ form.keywords }}
@@ -61,13 +61,13 @@
             </div>{% endif %}
             {% if dated %}
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_start_date">{% trans "Start date" %}</label>
                     {{ form.start_date.errors }}
                     {{ form.start_date }}
                     <p class="help">{{ form.start_date.help_text }}</p>
                 </div>
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_end_date">{% trans "End date" %}</label>
                     {{ form.end_date.errors }}
                     {{ form.end_date }}
@@ -77,7 +77,7 @@
             <div class="row">
             {% for field in form %}{% if field.name|startswith:'property_' %}
             {% for property in properties %}{% ifequal field.name property.getNamedId %}
-                <div class="col-xs-12 col-md-6 col-xl-4">
+                <div class="col-sm-12 col-md-6 col-xl-4">
                     <label for="id_{{field.name}}">{% trans field.label %}{% if property.mandatory %} *{% endif %}</label>
                     {% if field.errors %}<div class='errors'>{{ field.errors }}</div>{% endif %}
                     {{ field }}
@@ -125,19 +125,19 @@
             </div>
             <div class="container">
                 <div class="row">
-                    <div class="col-xs-6">
+                    <div class="col-sm-12 col-md-6">
                         <label for="id_submiter_name">{% trans "Your name or nickname"%}</label>
                         {% if form.submiter_name.errors %}<div class='errors'>{{ form.submiter_name.errors }}</div>{% endif %}
                         {{ form.submiter_name }}
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-sm-12 col-md-6">
                         <label for="id_submiter_email">{% trans "Your email"%}</label>
                         {% if form.submiter_email.errors %}<div class='errors'>{{ form.submiter_email.errors }}</div>{% endif %}
                         {{ form.submiter_email }}
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-xs-12 full">
+                    <div class="col-sm-12 full">
                         <label for="id_submiter_comment">{% trans "Comments about your submission"%}</label>
                         {% if form.submiter_comment.errors %}<div class='errors'>{{ form.submiter_comment.errors }}</div>{% endif %}
                         {{ form.submiter_comment }}
diff --git a/chimere/templates/chimere/main_map.html b/chimere/templates/chimere/main_map.html
index 3bf1d95..e81153b 100644
--- a/chimere/templates/chimere/main_map.html
+++ b/chimere/templates/chimere/main_map.html
@@ -27,9 +27,15 @@
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
 <div id="switch-menu" class="row">
-    <div class="col-xs-4"><a href="#">{% trans "Map" %}</a></div>
-    <div class="col-xs-4"><a href="#">{% trans "Search result" %}</a></div>
-    <div class="col-xs-4 selected"><a href="#">{% trans "Categories" %}</a></div>
+    <div class="col-xs-6 selected" id="switch-map">
+        <a href="#">{% trans "Map" %}</a>
+    </div>
+    <div class="col-xs-6" id="switch-categories">
+        <a href="#">{% trans "Categories" %}</a>
+    </div>
+    <div class="col-xs-6 disabled" id="switch-search-result">
+        <a href="#">{% trans "Search result" %}</a>
+    </div>
 </div>
   <div id="sidebar-container">
     <div class='sidebar-handler' id='sidebar-handler-hide'></div>
@@ -38,15 +44,18 @@
         <div id='map-panel'>
             <div id='search-result'></div>
             <form action='.' method='post' name='frm_categories' id='frm_categories'>
+                <div id="categories-help" class="bg-info help-text">
+                    {% trans "Select categories you would like to see before going back to map." %}
+                </div>
                 <div id='categories'>{# dynamic content #}
                 </div>
             </form>
             {% routing %}
+            <div id='back-categories'>
+                <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <p>REVENIR AUX CATÉGORIES</p>
+            </div>
         </div>
     </div>
-    <div id='back-categories'>
-        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <p>REVENIR AUX CATÉGORIES</p>
-    </div>
     <div class='footer' id='footer-panel'>
         {% include "chimere/blocks/panel_footer.html" %}
     </div>
@@ -111,3 +120,6 @@
 {% block footer %}
     <p class='map-footer'>{% include "chimere/blocks/footer.html" %}</p>
 {% endblock %}
+{% block mobilefooter %}
+    {% include "chimere/blocks/footer-mobile.html" %}
+{% endblock %}
author	Étienne Loks <etienne.loks@iggdrasil.net>	2018-05-18 10:25:34 +0200
committer	Étienne Loks <etienne.loks@iggdrasil.net>	2018-05-21 12:21:21 +0200
commit	839e4293e37b7f5c601dfaae2529e02300a433a6 (patch)
tree	8b528c00a5a5d8bd6045bc035a7cf09d9c91b851 /chimere/templates
parent	dd6e6705f38c5999c608e2c093beb15118e32d75 (diff)
download	Chimère-839e4293e37b7f5c601dfaae2529e02300a433a6.tar.bz2 Chimère-839e4293e37b7f5c601dfaae2529e02300a433a6.zip