yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move drawer width to less variable + fix backdrops when drawer is open

Browse Source
This commit is contained in:
Mads Rasmussen
2017-09-20 20:30:44 +02:00
parent cb8157dfca
commit ce690acda0
7 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/less/application/grid.less
View File

@@ -46,7 +46,7 @@ body {
}
body.umb-drawer-is-visible #mainwrapper{
left: 400px;
left: @drawerWidth;
}
#contentwrapper, #contentcolumn {

2
src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
View File

@@ -4,7 +4,7 @@
bottom: 0;
left: 0;
z-index: 10;
width: 400px;
width: @drawerWidth;
box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
background: @gray-9;
}

5
src/Umbraco.Web.UI.Client/src/less/components/overlays.less
View File

@@ -136,6 +136,11 @@
margin-left: 81px;
}
// push left overlay when drawer is open
.umb-drawer-is-visible .umb-overlay.umb-overlay-left {
left: @drawerWidth;
}
.umb-overlay.umb-overlay-left .umb-overlay-header {
flex-basis: 100px;
padding: 20px;

4
src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less
View File

@@ -8,3 +8,7 @@
left: 0;
animation: fadeIn 0.2s;
}
.umb-drawer-is-visible .umb-overlay-backdrop {
left: @drawerWidth;
}

10
src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less
View File

@@ -13,6 +13,11 @@
flex-direction: column;
}
.umb-drawer-is-visible .umb-lightbox {
width: calc(~'100%' - ~'@{drawerWidth}');
left: @drawerWidth;
}
.umb-lightbox__backdrop {
position: absolute;
top: 0;
@@ -40,16 +45,13 @@
.umb-lightbox__images {
position: relative;
z-index: 1000;
max-width: calc(~'100%' - 200px); // subtract the width of the two arrow buttons
}
.umb-lightbox__image {
background: @white;
border-radius: 3px;
padding: 10px;
img {
max-width: 80vw;
max-height: 80vh;
}
}
.umb-lightbox__control {

3
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

@@ -218,6 +218,9 @@
// COMPONENT VARIABLES
// --------------------------------------------------
// Drawer
@drawerWidth: 400px;
// Z-index master list
// -------------------------

20
src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
View File

@@ -52,22 +52,24 @@
</head>
<noscript><h5><strong>&nbsp; JavaScript is disabled. Please enable to continue!</strong></h5></noscript>
<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 id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
<div ng-hide="!authenticated" ng-cloak>
<!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px -->
<umb-drawer ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
<div id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
<umb-navigation></umb-navigation>
<umb-navigation></umb-navigation>
<section id="contentwrapper">
<div id="contentcolumn" ng-view>
</div>
</section>
<section id="contentwrapper">
<div id="contentcolumn" ng-view></div>
</section>
<umb-notifications></umb-notifications>
<umb-notifications></umb-notifications>
</div>
</div>
@Html.BareMinimumServerVariablesScript(Url, Url.Action("ExternalLogin", "BackOffice", new { area = ViewBag.UmbracoPath }))