Improve routing layout and management

4 files changed, 98 insertions, 165 deletions

diff --git a/static/saclay/css/styles.css b/static/saclay/css/styles.css
index f08947c..c87c060 100644
--- a/static/saclay/css/styles.css
+++ b/static/saclay/css/styles.css
@@ -1,3 +1,9 @@
+@font-face {
+    font-family: TexGyreHeros;
+    font-weight: bold;
+    src: url("../fonts/texgyreheros-bold.otf") format("opentype");
+}
+
 /*
  * Font colors
  */
@@ -785,32 +791,70 @@ ul#action{
     height:38px;
     width:138px;
     margin-top:22px;
+    margin-right: 3px;
 }
 
 #action-panel.three .action li {
     padding: 0px;
     height: 38px;
-    width: 92px;
+    width: auto;
 }
 
-.action li,
-.action li a,
-.action li label{
+.action li{
+    font-family: "TexGyreHeros", "Helvetica Neue",Helvetica,Arial,sans-serif;
+    background-color: #c1c1b0;
+    text-transform:uppercase;
+    width:141px;
+    display:block;
     padding:0;
     margin:0;
     font-size:1.1em;
-    margin-top:10px;
     text-align:center;
-    width:141px;
-    display:block;
-    text-transform:uppercase;
-    color:transparent;
-    font-size:0;
+}
+
+.action li,
+.action li a,
+.action li label{
+    margin-top:10px;
     border-width:0;
+    color: #fff;
+}
+
+#topbar .action li a,
+#topbar .action li a:link,
+#topbar .action li a:visited,
+#topbar .action li{
+    line-height: 23px;
+    font-size: 19px;
+}
+
+#action-panel li{
+    border-radius: 10px 10px 0 0;
+}
+
+#action-panel li:first-child {
+    border-radius: 0 10px 0 0;
+}
+
+#action-panel li:last-child {
+    border-radius: 10px 0 0 0;
+    margin-right: 0;
+}
+
+#topbar .action li:hover a,
+#topbar .action li:hover a:link,
+#topbar .action li:hover a:visited,
+.action li:hover,
+.action li:hover label,
+.action li.state-active,
+.action li.state-active label{
+    background-color: #fff;
+    color: #c1c1b0;
 }
 
 .action li label{
-    width:130px;
+    width:92px;
+    font-size:12px;
 }
 
 #action-3.action li,
@@ -823,9 +867,11 @@ ul#action{
     font-size:0;
 }
 
+#action-3.action li.share-list li a,
 #action-3.action li.share-list li,
 #action-3.action li.share-list{
     width:auto;
+    font-size: 0;
 }
 
 #action-3.action li.share-list li.shared,
@@ -834,7 +880,13 @@ ul#action{
     margin:1px 0;
 }
 
-.action li.print-page{
+#topbar .action li.print-page a,
+#topbar .action li.print-page{
+    font-size: 0;
+    color: transparent;
+}
+
+#topbar .action li.print-page{
     background-image:url(../images/buttons/button-print-off.png) ;
     background-repeat:no-repeat;
 }
@@ -878,99 +930,6 @@ ul#action{
     background-repeat:no-repeat;
 }
 
