From d49a86e48cf2aa9808892e320587355325b8b5e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Tue, 16 May 2017 10:13:07 +0200
Subject: [PATCH] reimplement base editor layout (responsive switch)

---
 src/c3nav/editor/static/editor/css/editor.css | 49 ++++++++++++++-----
 src/c3nav/editor/static/editor/js/editor.js   | 24 ++++-----
 src/c3nav/editor/templates/editor/map.html    |  6 ++-
 3 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/c3nav/editor/static/editor/css/editor.css b/src/c3nav/editor/static/editor/css/editor.css
index ef251368..821e4da3 100644
--- a/src/c3nav/editor/static/editor/css/editor.css
+++ b/src/c3nav/editor/static/editor/css/editor.css
@@ -6,10 +6,11 @@ body {
 }
 #map {
     position:absolute;
-    top:54px;
+    top:0;
     bottom:0;
     left:0;
     right:350px;
+    z-index:1;
 }
 .leaflet-control-layers-overlays label {
     margin-bottom:0;
@@ -19,6 +20,20 @@ body {
     top:2px;
 }
 
+nav.navbar {
+    margin:0;
+}
+#main {
+    overflow:hidden;
+    position:absolute;
+    top:54px;
+    left:0;
+    width:100vw;
+    bottom:0;
+    padding:0;
+    margin:0;
+}
+
 form button.invisiblesubmit {
     overflow: visible;
     height: 0;
@@ -75,25 +90,30 @@ form button.invisiblesubmit {
 }
 
 
-#mapeditcontrols {
+#sidebar {
     position: absolute;
-    top: 54px;
-    bottom: 0;
-    width: 350px;
+    top:0;
     right: 0;
+    width: 350px;
+    height: 100%;
     overflow: auto;
-    padding:8px;
     background-color:#ffffff;
+    z-index:2;
 }
-#mapeditcontrols.loading {
+#sidebarcontent {
+    width:350px;
+    padding:10px 15px;
+    margin:auto;
+}
+#sidebarcontent.loading {
     background-image:url('/static/img/loader.gif');
     background-repeat:no-repeat;
     background-position:center;
 }
-#mapeditcontrols form.creation-lock .btn.btn-primary {
+#sidebar form.creation-lock .btn.btn-primary {
     display:none;
 }
-#mapeditcontrols h3 {
+#sidebar h3 {
     margin-top:5px;
 }
 a.list-group-item, a.list-group-item:hover {
@@ -141,19 +161,22 @@ legend {
 }
 
 @media (max-width: 767px) {
-    #mapeditcontrols {
+    #sidebar {
         transition: right 300ms;
         -webkit-transition: right 300ms;
         width:100vw;
     }
-    body:not(.controls) #mapeditcontrols {
+    #sidebarcontent {
+        width:100%;
+        max-width:500px;
+    }
+    body:not(.controls) #sidebar {
         pointer-events: none;
         right:-100vw;
     }
     #map {
-        transition: left 300ms, right ;
+        transition: left 300ms;
         -webkit-transition: left 300ms;
-        right: auto;
         width:100vw;
     }
     body.controls #map {
