From 9064d205bf6b3cbefc8f85e8518ac0dc11774f2f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 25 Jan 2018 16:37:17 +0100
Subject: [PATCH] move help drawer to right side

---
 .../src/less/application/grid.less                    |  2 +-
 .../src/less/components/application/umb-drawer.less   | 11 +++++++++--
 src/Umbraco.Web.UI/umbraco/Views/Default.cshtml       |  6 +++---
 3 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/less/application/grid.less b/src/Umbraco.Web.UI.Client/src/less/application/grid.less
index 9f5db3a2ae..b51ddc500d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/application/grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/application/grid.less
@@ -49,7 +49,7 @@ body {
 }
 
 body.umb-drawer-is-visible #mainwrapper{
-    left: @drawerWidth;
+    right: @drawerWidth;
 }
 
 #contentwrapper, #contentcolumn {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index 48f13fb174..45208bd4bf 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -2,11 +2,12 @@
     position: fixed;
     top: 0;
     bottom: 0;
-    left: 0;
+    left: auto;
+    right: 0;
     z-index: 10;
     width: @drawerWidth;
     background: @gray-9;
-    box-shadow: inset -5px 0 20px rgba(0,0,0,.3);
+    box-shadow: inset 5px 0 20px rgba(0,0,0,.3);
 }
 
 .umb-drawer-view {
@@ -61,6 +62,7 @@
     overflow: hidden;
     border-radius: 3px;
     display: block;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
 }
 
 .umb-help-badge:hover,
@@ -137,6 +139,7 @@
     margin-bottom: 0;
     background: @white;
     border-radius: 3px;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
 }
 
 .umb-help-list:last-child {
@@ -149,6 +152,10 @@
     border-bottom: 1px solid @gray-9;
 }
 
+.umb-help-list-item:last-child {
+    border-bottom: none;
+}
+
 .umb-help-list-item > a,
 .umb-help-list-item__content {
     display: flex;
diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
index a95f873754..cb8be5e5bf 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
@@ -54,9 +54,6 @@
 <body ng-class="{'touch':touchDevice, 'emptySection':emptySection, 'umb-drawer-is-visible':drawer.show}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
 
     <div ng-hide="!authenticated" ng-cloak>
-    
-        <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
-        <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
         
         <div id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
 
@@ -76,6 +73,9 @@
             <umb-notifications></umb-notifications>
 
         </div>
+
+        <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
+        <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
         
     </div>
 
