New layout

5 files changed, 253 insertions, 163 deletions

diff --git a/static/saclay/css/styles.css b/static/saclay/css/styles.css
index f580139..c5cd016 100644
--- a/static/saclay/css/styles.css
+++ b/static/saclay/css/styles.css
@@ -50,7 +50,7 @@ a, a:link, a:visited,
 #footer .map-footer a:visited,
 #welcome .footer,
 caption{
-    color:#9da1a1;
+    color:#444;
 }
 
 /* alternat link */
@@ -98,10 +98,10 @@ body, #content,
 
 /* alternative background */
 #layer_selection #layer_list li.head,
-.welcome-dialog h2, #footer-panel,
+.welcome-dialog h2,
 ul#multimedia_list_content li, #welcome .footer,
 #action{
-    background-color:#d6d6c4;
+    background-color: #eaeaea;
 }
 
 #detail_footer{
@@ -488,14 +488,6 @@ a#ui-active-menuitem.ui-state-hover{
     background-image:none;
 }
 
-#haystack-search{
-    width:35px;
-    height:28px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    vertical-align:top;
-}
-
 #search-listing img{
     vertical-align:middle;
 }
@@ -759,6 +751,7 @@ a#ui-active-menuitem.ui-state-hover{
     padding:0;
     background-image:url('../images/background-top.png');
     background-repeat:repeat-x;
+    display: none;
 }
 
 #header{
@@ -973,7 +966,7 @@ ul#action{
 */
 
 #main-map{
-    top:26px;
+    top: 0;
     bottom:0;
     height:auto;
 }
@@ -1053,23 +1046,51 @@ div#sidebar{
 
 div#sidebar{
     z-index:7;
-    width:295px;
-    top:26px;
+    width:297px;
+    top: 0;
     position:absolute;
     bottom:0;
     padding-right:15px;
+    border-width:0 1px;
+}
+
+div#sidebar-container{
+    background-color: white;
+    width: 100%;
+    height: 100%;
+    background-image:url('../images/gradient.png');
+    background-repeat:repeat-x;
+    background-position:left bottom;
 }
 
 div#action-panel{
-    border-width:0;
-    border-right-width:1px;
-    border-style:solid;
-    z-index:10;
-    height:60px;
-    width:283px;
-    background-image:url(../images/background-small.png) ;
-    background-repeat:repeat;
-    background-position:center;
+    display: none;
+}
+
+.action-button:hover{
+    cursor: pointer;
+    color: #999;
+}
+
+.action-button{
+    position: absolute;
+    background-color: #fff;
+    z-index: 10;
+    padding: 10px;
+    border-radius: 20px;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+}
+
+#edit-button{
+    top: 20px;
+    left: 300px;
+}
+
+#routing-button{
+    bottom: 40px;
+    right: 40px;
 }
 
 div#panel{
@@ -1078,25 +1099,30 @@ div#panel{
     z-index:10;
     max-height:none;
     padding:0;
+    padding-top: 170px;
     right:auto;
     bottom:26px;
-    top:60px;
+    top: 0;
     border-width:0 1px;
     background-image:url('../images/logo.jpg');
     background-repeat:repeat-x;
-    background-position:left bottom;
+    background-position:left top;
+    background-color: transparent;
     overflow-x:hidden;
 }
 
 #footer-panel{
     text-align:center;
-    padding:3px;
     bottom:0;
     position:absolute;
-    width: 282px;
+    width: 283px;
     height: 26px;
+    font-size: 0.88em;
 }
 
+#footer-panel a{
+    font-variant: small-caps;
+}
 /* share toolbar */
 
 a.share_id_email_single{
@@ -1568,6 +1594,10 @@ ul#roadmap_toolbar, ul#roadmap_toolbar ul, ul#roadmap_toolbar li{
     padding:4px;
 }
 
+#edit-panel {
+    padding: 25px 0;
+}
+
 #edit-panel label{
     font-size:0.9em;
 }
