Edit: many improvments on style and layout

5 files changed, 81 insertions, 14 deletions

diff --git a/static/saclay/css/styles.css b/static/saclay/css/styles.css
index 6e4a5e1..1ab87b2 100644
--- a/static/saclay/css/styles.css
+++ b/static/saclay/css/styles.css
@@ -91,7 +91,7 @@ body, #content,
 #sidebar,
 .action li.ui-button,
 #detail_content,
-.news,
+.news, #multimedia_form, #submited-window,
 .dialog-content .content{
     background-color:#eee;
 }
@@ -300,7 +300,7 @@ h3.warn{
 }
 
 .no-titlebar-small.ui-dialog .ui-dialog-titlebar{
-    width:340px;
+    width:280px;
 }
 
 .no-titlebar.ui-dialog .ui-dialog-titlebar{
@@ -395,6 +395,10 @@ h3.warn{
     margin-top:22px;
     padding: 0;
 }
+
+#submited-window h2,
+#submited-window h3,
+#multimedia_form h2,
 .no-titlebar .ui-dialog-content.ui-widget-content h2{
     margin:2px 0 12px 0;
     font-weight: bold;
@@ -407,6 +411,23 @@ h3.warn{
     padding: 1em;
 }
 
+#message .content{
+    padding: 0;
+}
+
+a.close, a.close:link{
+    font-size: 1.5em;
+}
+
+#message{
+    position: absolute;
+    z-index: 10000;
+    right: 60px;
+    top: 40px;
+    max-width: 50%;
+    display: none;
+}
+
 .news,
 .dialog-content .content{
     overflow:auto;
@@ -415,10 +436,7 @@ h3.warn{
 }
 
 #multimedia_form{
-    background-image:url(../images/popup/multimedia_title.png) ;
-    background-repeat:no-repeat;
-    background-position: center top;
-    padding-top:45px;
+    padding: 0;
 }
 
 #multimedia_form input[type=text]{
@@ -437,10 +455,17 @@ h3.warn{
 
 
 #submited-window{
-    background-image:url(../images/popup/thanks_title.png) ;
-    background-repeat:no-repeat;
-    background-position: center top;
-    padding-top:45px;
+    padding: 0;
+}
+
+#submited-window h3,
+#submited-window h2{
+    margin: 0;
+}
+
+#submited-window h3{
+    font-size: 1.2em;
+    text-align: center;
 }
 
 /* autocomplete theming */
@@ -1589,18 +1614,21 @@ ul#roadmap_toolbar, ul#roadmap_toolbar ul, ul#roadmap_toolbar li{
 }
 
 #frm-edit-marker textarea,
+#frm-edit-marker input[type=email],
 #frm-edit-marker input[type=text]{
     background-color:#dfe8f3;
     border:none;
 }
 
 #frm-edit-route textarea,
+#frm-edit-route input[type=email],
 #frm-edit-route input[type=text]{
     background-color:#f5e4eb;
     border:none;
 }
 
 #frm-edit-event textarea,
+#frm-edit-event input[type=email],
 #frm-edit-event input[type=text]{
     background-color:#f2e4f5;
     border:none;
