Edit: many improvments on style and layout

2 files changed, 72 insertions, 11 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();