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

Fix position of user and help dialog position and optimization in mobile layout.

Browse Source
This commit is contained in:
bjarnef
2016-07-21 00:47:28 +02:00
parent 05ebc9dfa7
commit 0fe24a45ff
3 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,6 +118,12 @@ body {
}
}
@media (max-width: 500px) {
#search-form .form-search {
width: ~"calc(100% - 80px)"
}
}
#navigation {
left: 80px;
top: 0;
@@ -217,19 +223,17 @@ body {
padding-left:20px
}
@media (max-width: 767px) {
// make leftcolumn smaller on tablets
#leftcolumn {
width: 60px;
width: 61px;
}
#applications ul.sections {
width: 60px;
width: 61px;
}
ul.sections.sections-tray {
width: 60px;
width: 61px;
}
#applications-tray {
left: 60px;
@@ -241,35 +245,24 @@ body {
left: 30px;
}
#umbracoMainPageBody .umb-modal-left.fade.in {
margin-left: 60px;
margin-left: 61px;
}
}
@media (max-width: 500px) {
// make leftcolumn smaller on mobiles
#leftcolumn {
width: 40px;
width: 41px;
}
#applications ul.sections {
width: 40px;
}
ul.sections li [class^="icon-"]:before {
font-size: 25px!important;
}
#applications ul.sections li.avatar a img {
width: 25px;
}
ul.sections a span {
display:none !important;
width: 41px;
}
#applications ul.sections-tray {
width: 40px;
width: 41px;
}
ul.sections.sections-tray {
width: 40px;
width: 41px;
}
#applications-tray {
left: 40px;
@@ -281,7 +274,7 @@ body {
left: 20px;
}
#umbracoMainPageBody .umb-modal-left.fade.in {
margin-left: 40px;
margin-left: 41px;
width: 85%!important;
}
}

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

@@ -133,7 +133,7 @@
bottom: 0;
border: none;
box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
margin-left: 80px;
margin-left: 81px;
}
.umb-overlay.umb-overlay-left .umb-overlay-header {
@@ -148,7 +148,14 @@
@media (max-width: 767px) {
.umb-overlay.umb-overlay-left {
margin-left: 60px;
margin-left: 61px;
}
}
@media (max-width: 500px) {
.umb-overlay.umb-overlay-left {
margin-left: 41px;
width: auto;
}
}

47
src/Umbraco.Web.UI.Client/src/less/sections.less
View File

@@ -18,8 +18,8 @@ ul.sections li {
transition: all .3s linear;
}
ul.sections li [class^="icon-"]:before,
ul.sections li [class*=" icon-"]:before,
ul.sections li [class^="icon-"],
ul.sections li [class*=" icon-"],
ul.sections li img.icon-section {
font-size: 30px;
line-height: 20px; /* set line-height to ensure all icons use same line-height */
@@ -31,8 +31,8 @@ ul.sections li img.icon-section {
transition: all .3s linear;
}
ul.sections:hover li [class^="icon-"]:before,
ul.sections:hover li [class*=" icon-"]:before,
ul.sections:hover li [class^="icon-"],
ul.sections:hover li [class*=" icon-"],
ul.sections:hover li img.icon-section {
opacity: 1
}
@@ -111,32 +111,43 @@ ul.sections li.help {
bottom: 0;
left: 0;
display: block;
width: 100%;
width: ~"calc(100% - 5px)"; //subtract 4px orange border + 1px border-right for sections
}
ul.sections li.help a {
border-bottom: none;
}
@media (max-width: 500px) {
ul.sections li [class^="icon-"],
ul.sections li [class*=" icon-"] {
font-size: 25px;
}
ul.sections li:not(.avatar) a {
padding-top: 12px;
padding-bottom: 6px;
.icon, .icon-section {
display: inline-block;
padding-left: 2px;
}
}
ul.sections a span {
display:none;
}
}
// Section slide-out tray for additional apps
// -------------------------
li.expand a, li.expand{border: none !Important;}
li.expand a, li.expand{border: none !important;}
li.expand {
> a > i.icon {
transition: all .3s linear;
}
&.open > a > i.icon {
-webkit-transition: all 1s !important;
-o-transition: all 1s !important;
-moz-transition: all 1s !important;
transition: all 1s !important;
&:before {
-ms-transform: rotate(180deg) !important; /* IE 9 */
-webkit-transform: rotate(180deg) !important; /* Chrome, Safari, Opera */
-o-transform: rotate(180deg) !important;
-moz-transform: rotate(180deg) !important;
transform: rotate(180deg) !important;
}
transform: rotate(180deg);
}
}