-#action-carte{
-    background-image:url(../images/button-map-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-carte.state-active,
-#action-carte:hover{
-    background-image:url(../images/button-map-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-participate{
-    background-image:url(../images/button-participate-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-participate.state-active,
-#action-participate:hover{
-    background-image:url(../images/button-participate-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-news{
-    background-image:url(../images/button-news-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-news.state-active,
-#action-news:hover{
-    background-image:url(../images/button-news-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-project{
-    background-image:url(../images/button-project-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-project.state-active,
-#action-project:hover{
-    background-image:url(../images/button-project-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-categories{
-    background-image:url(../images/button-cat-off.png) ;
-    background-repeat:no-repeat;
-    margin-right:6px;
-}
-
-#action-categories.state-active,
-#action-categories:hover{
-    background-image:url(../images/button-cat-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-routing{
-    background-image:url(../images/button-route-off.png) ;
-    background-repeat:no-repeat;
-}
-
-.three #action-categories{
-    background-image:url(../images/button-cat-three-off.png) ;
-    margin-right:3px;
-}
-
-.three #action-categories.state-active,
-.three #action-categories:hover{
-    background-image:url(../images/button-cat-three-on.png) ;
-}
-
-.three #action-routing{
-    background-image:url(../images/button-route-three-off.png) ;
-}
-
-.three #action-routing.state-active,
-.three #action-routing:hover{
-    background-image:url(../images/button-route-three-on.png) ;
-}
-
-#action-search{
-    background-image:url(../images/button-search-off.png) ;
-    background-repeat:no-repeat;
-    margin-right:3px;
-}
-
-#action-search.state-active,
-#action-search:hover{
-    background-image:url(../images/button-search-on.png) ;
-    background-repeat:no-repeat;
-}
-
-
 #action-categories.category-selected label{
     background-image:url(../images/check-active.png) ;
     background-repeat:no-repeat;
@@ -986,52 +945,6 @@ ul#action{
     background-position:right center;
 }
 
-#action-edit-marker{
-    background-image:url(../images/button-location-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-panel .action li#action-edit-marker{
-    width:78px;
-}
-
-#action-edit-marker.state-active,
-#action-edit-marker:hover{
-    background-image:url(../images/button-location-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-panel .action li#action-edit-route{
-    width:98px;
-}
-
-#action-edit-route{
-    background-image:url(../images/button-wander-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-edit-route.state-active,
-#action-edit-route:hover{
-    background-image:url(../images/button-wander-on.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-panel .action li#action-edit-event{
-    width:104px;
-}
-
-#action-edit-event{
-    background-image:url(../images/button-event-off.png) ;
-    background-repeat:no-repeat;
-}
-
-#action-edit-event.state-active,
-#action-edit-event:hover{
-    background-image:url(../images/button-event-on.png) ;
-    background-repeat:no-repeat;
-}
-
-
 #main-map{
     top:26px;
     bottom:0;
@@ -1121,7 +1034,7 @@ div#action-panel{
     border-style:solid;
     z-index:10;
     height:60px;
-    width:282px;
+    width:283px;
     background-image:url(../images/background-small.png) ;
     background-repeat:repeat;
     background-position:center;
@@ -1129,7 +1042,7 @@ div#action-panel{
 
 div#panel{
     position:absolute;
-    width:281px;
+    width:282px;
     z-index:10;
     max-height:none;
     padding:0;
@@ -1143,6 +1056,15 @@ div#panel{
     overflow-x:hidden;
 }
 
+#footer-panel{
+    text-align:center;
+    padding:3px;
+    bottom:0;
+    position:absolute;
+    width: 282px;
+    height: 26px;
+}
+
 /* share toolbar */
 
 a.share_id_email_single{
@@ -1163,15 +1085,6 @@ ul.share {
     padding: 2px 0;
 }
 
-#footer-panel{
-    text-align:center;
-    padding:3px;
-    bottom:0;
-    position:absolute;
-    width: 281px;
-    height: 26px;
-}
-
 .sidebar-handler{
     height:55px;
     width:18px;
@@ -1305,6 +1218,22 @@ ul#ul_categories{
     color:transparent;
     font-size:0;
 }
+
+#id_transport input{
+    display: none;
+}
+
+#id_transport label:hover{
+    cursor: pointer;
+}
+
+#id_transport label{
+    font-size: 0;
+    display: inline-block;
+    width: 125px;
+    height: 24px;
+}
+
 #id_transport_it span{
     margin-right:-3px;
 
diff --git a/static/saclay/js/interface.js b/static/saclay/js/interface.js
index 536f827..87b432e 100644
--- a/static/saclay/js/interface.js
+++ b/static/saclay/js/interface.js
@@ -4,6 +4,10 @@ $(function(){
                                   width:630,
                                    'dialogClass':'no-titlebar'});
     $("#categories").fadeIn();
+    $(".buttonset label").click(function(){
+        $(".buttonset label").removeAttr("aria-pressed");
+        $(this).attr("aria-pressed", 'true');
+    });
 
     var update_editmarker = function(){
         $("#main-map").chimere('cleanRoute');
diff --git a/templates/chimere/blocks/routing.html b/templates/chimere/blocks/routing.html
index da4b6be..6f57594 100644
--- a/templates/chimere/blocks/routing.html
+++ b/templates/chimere/blocks/routing.html
@@ -11,7 +11,7 @@ Nos informations sont actualisées aussi souvent que possible, mais nous ne pouv
       {{ hidden }}
     {% endfor %}
 
-    <div id="id_transport_div">
+    <div id="id_transport_div" class='buttonset'>
     {{itinerary_form.transport}}
     </div>
 
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index 42c770f..d8a1bde 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -30,10 +30,10 @@
             <li id='action-categories' class='state-active'>
                 <label>{% trans "Categories" %}</label>
             </li>{% if has_search %}<li id='action-search'>
-                <label>{% trans "Search" %}</label>
+                <label>{% trans "Search" context "menu" %}</label>
             </li>{% endif %}{% if itinerary_form %}
             <li id='action-routing'>
-                <label>{% trans "Routing" %}</label>
+                <label>{% trans "Routing" context "menu"%}</label>
             </li>{% endif %}
         </ul>
         <ul id='edit-actions' class='action'>