Adapt form for bootstrap

4 files changed, 135 insertions, 188 deletions

diff --git a/static/saclay/css/styles.css b/static/saclay/css/styles.css
index 4499375..77f91e8 100644
--- a/static/saclay/css/styles.css
+++ b/static/saclay/css/styles.css
@@ -2128,7 +2128,11 @@ select#id_categories{
 }
 
 li.main_category > span > label{
-    font-size: 0.8em;
+    font-size: 0.6em;
+}
+
+li.main_category li.subcategory > span > label{
+    font-size: 0.7em;
 }
 
 #detail_footer{
@@ -2162,7 +2166,7 @@ li.main_category > span > label{
     height: 400px;
 }
 
-#id_description{
+.col.full textarea{
     width: 100%;
     height: 100px;
 }
diff --git a/static/saclay/js/interface.js b/static/saclay/js/interface.js
index 22cc237..7887103 100644
--- a/static/saclay/js/interface.js
+++ b/static/saclay/js/interface.js
@@ -200,7 +200,6 @@ $(function(){
     $("#modal-edit").on('shown.bs.modal', function () {
         // ol3 must be initialized after modal opening
         init_map_edit();
-        alert("hophop");
         $('#map_edit').chimere('refresh');
         $("#modal-edit").modal('handleUpdate');
     });
diff --git a/templates/chimere/edit.html b/templates/chimere/edit.html
index 88c1d24..f099517 100644
--- a/templates/chimere/edit.html
+++ b/templates/chimere/edit.html
@@ -1,149 +1,149 @@
-{% load i18n chimere_tags inline_formset staticfiles %}
-    {% if submited %}{% submited %}{% endif %}
-    {% if error_message %}<div class='edit errorlist'>
-        <legend>{% trans "Error" %}</legend>
-        <p>{{ error_message }}</p>
-    {% endif %}</div>
-    {% if is_modification and is_superuser %}<div class='warning'><p>{% trans "You are logged as an administrator. Your modifications will be taking into account immediately." %}</p></div>{% endif %}
-    <div class='edit'>
-    {% block legend %}{% endblock %}
+{% load i18n chimere_tags inline_formset staticfiles bootstrap %}
+{% if submited %}{% submited %}{% endif %}
+{% if error_message %}<div class='edit errorlist'>
+    <legend>{% trans "Error" %}</legend>
+    <p>{{ error_message }}</p>
+{% endif %}</div>
+{% if is_modification and is_superuser %}<div class='warning'><p>{% trans "You are logged as an administrator. Your modifications will be taking into account immediately." %}</p></div>{% endif %}
+<div class='edit'>
+{% block legend %}{% endblock %}
     <form enctype="multipart/form-data" method='post' action='.'>
         {% csrf_token %}
         <p>* {% trans "indicates a mandatory field" %}</p>
 
         <div class="container">
-          <div class="row">
-            <div class="col">
-                <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">
-                <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">
-                {% block geometry %}
-                {% endblock %}
+            <div class="row">
+                <div class="col">
+                    <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">
+                    <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>
             <div class="row">
                 <div class="col">
+                    {% block geometry %}
+                    {% endblock %}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col full">
                     <label for="id_description">{% trans "Description" %}</label>
                     {{ form.description.errors }}
                     {{ form.description }}
                     <p class="help">{{ form.description.help_text }}</p>
                 </div>
             </div>
-        </div>
-
-    {% if form.keywords %}<div class="fieldWrapper">
-        <label for="id_keywords">{% trans "Keywords" %}</label>
-        {{ form.keywords.errors }}
-        {{ form.keywords }}
-        <p class="help">{{ form.keywords.help_text }}</p>
-    </div>{% endif %}
-    {% if dated %}
-    <div class="fieldWrapper full">
-        <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="fieldWrapper full">
-        <label for="id_end_date">{% trans "End date" %}</label>
-        {{ form.end_date.errors }}
-        {{ form.end_date }}
-        <p class="help">{{ form.end_date.help_text }}</p>
-    </div>
-    {% endif %}
-    {% for field in form %}
-        {% for property in properties %}
-            {% ifequal field.name property.getNamedId %}
-                <div class="fieldWrapper">
+            {% if form.keywords %}
+            <div class="row">
+                <div class="col">
+                    <label for="id_keywords">{% trans "Keywords" %}</label>
+                    {{ form.keywords.errors }}
+                    {{ form.keywords }}
+                    <p class="help">{{ form.keywords.help_text }}</p>
+                </div>
+            </div>{% endif %}
+            {% if dated %}
+            <div class="row">
+                <div class="col">
+                    <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">
+                    <label for="id_end_date">{% trans "End date" %}</label>
+                    {{ form.end_date.errors }}
+                    {{ form.end_date }}
+                    <p class="help">{{ form.end_date.help_text }}</p>
+                </div>
+            </div>{% endif %}
+            {% for field in form %}{% for property in properties %}{% ifequal field.name property.getNamedId %}
+            <div class="row">
+                <div class="col">
                     <label for="id_{{field.name}}">{% trans field.label %}{% if property.mandatory %} *{% endif %}</label>
                     {% if field.errors %}<div class='errors'>{{ field.errors }}</div>{% endif %}
                     {{ field }}
                 </div>
-            {%endifequal%}
-        {%endfor%}
-    {%endfor%}
-    <div class='bottomform'>
+            </div>{% endifequal %}{% endfor %}{% endfor %}
+        </div>
 
-        {% inline_formset "Multimedia files" formset_multi %}
-        {% inline_formset "Picture files" formset_picture %}
+        <div class='bottomform'>
 
-        {% if filtered_properties %}
-        <script type='text/javascript'>
-            var cat_filters = new Array();
-            var cat_to_hide = new Array();
-            {% for property in filtered_properties %}
-            cat_to_hide.push('#id_{{property.getNamedId}}');
-            {% for subcat in property.subcategories.all %}
-            if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
-            cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
-            {% endfor %}
-            {% endfor %}
-            $('.bsmSelect').change(function(){
-                for (idx in cat_to_hide){
-                    $(cat_to_hide[idx]).parent().hide();
-                }
-                var vals = $('#id_categories').val();
-                for (val_id in vals){
-                    var val = vals[val_id];
-                    for (ids in cat_filters[val]){
-                        $(cat_filters[val][ids]).parent().show();
+            {% inline_formset "Multimedia files" formset_multi %}
+            {% inline_formset "Picture files" formset_picture %}
+
+            {% if filtered_properties %}
+            <script type='text/javascript'>
+                var cat_filters = new Array();
+                var cat_to_hide = new Array();
+                {% for property in filtered_properties %}
+                cat_to_hide.push('#id_{{property.getNamedId}}');
+                {% for subcat in property.subcategories.all %}
+                if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
+                cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
+                {% endfor %}
+                {% endfor %}
+                $('.bsmSelect').change(function(){
+                    for (idx in cat_to_hide){
+                        $(cat_to_hide[idx]).parent().hide();
                     }
-                }
-            });
-            $('.bsmSelect').change();
-        </script>
-        {% endif %}
-    </div>
-    <div class='personalform'>
-        <h3>{% trans "Personal information"%}</h3>
-        <div class='warning'>
-        {% trans "This fields are not mandatory. If you provided them they not will be made public and they will only used to join you for this project."%}
-        </div>
-        <div class="fieldWrapper">
-            <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="fieldWrapper">
-            <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 }}
+                    var vals = $('#id_categories').val();
+                    for (val_id in vals){
+                        var val = vals[val_id];
+                        for (ids in cat_filters[val]){
+                            $(cat_filters[val][ids]).parent().show();
+                        }
+                    }
+                });
+                $('.bsmSelect').change();
+            </script>
+            {% endif %}
         </div>
-        <div class="fieldWrapper 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 }}
+        <div class='personalform'>
+            <h5>{% trans "Personal information"%}</h5>
+            <div class="alert alert-info" role="alert">
+                {% trans "This fields are not mandatory. If you provided them they not will be made public and they will only used to join you for this project."%}
+            </div>
+            <div class="container">
+                <div class="row">
+                    <div class="col">
+                        <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">
+                        <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 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 }}
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
-    <div id='upload_in_progress'>
-        <p>{% trans "Upload in progress. Please wait..." %}</p>
-        <p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>
-    </div>
-    <script text='text/javascript'>
-            $( "#upload_in_progress" ).dialog({
-                 modal: true,
-                 resizable:false,
-                 height:110,
-                 autoOpen:false,
-                 dialogClass:'alert-box'
-                }
-            );
-        $(".ui-dialog-titlebar").hide();
-        function displayProgress(){
-            $("#upload_in_progress").dialog('open');
-            return true;
-        }
-    </script>
+        {% bootstrap_modal "upload_in_progress" %}
+        <script text='text/javascript'>
+            var upload = '<p>{% trans "Upload in progress. Please wait..." %}</p>\n';
+            upload += "<p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>";
+
+            function displayProgress(){
+                $('#upload_in_progress .modal-body').html(upload);
+                $('#upload_in_progress').modal("show");
+            }
+        </script>
+
+        {% comment %}
     <p><input type='submit' onclick='saveExtent();displayProgress();' value="{% trans 'Propose'%}"/></p>
