Upgrade to Bootstrap 3

js/core.js

@@ -455,16 +455,11 @@ define([
         $menuPanelElt = $('.menu-panel').collapse({
             toggle: false
         });
-        $menuPanelElt.click(function(e) {
-            console.log(e);
-        }).find('.panel-content').click(function(e) {
-            e.stopPropagation();
-        });
         var menuPanelBackdropElt = undefined;
         $menuPanelElt.on('show.bs.collapse', function(e) {
             if(e.target === $menuPanelElt[0]) {
                 isMenuPanelShown = true;
-                menuPanelBackdropElt = utils.createBackdrop();
+                menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel');
                 $menuPanelElt.addClass('move-to-front');
             }
             else {

js/html/bodyIndex.html

@@ -45,9 +45,9 @@
 <div class="ui-layout-south preview-container"></div>
 <div id="wmd-button-bar" class="hide"></div>
 
-<div class="menu-panel collapse width" data-toggle="collapse"
-		data-target=".menu-panel">
-	<button class="btn btn-success collapse-button" title="Menu">
+<div class="menu-panel collapse width">
+	<button class="btn btn-success collapse-button" data-toggle="collapse"
+		data-target=".menu-panel" title="Menu">
 		<i class="icon-left-dir"></i> <img data-stackedit-src="stackedit-64.png"
 			width="32" height="32" />
 	</button>

js/styles/main.less

@@ -319,12 +319,12 @@ body {
 	height: 100%;
 	z-index: 10;
 	overflow: initial;
+	.box-shadow(0 6px 12px rgba(0,0,0,.175));
     .collapse-button i {
 		color: @panel-button-color;
     	font-size: 19px;
 	}
 	.panel-content {
-		.box-shadow(0 6px 12px rgba(0,0,0,.175));
 		overflow: auto;
 		padding-bottom: 30px;
 		height: 100%;
@@ -336,8 +336,9 @@ body {
 }
 
 .menu-panel {
-	width: 0 !important;
-	margin-left: (-@menu-panel-width - 38);
+	background-color: @panel-bg;
+	width: @menu-panel-width !important;
+	margin-left: (-@menu-panel-width - 32);
 	-webkit-transition: margin-left 0.35s ease;
 	-moz-transition: margin-left 0.35s ease;
 	-o-transition: margin-left 0.35s ease;
@@ -346,22 +347,19 @@ body {
 		background-color: @list-group-bg;
 	}
 	&.in {
-		width: 100% !important;
-		margin-left: 0;
+        margin-left: 0;
         .collapse-button {
         	background-color: @panel-bg;
         }
     }
     .collapse-button {
-	    left: 260px;
+	    right: -80px;
 		position: absolute;
 		margin-top: 6px;
 		padding: 2px 20px;
 		z-index: -1;
 	}
 	.panel-content {
-		background-color: @panel-bg;
-		width: @menu-panel-width;
 		padding-top: 6px;
 		border-right: 5px solid @panel-border-color;
 	}

js/utils.js

@@ -181,9 +181,7 @@ define([
     // Create a backdrop and add to the body
     utils.createBackdrop = function(toggle, target) {
         var result = crel('div', {
-            'class': 'modal-backdrop in',
-            'data-toggle': toggle,
-            'data-target': target,
+            'class': 'modal-backdrop in'
         });
         document.body.appendChild(result);
         return result;