@@ -1623,7 +1651,7 @@ input.hasDatepicker{
 
 #add_media,
 #proposition_form_submit{
-    width:100%;
+    width:278px;
     display:block;
     height:25px;
     color:transparent;
diff --git a/static/saclay/js/interface.js b/static/saclay/js/interface.js
index 87b432e..1cb8e72 100644
--- a/static/saclay/js/interface.js
+++ b/static/saclay/js/interface.js
@@ -1,4 +1,13 @@
+var msg_edit_route = "Cliquez sur la carte pour tracer le trajet. Chaque nouveau clic rajoute un nœud. Double-cliquez pour terminer le trajet.";
+var msg_edit = "Cliquez sur la carte pour placer le lieu.";
+
 $(function(){
+    $('#message').hide();
+
+    $("[data-hide]").on("click", function(){
+        $("." + $(this).attr("data-hide")).hide();
+    });
+
     $('#default-message').dialog({'autoOpen':false,
                                   'resizable':false,
                                   width:630,
@@ -19,6 +28,13 @@ $(function(){
         $('#frm-edit-route').hide();
         $('#frm-edit-event').hide();
         $('#frm-edit-marker').show();
+
+        $('#message').removeClass();
+        $('#message').addClass('alert');
+        $('#message').addClass('alert-info');
+        $('#message .content').html(msg_edit);
+        $('#message').show();
+
         $.ajax({url: edit_url,
                 dataType: "html",
                 success: function (data) {
@@ -44,6 +60,13 @@ $(function(){
         $('#frm-edit-marker').hide();
         $('#frm-edit-route').hide();
         $('#frm-edit-event').show();
+
+        $('#message').removeClass();
+        $('#message').addClass('alert');
+        $('#message').addClass('alert-info');
+        $('#message .content').html(msg_edit);
+        $('#message').show();
+
         $.ajax({url: edit_event_url,
                 dataType: "html",
                 success: function (data) {
@@ -70,6 +93,13 @@ $(function(){
         $('#frm-edit-route').show();
         $('#chimere_itinerary').hide();
         $('#chimere_itinerary_form').show();
+
+        $('#message').removeClass();
+        $('#message').addClass('alert');
+        $('#message').addClass('alert-info');
+        $('#message .content').html(msg_edit_route);
+        $('#message').show();
+
         $.ajax({url: edit_route_url,
                 dataType: "html",
                 success: function (data) {
@@ -89,6 +119,8 @@ $(function(){
         $('#news').dialog('open');
     });
     $("#action-carte").click(function(){
+        $('#main_map').chimere('deactivateEdition');
+        $('#message').hide();
         $('.map_button').hide();
         $("#main-map").chimere('cleanRoute');
         $("#main-map").chimere('cleanMarker');
@@ -109,6 +141,7 @@ $(function(){
 
     $("#action-participate").click(function(){
         $('.map_button').hide();
+        $('#message').hide();
         $('#action-carte').removeClass('state-active');
         $('#action-participate').addClass('state-active');
         $('#map-actions').hide();
diff --git a/templates/chimere/base.html b/templates/chimere/base.html
index 61abe38..3943220 100644
--- a/templates/chimere/base.html
+++ b/templates/chimere/base.html
@@ -32,6 +32,10 @@
     {% endblock %}
 {% endblock %}
 {% block content %}
+<div id='message' class="alert alert-info">
+   <a href="#" class="close" data-hide='alert' aria-label="close">&times;</a>
+   <div class='content'></div>
+</div>
     {% block top %}{% endblock %}
     {% block message_map %}{% endblock %}
     {% block message_edit %}{% endblock %}
diff --git a/templates/chimere/blocks/alternate_multimedia.html b/templates/chimere/blocks/alternate_multimedia.html
index 61c42c3..b7bf624 100644
--- a/templates/chimere/blocks/alternate_multimedia.html
+++ b/templates/chimere/blocks/alternate_multimedia.html
@@ -34,6 +34,7 @@
     <div id='multimedia_form' title="{% trans "Add multimedia from your computer or a website"%}">
         {%comment%}<div class='notice'>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu luctus ipsum. Donec vel urna a turpis consectetur consectetur. Vestibulum ut enim vel odio porta vulputate." %}
         </div>{%endcomment%}
+        <h2>Ajouter un média</h2>
         <div class="fieldWrapper">
             <label for="multimedia_name">{% trans "Name" %}</label>
             <input type='text' id='multimedia_name' name='multimedia_name' value=" ">
@@ -61,7 +62,7 @@
                                           modal:true,
                                           resizable:false,
                                           dialogClass:'no-titlebar-small',
-                                          width:300});
+                                          width:280});
             $('#head_multimedia').click(function(){
                 $("#multimedia_form").dialog("open");
                 return false;
diff --git a/templates/chimere/blocks/submited.html b/templates/chimere/blocks/submited.html
index d571f75..b0d2dac 100644
--- a/templates/chimere/blocks/submited.html
+++ b/templates/chimere/blocks/submited.html
@@ -1,6 +1,7 @@
 {% load i18n %}
     <div class='edit' id='submited-window'>
-<p><strong>Merci pour votre contribution au projet !</strong></p>
+<h2>Merci</h2>
+<h3>pour votre contribution au projet !</h3>
 
 <p>En proposant un nouvel élément, vous contribuez à enrichir la carte avec des données libres. Une fois validée, votre contribution sera disponible selon les termes de la licence <a href='https://creativecommons.org/licenses/by-sa/3.0/fr/'>Creative Commons Paternité - Pas d’Utilisation Commerciale 2.0 France</a>. Vous devez être l’auteur des éléments que vous nous faites partager ou  bien vous être assuré de l’accord de leur auteur pour cette mise à disposition. Ceci concerne les textes, photos et tout contenu multimedia.</p>
 {% if contact_email %}<p>N’hésitez pas à nous contacter pour toute question : <a href='mailto:{{contact_email}}'>{{contact_email}}</a>.</p>{% endif%}
@@ -11,7 +12,7 @@
             $("#submited-window").dialog({
                     modal: true,
                     dialogClass:'no-titlebar-small',
-                    width:340,
+                    width:280,
                     resizable:false,
                     beforeClose: function() {
                                     window.location = "{{index_url}}";