@@ -1639,6 +1669,45 @@ ul#roadmap_toolbar, ul#roadmap_toolbar ul, ul#roadmap_toolbar li{
     border:none;
 }
 
+#back-categories{
+    color: #60543A;
+    background-color: #eaeaea;
+    font-weight: 900;
+    padding: 0;
+    width: 282px;
+    position: fixed;
+    bottom: 26px;
+    left: 0;
+    font-family: 'Numans';
+    z-index: 10;
+    display: none;
+}
+
+#back-categories:hover{
+    cursor: pointer;
+}
+
+#back-categories .fa,
+#back-categories p{
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+}
+
+#back-categories p{
+    height: 26px;
+    vertical-align: middle;
+    padding-left: 0.3em;
+}
+
+#back-categories .fa{
+    font-size: 2em;
+    padding-top: 4px;
+    padding-left: 12px;
+}
+
+
+
 input.hasDatepicker{
     background-image:url(../images/buttons/calendar.png) ;
     background-repeat:no-repeat;
diff --git a/static/saclay/images/gradient.png b/static/saclay/images/gradient.png
new file mode 100644
index 0000000..c745816
--- /dev/null
+++ b/static/saclay/images/gradient.png
diff --git a/static/saclay/js/interface.js b/static/saclay/js/interface.js
index 790c525..149af29 100644
--- a/static/saclay/js/interface.js
+++ b/static/saclay/js/interface.js
@@ -1,7 +1,152 @@
 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.<br/>Pour modifier le trajet sélectionnez un nœud puis glissez-déposez pour le déplacer.";
 var msg_edit = "Cliquez sur la carte pour placer le lieu. Pour modifier ce lieu sélectionnez-le puis glissez-déposez pour le déplacer.";
 
+var update_editmarker = function(){
+    $("#main-map").chimere('cleanRoute');
+    $('.map_button').hide();
+    if($('#multimedia_form').length) $('#multimedia_form').remove();
+    $('#action-edit-event').removeClass('state-active');
+    $('#action-edit-route').removeClass('state-active');
+    $('#action-edit-marker').addClass('state-active');
+    $('#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) {
+                $('#frm-edit-event').html('');
+                $('#frm-edit-route').html('');
+                $('#frm-edit-marker').html(data);
+                $("#main-map").chimere('activateMarkerEdit');
+            },
+            error: function (data) {
+                $('#frm-edit-marker').html("<p class='warning'>"+
+                                    default_error_message+"</p>");
+            }
+        });
+};
+
+var update_editevent = function(){
+    $("#main-map").chimere('cleanRoute');
+    $('.map_button').hide();
+    if($('#multimedia_form').length) $('#multimedia_form').remove();
+    $('#action-edit-marker').removeClass('state-active');
+    $('#action-edit-route').removeClass('state-active');
+    $('#action-edit-event').addClass('state-active');
+    $('#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) {
+                $('#frm-edit-marker').html('');
+                $('#frm-edit-route').html('');
+                $('#frm-edit-event').html(data);
+                $("#main-map").chimere('activateMarkerEdit');
+            },
+            error: function (data) {
+                $('#frm-edit-event').html("<p class='warning'>"+
+                                    default_error_message+"</p>");
+            }
+        });
+};
+
+var update_editroute = function(){
+    $('.map_button').show();
+    if($('#multimedia_form').length) $('#multimedia_form').remove();
+    $('#action-edit-marker').removeClass('state-active');
+    $('#action-edit-event').removeClass('state-active');
+    $('#action-edit-route').addClass('state-active');
+    $('#frm-edit-marker').hide();
+    $('#frm-edit-event').hide();
+    $('#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) {
+                $('#frm-edit-marker').html('');
+                $('#frm-edit-event').html('');
+                $('#frm-edit-route').html(data);
+                $("#main-map").chimere('cleanMarker');
+                $("#main-map").chimere('activateRouteEdit');
+            },
+            error: function (data) {
+                $('#frm-edit-route').html("<p class='warning'>"+
+                                    default_error_message+"</p>");
+            }
+        });
+};
+
+var routing_panel_open = function(){
+    $('#frm_categories').hide();
+    $('#search-box').hide();
+    $('#frm-edit-marker').hide();
+    $('#chimere_itinerary_panel').show();
+    $('#back-categories').show();
+};
+
+var category_panel_open = function(){
+    $('#chimere_itinerary_panel').hide();
+    $('#search-result').hide();
+    $('#frm-edit-marker').hide();
+    $('#back-categories').hide();
+    $('#search-box').show();
+    $('#frm_categories').show();
+};
+
+var search_panel_open = function(){
+    $('#chimere_itinerary_panel').hide();
+    $('#frm_categories').hide();
+    $('#frm-edit-marker').hide();
+    $('#search-box').show();
+    $('#search-result').show();
+    $('#back-categories').show();
+};
+
+var edit_panel_open = function(){
+    update_editmarker();
+    $('#chimere_itinerary_panel').hide();
+    $('#search-box').hide();
+    $('#search-result').hide();
+    $('#frm_categories').hide();
+    $('#edit-actions').show();
+    $('#back-categories').show();
+};
+
 $(function(){
+
+    $('#action-routing').click(routing_panel_open);
+    $('#routing-button').click(routing_panel_open);
+    $('#action-categories').click(category_panel_open);
+    $('#action-search').click(search_panel_open);
+    $('#edit-button').click(edit_panel_open);
+    $('#back-categories').click(category_panel_open);
+
+    $('#sidebar-handler-hide').click(function(){$('#sidebar').hide();});
+    $('#sidebar-handler-show').click(function(){$('#sidebar').show();});
+
     $('#message').hide();
 
     $("[data-hide]").on("click", function(){
@@ -17,104 +162,6 @@ $(function(){
         $(".buttonset label").removeAttr("aria-pressed");
         $(this).attr("aria-pressed", 'true');
     });
-
-    var update_editmarker = function(){
-        $("#main-map").chimere('cleanRoute');
-        $('.map_button').hide();
-        if($('#multimedia_form').length) $('#multimedia_form').remove();
-        $('#action-edit-event').removeClass('state-active');
-        $('#action-edit-route').removeClass('state-active');
-        $('#action-edit-marker').addClass('state-active');
-        $('#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) {
-                    $('#frm-edit-event').html('');
-                    $('#frm-edit-route').html('');
-                    $('#frm-edit-marker').html(data);
-                    $("#main-map").chimere('activateMarkerEdit');
-                },
-                error: function (data) {
-                    $('#frm-edit-marker').html("<p class='warning'>"+
-                                        default_error_message+"</p>");
-                }
-            });
-    };
-
-    var update_editevent = function(){
-        $("#main-map").chimere('cleanRoute');
-        $('.map_button').hide();
-        if($('#multimedia_form').length) $('#multimedia_form').remove();
-        $('#action-edit-marker').removeClass('state-active');
-        $('#action-edit-route').removeClass('state-active');
-        $('#action-edit-event').addClass('state-active');
-        $('#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) {
-                    $('#frm-edit-marker').html('');
-                    $('#frm-edit-route').html('');
-                    $('#frm-edit-event').html(data);
-                    $("#main-map").chimere('activateMarkerEdit');
-                },
-                error: function (data) {
-                    $('#frm-edit-event').html("<p class='warning'>"+
-                                        default_error_message+"</p>");
-                }
-            });
-    };
-
-    var update_editroute = function(){
-        $('.map_button').show();
-        if($('#multimedia_form').length) $('#multimedia_form').remove();
-        $('#action-edit-marker').removeClass('state-active');
-        $('#action-edit-event').removeClass('state-active');
-        $('#action-edit-route').addClass('state-active');
-        $('#frm-edit-marker').hide();
-        $('#frm-edit-event').hide();
-        $('#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) {
-                    $('#frm-edit-marker').html('');
-                    $('#frm-edit-event').html('');
-                    $('#frm-edit-route').html(data);
-                    $("#main-map").chimere('cleanMarker');
-                    $("#main-map").chimere('activateRouteEdit');
-                },
-                error: function (data) {
-                    $('#frm-edit-route').html("<p class='warning'>"+
-                                        default_error_message+"</p>");
-                }
-            });
-    };
     $("#action-news").click(function(){
         $('#news').dialog('open');
     });