+        {% endcomment %}
     </form>
-    </div>
-    </div>
+</div>
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index 90ccaba..ad830ca 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -82,17 +82,8 @@
   </div>
 {% endblock %}
 {% block content %}
-    <div id='category_description'>
-    </div>
-
+    {% bootstrap_modal "category_description" "Category description" %}
 
-
-    <script type='text/javascript'>
-    $(function(){
-        $('#category_description').dialog({'autoOpen':false, width:630,
-                                           'dialogClass':'no-titlebar'});
-    });
-    </script>
     <div class='sidebar-handler' id='sidebar-handler-show'>
     </div>
     <div id='detail' class='ui-widget ui-corner-all'></div>
@@ -118,55 +109,11 @@
         <i class="fa fa-plus" aria-hidden="true"></i>
     </div>
 
-
     {% with title="Propose"|translate %}
     {% bootstrap_modal "modal-edit" title "" "xlarge" 1 %}
     {% endwith %}
-{% comment %}
-    <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog"
-         aria-labelledby="modal-edit-label" aria-hidden="true">
-      <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="modal-edit-label">{% trans "Propose" %}</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                {% trans "Close" %}
-            </button>
-            <button type="button" class="btn btn-primary">
-                {% trans "Edit" %}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-{% endcomment %}
 
-    <div class="modal fade" id="modal-default-message" tabindex="-1" role="dialog"
-         aria-labelledby="modal-default-message-label" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
-                        {% trans "Close" %}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
+    {% bootstrap_modal "modal-default-message"%}
 
 <script type="text/javascript">
    <!--
@@ -184,12 +131,9 @@
 </script>
     {% map_menu %}
     {% map 'main-map' %}
-    <div id='chimere_message'></div>
-    <script type='text/javascript'>
-    $(function(){$('#chimere_message').dialog({'autoOpen':false,
-                      dialogClass:'no-titlebar-simple', position:'right bottom',
-                      resizable: false});});
-    </script>
+    <div id=''></div>
+    {% bootstrap_modal "modal-chimere-message" %}
+
 {% endblock %}
 {% block footer %}
     <p class='map-footer'>{% include "chimere/blocks/footer.html" %}</p>