From 8f4c4beaeeaa62dabaee7879544e71cf4937db91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 11 Mar 2018 11:33:49 +0100
Subject: [PATCH 1/8] backoffice: adapt sidebar to native gadjo sidebar
 (#22440)

---
 wcs/qommon/static/css/dc2/admin.css  | 38 +++++++++++++---------------
 wcs/qommon/static/js/qommon.admin.js | 23 ++++++++---------
 wcs/templates/wcs/backoffice.html    | 15 +++++------
 3 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/wcs/qommon/static/css/dc2/admin.css b/wcs/qommon/static/css/dc2/admin.css
index 556d8259..370bc3ea 100644
--- a/wcs/qommon/static/css/dc2/admin.css
+++ b/wcs/qommon/static/css/dc2/admin.css
@@ -198,7 +198,7 @@ div#new-field form {
 	margin-bottom: 2em;
 }
 
-div#sidebar div.news h3,
+aside#sidebar div.news h3,
 div#new-trigger h3,
 div#new-field h3 {
 	margin: 0;
@@ -208,7 +208,7 @@ div#new-field h3 {
 	border-bottom: 1px solid #dcdcdc;
 }
 
-div#sidebar div.news h3 {
+aside#sidebar div.news h3 {
 	margin-top: 1em;
 }
 
@@ -581,23 +581,15 @@ ul#menu li.active a:hover {
 	border-color: white;
 }
 
-div#main-content.with-sidebar {
-	width: 75%;
-}
-
-div#sidebar {
+div#sticky-sidebar {
 	position: absolute;
-	right: 0;
-	width: 21%;
-	margin-right: 2%;
-	color: #666;
 	height: calc(100vh - 5em - 3em);
 	overflow-y: auto;
-	padding-left: 2px;
+	width: 100%;
 }
 
-div#sidebar form#listing-settings div.StringWidget input,
-div#sidebar select {
+aside#sidebar form#listing-settings div.StringWidget input,
+aside#sidebar select {
 	width: 100%;
 	margin: 1px 0;
 }
@@ -628,15 +620,15 @@ div.SingleSelectHintWidget select {
 	text-overflow: ellipsis;
 }
 
-div#sidebar input.inline-input {
+aside#sidebar input.inline-input {
 	margin-right: 1em;
 }
 
-div#sidebar input.side-button {
+aside#sidebar input.side-button {
 	margin-top: 0;
 }
 
-div#sidebar div.bo-block {
+aside#sidebar div.bo-block {
 	margin-left: 0;
 	margin-right: 0;
 }
@@ -1020,7 +1012,11 @@ ul.multipage li.type-page {
 }
 
 #sidebar-toggle {
-	float: left;
+	display: block;
+	text-align: center;
+	z-index: 10;
+	top: 0;
+	left: -1rem;
 	position: absolute;
 	height: 50px;
 	line-height: 50px;
@@ -1183,7 +1179,7 @@ fieldset.form-plus.closed legend:after {
 		padding: 1em 6px 0 6px;
 	}
 
-	div#sidebar {
+	aside#sidebar {
 		float: none;
 		width: auto;
 		margin: 2%;
@@ -1363,7 +1359,7 @@ div#tracking-code button {
 }
 
 @media print {
-	div#sidebar {
+	aside#sidebar {
 		display: none;
 	}
 	div#main-content {
@@ -1580,7 +1576,7 @@ div.bo-block.data-source-preview tt {
 	padding-right: 1ex;
 }
 
-div#sidebar div.MapWidget {
+aside#sidebar div.MapWidget {
 	margin: 0 1px;
 	border: 1px solid #888;
 }
diff --git a/wcs/qommon/static/js/qommon.admin.js b/wcs/qommon/static/js/qommon.admin.js
index bef036e0..ca22dab8 100644
--- a/wcs/qommon/static/js/qommon.admin.js
+++ b/wcs/qommon/static/js/qommon.admin.js
@@ -130,14 +130,13 @@ $(function() {
 
     /* possibility to toggle the sidebar */
     if ($('#sidebar').length) {
-      $('#main-content').after($('<span id="sidebar-toggle">&#8286;</span>'));
       $('#sidebar-toggle').click(function() {
-        if ($('#sidebar').css('display') === 'none') {
-          $('#main-content').animate({width: '75%'}, 400,
-              function() {$('#sidebar').show()});
+        if ($('#sticky-sidebar').css('display') === 'none') {
+          $('#sidebar').animate({'max-width': '30rem'}, 400,
+              function() {$('#sticky-sidebar').show()});
         } else {
-          $('#sidebar').hide();
-          $('#main-content').animate({width: '99%'});
+          $('#sticky-sidebar').hide();
+          $('#sidebar').animate({'max-width': '0rem'});
         }
       });
     }
@@ -148,20 +147,20 @@ $(function() {
     });
 
     /* keep sidebar sticky */
-    if ($('#sidebar').length) {
+    if ($('#sticky-sidebar').length) {
       var $window = $(window);
-      var sidebar_fixed_from = $('#sidebar').offset().top;
-      var sidebar_top = $('#sidebar').position().top;
+      var sidebar_fixed_from = $('#sticky-sidebar').offset().top;
+      var sidebar_top = $('#sticky-sidebar').position().top;
       $window.bind('scroll', function() {
         var pos = $window.scrollTop();
         var minus = 0;
         if (pos >= sidebar_fixed_from) {
-          $('#sidebar').css('top', pos - (sidebar_fixed_from - sidebar_top));
+          $('#sticky-sidebar').css('top', pos - (sidebar_fixed_from - sidebar_top));
         } else {
-          $('#sidebar').css('top', 'auto');
+          $('#sticky-sidebar').css('top', 'auto');
           minus = sidebar_fixed_from - pos;
         }
-        $('#sidebar').css('height', 'calc(100vh - 5px - ' + minus + 'px)');
+        $('#sticky-sidebar').css('height', 'calc(100vh - 5px - ' + minus + 'px)');
       });
       $window.trigger('scroll');
     }
diff --git a/wcs/templates/wcs/backoffice.html b/wcs/templates/wcs/backoffice.html
index 13875d8a..f7c0c125 100644
--- a/wcs/templates/wcs/backoffice.html
+++ b/wcs/templates/wcs/backoffice.html
@@ -29,18 +29,17 @@
 </div>
 {% endblock %}
 
-{% block main-content-attributes %}
-{% if sidebar %}class="with-sidebar"{% endif %}
-{% endblock %}
-
 {% block main-content %}
 {{ body|safe }}
 {% endblock %}
 
-{% block after-main-content %}
+{% block sidebar %}
 {% if sidebar %}
-<div id="sidebar">
-{{ sidebar|safe }}
-</div>
+<aside id="sidebar">
+  <span id="sidebar-toggle">&#8286;</span>
+  <div id="sticky-sidebar">
+    {{ sidebar|safe }}
+  </div>
+</aside>
 {% endif %}
 {% endblock %}
-- 
2.17.0