diff --git a/templates/chimere/blocks/map.html b/templates/chimere/blocks/map.html
index a51466b..da68b49 100644
--- a/templates/chimere/blocks/map.html
+++ b/templates/chimere/blocks/map.html
@@ -21,41 +21,6 @@ $("#{{map_id}}").show();
 
 
 <script type="text/javascript">
-    var routing_panel_open = function(){
-        $('#frm_categories').hide();
-        $('#search-box').hide();
-        $('#chimere_itinerary_panel').show();
-        $('#action-categories').removeClass('state-active');
-        $('#action-search').removeClass('state-active');
-        $('#action-routing').addClass('state-active');
-    };
-
-    $('#action-routing').click(routing_panel_open);
-
-    var category_panel_open = function(){
-        $('#chimere_itinerary_panel').hide();
-        $('#search-box').hide();
-        $('#frm_categories').show();
-        $('#action-routing').removeClass('state-active');
-        $('#action-search').removeClass('state-active');
-        $('#action-categories').addClass('state-active');
-    };
-
-    $('#action-categories').click(category_panel_open);
-
-    var search_panel_open = function(){
-        $('#chimere_itinerary_panel').hide();
-        $('#frm_categories').hide();
-        $('#search-box').show();
-        $('#action-routing').removeClass('state-active');
-        $('#action-categories').removeClass('state-active');
-        $('#action-search').addClass('state-active');
-    };
-
-    $('#action-search').click(search_panel_open);
-
-    $('#sidebar-handler-hide').click(function(){$('#sidebar').hide();});
-    $('#sidebar-handler-show').click(function(){$('#sidebar').show();});
 
     {% if single_category %}
     $(function() {$('#panel').hide()});{% endif %}
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index 139ad7f..d20d7a8 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -23,6 +23,7 @@
 {% endblock %}
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
+  <div id="sidebar-container">
     <div class='sidebar-handler' id='sidebar-handler-hide'>
     </div>
     <div id='action-panel'{% if has_search %} class='three'{% endif %}>
