Switch menu for small screens

2 files changed, 96 insertions, 1 deletions

diff --git a/static/saclay/css/styles.css b/static/saclay/css/styles.css
index 1bdbed1..fbda6a4 100644
--- a/static/saclay/css/styles.css
+++ b/static/saclay/css/styles.css
@@ -1151,7 +1151,6 @@ div#panel{
     background-image:url('../images/logo.jpg');
     background-repeat:repeat-x;
     background-position:left top;
-    background-color: transparent;
     overflow-x:hidden;
     background-color: #fff;
 }
@@ -2210,3 +2209,94 @@ li.main_category li.subcategory > span > label{
     border-radius: 0;
     border: 1px solid #eee;
 }
+
+#switch-menu{
+    display: none;
+    text-align: center;
+    font-size: 1.2em;
+    padding: 0;
+    position: absolute;
+    top: 98px;
+    z-index: 200;
+    right: 0;
+    left: 0;
+    background-color: #fff;
+}
+
+#switch-menu div{
+    padding: 0.2em;
+}
+
+#switch-menu div.selected{
+    background-color: #d5d5d4;
+}
+
+@media screen and (max-width: 640px) {
+    #switch-menu{
+        display: block;
+    }
+    .ol-zoom, .layer-switcher{
+        top: 140px;
+    }
+    .ol-full-screen{
+        display:none;
+    }
+    #search-listing{
+        padding-top: 25px;
+    }
+    div#sidebar,
+    div#panel{
+        width: 100%;
+        bottom: auto;
+    }
+    div#panel{
+        background-size: auto 80px;
+        background-repeat: no-repeat;
+        padding-top: 5px;
+        display: block;
+    }
+    #map-shadow{
+        display: none;
+    }
+    #search-box{
+        padding-bottom: 0;
+    }
+    .sidebar-handler,
+    #frm_categories{
+        display: none;
+    }
+    div#sidebar-container{
+        height:auto;
+    }
+    #sidebar-handler-hide,
+    #sidebar-handler-show,
+    div#sidebar{
+        background-image: none;
+    }
+    #search-form input{
+        width: 80%;
+    }
+    #maps-lnk{
+        padding: 0.5em 0.8em;
+        margin-left: 100px;
+    }
+    .main-category-tick{
+        left:auto
+        right: 50px;
+    }
+    #edit-button {
+        top: auto;
+        bottom: 60px;
+        right: 20px;
+        left: auto;
+    }
+    #footer .map-footer {
+        right: 0;
+        left: 0;
+    }
+    .main-category-tick{
+        right: 1.5em;
+        left: auto;
+    }
+}
+
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index ded7627..3e441dc 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -28,6 +28,11 @@
 {% endblock %}
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
+<div id="switch-menu" class="row">
+    <div class="col-xs-4"><a href="#">{% trans "Map" %}</a></div>
+    <div class="col-xs-4"><a href="#">{% trans "Search result" %}</a></div>
+    <div class="col-xs-4 selected"><a href="#">{% trans "Categories" %}</a></div>
+</div>
   <div id="sidebar-container">
     <div class='sidebar-handler' id='sidebar-handler-hide'></div>
     <div id='panel'>