[REF] planner: sidebar menu

fp's request

addons/web/static/src/less/enterprise_compatibility.less

@@ -365,5 +365,6 @@ div.o_checkbox {
     top: 35px;
     -webkit-box-shadow: 0 3px 9px #666666;
     box-shadow: 0 3px 9px #666666;
+    padding-bottom: 44px;
 }
 

addons/web_planner/static/src/js/web_planner_common.js

@@ -89,8 +89,7 @@ var PlannerDialog = Widget.extend({
             self.pages.forEach(function(page) {
                 page.menu_item = self._find_menu_item_by_page_id(page.id);
             });
-
-            self.$el.append(self.$res);
+            self.$el.find('.o_planner_content_wrapper').append(self.$res);
 
             // update the planner_data with the new inputs of the view
             var actual_vals = self._get_values();

addons/web_planner/static/src/less/web_planner_common.less

@@ -213,24 +213,51 @@
     bottom: 0px;
     width: @o_planner_width;
     z-index: 1001; // z-index website + 1
-    padding-bottom: 80px;
+    padding-bottom: 40px;
     background-color: white;
     -webkit-box-shadow: 0 3px 9px #666666;
     box-shadow: 0 3px 9px #666666;
     outline: none;
 
-    .o_planner_header {
+    .o-planner-header() {
         display: inline-block;
-        width: 50%;
         padding: 5px 5px 5px 5px;
     }
 
+    .o_planner_header_left {
+        .o-planner-header;
+        margin-left: 25%;
+    }
+
+    .o_planner_header_right {
+        .o-planner-header;
+        float: right;
+    }
+
+    .o_planner_content_wrapper {
+        display: -ms-flexbox;
+        display: -moz-box;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+
     .o_planner_menu {
-        > a.btn {
-            width: 100%;
-        }
+        -ms-flex: 0 0 25%;
+        -moz-flex: 0 0 25%;
+        -webkit-flex: 0 0 25%;
+        flex: 0 0 25%;
+
+        height: 100%;
+        overflow: auto;
 
         > ul {
+            padding-top: 10px;
+            padding-left: 10px;
+            list-style-type: none;
+
             > h4 {
                 padding-left: 5px;
 
@@ -242,6 +269,10 @@
     }
 
     .o_planner_page {
+        -ms-flex: 0 0 75%;
+        -moz-flex: 0 0 75%;
+        -webkit-flex: 0 0 75%;
+        flex: 0 0 75%;
         display: none;
         padding-left:  15px;
         padding-right: 15px;

addons/web_planner/static/src/xml/web_planner.xml

@@ -9,22 +9,23 @@
 
     <t t-name="PlannerDialog">
         <div id="PlannerDialog" tabindex="-1">
-            <div class="dropdown o_planner_menu">
-                <a class="btn btn-default" data-toggle="dropdown" href="#" aria-expanded="false">Steps <span class="caret"></span></a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"/>
-            </div>
-
-            <div class="o_planner_header">
+            <div class="o_planner_header_left">
                 <button class="btn btn-primary mark_as_done">
                     <i class="fa fa-square-o"></i>
                     <span>Mark As Done</span>
                 </button>
-            </div><div class="o_planner_header text-right">
+            </div><div class="o_planner_header_right text-right">
                 <a class="btn btn-next">
                     Next step
                     <i class="fa fa-angle-right"></i>
                 </a>
             </div>
+
+            <div class="o_planner_content_wrapper">
+                <div class="o_planner_menu">
+                    <ul role="menu" aria-labelledby="dLabel"/>
+                </div>
+            </div>
         </div>
     </t>