@@ -50,11 +51,11 @@
     </div>
     <div id='panel'>
         <div id='map-panel'>
+            <div id='search-box'></div>
             <form action='.' method='post' name='frm_categories' id='frm_categories'>
                 <div id='categories'>{# dynamic content #}
                 </div>
             </form>
-            <div id='search-box'></div>
             {% routing %}
         </div>
         <div id='edit-panel'>
@@ -66,10 +67,14 @@
             </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'>
-        {% if contact_email %}<a href='mailto:{{contact_email}}' id='contactus'>{% trans "contact us" %}</a> | {% endif %}
-        <a href='{% url 'chimere:extra_page' '' 'legal' %}' id='page-legal' class='dyn-page'>{% trans "terms of service, credits" %}</a>
+        {% if contact_email %}<a href='mailto:{{contact_email}}' id='contactus'>{% trans "contact" %}</a> | {% endif %}
+        <a href='{% url 'chimere:extra_page' '' 'legal' %}' id='page-legal' class='dyn-page'>{% trans "terms of service & credits" %}</a>
     </div>
+  </div>
 {% endblock %}
 {% block content %}
     <div id='category_description'>
@@ -100,6 +105,10 @@
     {% display_news news_visible %}
     {{ block.super }}
     <div id='map-shadow'></div>
+    <div id='edit-button' class="action-button">
+        <i class="fa fa-plus" aria-hidden="true"></i></div>
+    {% if itinerary_form %}<div id='routing-button' class="action-button">
+        <i class="fa fa-map-signs" aria-hidden="true"></i></div>{% endif %}
     <div id='default-message'></div>
 <script type="text/javascript">
    <!--