diff --git a/src/c3nav/editor/static/editor/js/editor.js b/src/c3nav/editor/static/editor/js/editor.js
index ee99a77d..e9eb2d6b 100644
--- a/src/c3nav/editor/static/editor/js/editor.js
+++ b/src/c3nav/editor/static/editor/js/editor.js
@@ -68,7 +68,7 @@ editor = {
     },
     init_sidebar: function() {
         // init the sidebar. sed listeners for form submits and link clicks
-        $('#mapeditcontrols').on('click', 'a[href]', editor._sidebar_link_click)
+        $('#sidebarcontent').on('click', 'a[href]', editor._sidebar_link_click)
                              .on('click', 'button[type=submit]', editor._sidebar_submit_btn_click)
                              .on('submit', 'form', editor._sidebar_submit);
         var location_path = editor.get_location_path();
@@ -81,7 +81,7 @@ editor = {
     sidebar_get: function(location) {
         // load a new page into the sidebar using a GET request
         var location_path = editor.get_location_path();
-        if ($('#mapeditcontrols').html() !== '') {
+        if ($('#sidebarcontent').html() !== '') {
             history.pushState({}, '', location);
         }
         editor._sidebar_unload();
@@ -90,15 +90,15 @@ editor = {
     _sidebar_unload: function() {
         // unload the sidebar. called on sidebar_get and form submit.
         editor._section_control.disable();
-        $('#mapeditcontrols').html('').addClass('loading');
+        $('#sidebarcontent').html('').addClass('loading');
         editor._unhighlight_geometry();
         editor._cancel_editing();
     },
     _sidebar_loaded: function(data) {
         // sidebar was loaded. load the content. check if there are any redirects. call _check_start_editing.
         var content = $(data);
-        var mapeditcontrols = $('#mapeditcontrols');
-        mapeditcontrols.html(content).removeClass('loading');
+        var sidebarcontent = $('#sidebarcontent');
+        sidebarcontent.html(content).removeClass('loading');
 
         redirect = $('span[data-redirect]');
         if (redirect.length) {
@@ -127,7 +127,7 @@ editor = {
         editor._check_start_editing();
     },
     _sidebar_error: function(data) {
-        $('#mapeditcontrols').html('<h3>Error '+data.status+'</h3>'+data.statusText).removeClass('loading');
+        $('#sidebarcontent').html('<h3>Error '+data.status+'</h3>'+data.statusText).removeClass('loading');
         editor._section_control.hide();
     },
     _sidebar_link_click: function(e) {
@@ -173,7 +173,7 @@ editor = {
         editor._highlight_layer = L.layerGroup().addTo(editor.map);
         editor._editing_layer = L.layerGroup().addTo(editor.map);
 
-        $('#mapeditcontrols').on('mouseenter', '.itemtable tr[data-name]', editor._hover_mapitem_row)
+        $('#sidebarcontent').on('mouseenter', '.itemtable tr[data-name]', editor._hover_mapitem_row)
                              .on('mouseleave', '.itemtable tr[data-name]', editor._unhighlight_geometry);
 
         editor.map.on('editable:drawing:commit', editor._done_creating);
@@ -318,15 +318,15 @@ editor = {
     // edit and create geometries
     _check_start_editing: function() {
         // called on sidebar load. start editing or creating depending on how the sidebar may require it
-        var mapeditcontrols = $('#mapeditcontrols');
+        var sidebarcontent = $('#sidebarcontent');
 
         var id_name = $('#id_name');
         id_name.focus();
-        if (mapeditcontrols.find('[data-new]').length) {
+        if (sidebarcontent.find('[data-new]').length) {
             id_name.select();
         }
 
-        var geometry_field = mapeditcontrols.find('input[name=geometry]');
+        var geometry_field = sidebarcontent.find('input[name=geometry]');
         if (geometry_field.length) {
             var form = geometry_field.closest('form');
             var mapitem_type = form.attr('data-mapitem-type');
@@ -410,7 +410,7 @@ editor = {
             editor._editing.addTo(editor._editing_layer);
             editor._editing.on('click', editor._click_editing_layer);
             editor._update_editing();
-            $('#mapeditcontrols').find('form.creation-lock').removeClass('creation-lock');
+            $('#sidebarcontent').find('form.creation-lock').removeClass('creation-lock');
             $('#id_name').focus();
         }
     },
@@ -521,6 +521,6 @@ SectionControl = L.Control.extend({
 });
 
 
-if ($('#mapeditcontrols').length) {
+if ($('#sidebarcontent').length) {
     editor.init();
 }
diff --git a/src/c3nav/editor/templates/editor/map.html b/src/c3nav/editor/templates/editor/map.html
index 411b96a2..4ac3ff76 100644
--- a/src/c3nav/editor/templates/editor/map.html
+++ b/src/c3nav/editor/templates/editor/map.html
@@ -12,7 +12,9 @@
 {% endblock %}
 {% block content %}
 <div id="map"></div>
-<div id="mapeditcontrols" class="loading">
-    <span data-level-switch="{% url 'editor.mapitemtypes' level='LEVEL' %}"></span>
+<div id="sidebar">
+    <div id="sidebarcontent" class="loading">
+        <span data-level-switch="{% url 'editor.mapitemtypes' level='LEVEL' %}"></span>
+    </div>
 </div>
 {% endblock %}