From ff04fbff35892796cdcd77cc6c457bbaf3619bce Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Fri, 2 Jun 2017 23:05:29 +1000 Subject: [PATCH] Tighten up the look of extra small Scales down the sidenav by converting px to em then dialing down the container font size Made the list search less dominating over the primary buttons --- modules/backend/assets/css/october.css | 14 +++++--- modules/backend/assets/js/october-min.js | 1 + .../backend/assets/less/layout/sidenav.less | 32 +++++++++++++------ modules/system/assets/ui/less/form.less | 14 ++++++++ modules/system/assets/ui/storm.css | 4 +++ 5 files changed, 51 insertions(+), 14 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 94c5c4e69..4297862e1 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -778,18 +778,22 @@ nav#layout-mainmenu.navbar ul li.active,.mainmenu-collapsed li.active{color:#fff nav#layout-mainmenu.navbar ul li.active a,.mainmenu-collapsed li.active a{color:#ffffff !important} nav#layout-mainmenu.navbar ul li:hover,.mainmenu-collapsed li:hover{color:#ffffff;background:transparent} body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collapsed ul li:hover{color:rgba(255,255,255,0.6)} -#layout-sidenav{position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} +.layout-sidenav-container{width:120px} +#layout-sidenav{position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:14px} #layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden} #layout-sidenav ul li{display:block;text-align:center;position:relative} -#layout-sidenav ul li a{padding:20px 10px;display:block;font-size:13px;color:rgba(255,255,255,0.6);font-weight:normal;position:relative} +#layout-sidenav ul li a{padding:1.429em .714em;display:block;font-size:.929em;color:rgba(255,255,255,0.6);font-weight:normal;position:relative} #layout-sidenav ul li a:hover{text-decoration:none;background-color:transparent} #layout-sidenav ul li a:focus{background:transparent} -#layout-sidenav ul li a i{color:rgba(255,255,255,0.6);display:block;margin-bottom:5px;font-size:28px} -#layout-sidenav ul li:first-child a{padding-top:30px} +#layout-sidenav ul li a i{color:rgba(255,255,255,0.6);display:block;margin-bottom:5px;font-size:2em} +#layout-sidenav ul li:first-child a{padding-top:2.143em} #layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{color:#ffffff} #layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff} -#layout-sidenav ul li span.counter{display:block;position:absolute;top:15px;right:15px;padding:2px 6px 3px 4px;background-color:#d9350f;color:#ffffff;font-size:11px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s} +#layout-sidenav ul li span.counter{display:block;position:absolute;top:1.071em;right:1.071em;padding:.143em .429em .214em .286em;background-color:#d9350f;color:#ffffff;font-size:.786em;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s} #layout-sidenav ul li span.counter.empty{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)} +@media (max-width:480px){#layout-sidenav{font-size:10px} +.layout-sidenav-container{width:80px} +} html.mobile #layout-sidenav ul{overflow:auto;-webkit-overflow-scrolling:touch} #layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover{color:rgba(255,255,255,0.6) !important} #layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover i,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover i{color:rgba(255,255,255,0.6) !important} diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js index 3d8b366c4..1ce8edb9b 100644 --- a/modules/backend/assets/js/october-min.js +++ b/modules/backend/assets/js/october-min.js @@ -748,6 +748,7 @@ this.$scrollbar=$('
').addClass('scrollbar-scrollbar') this.$track=$('
').addClass('scrollbar-track').appendTo(this.$scrollbar) this.$thumb=$('
').addClass('scrollbar-thumb').appendTo(this.$track) $el.addClass('drag-scrollbar').addClass(options.vertical?'vertical':'horizontal').prepend(this.$scrollbar) +$el.dragScroll() if(isTouch){this.$el.on('touchstart',function(event){var touchEvent=event.originalEvent;if(touchEvent.touches.length==1){startDrag(touchEvent.touches[0]) event.stopPropagation()}})} else{this.$thumb.on('mousedown',function(event){startDrag(event)}) diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less index b50c7b89d..65bc4e350 100644 --- a/modules/backend/assets/less/layout/sidenav.less +++ b/modules/backend/assets/less/layout/sidenav.less @@ -2,11 +2,16 @@ // Side navigation bar // -------------------------------------------------- +.layout-sidenav-container { + width: 120px; +} + #layout-sidenav { position: absolute; height: 100%; width: 100%; .box-sizing(border-box); + font-size: @font-size-base; ul { position: relative; @@ -21,9 +26,9 @@ position: relative; a { - padding: 20px 10px; + padding: 1.429em .714em; display: block; - font-size: @font-size-base - 1; + font-size: .929em; color: @color-sidebarnav-inactive-text; font-weight: normal; position: relative; @@ -41,12 +46,12 @@ color: @color-sidebarnav-inactive-icon; display: block; margin-bottom: 5px; - font-size: 28px; + font-size: 2em; } } &:first-child a { - padding-top: 30px; + padding-top: 2.143em; } &.active a, a:hover { @@ -57,12 +62,12 @@ span.counter { display: block; position: absolute; - top: 15px; - right: 15px; - padding: 2px 6px 3px 4px; + top: 1.071em; + right: 1.071em; + padding: .143em .429em .214em .286em; background-color: @color-sidebarnav-counter-bg; color: @color-sidebarnav-counter-text; - font-size: 11px; + font-size: .786em; line-height: 100%; .border-radius(3px); .opacity(1); @@ -78,6 +83,15 @@ } } +@media (max-width: @screen-xs) { + #layout-sidenav { + font-size: 10px; + } + .layout-sidenav-container { + width: 80px; + } +} + html.mobile { #layout-sidenav ul { overflow: auto; @@ -90,4 +104,4 @@ html.mobile { color: @color-sidebarnav-inactive-text !important; i { color: @color-sidebarnav-inactive-icon !important; } &:after { display: none !important; } -} \ No newline at end of file +} diff --git a/modules/system/assets/ui/less/form.less b/modules/system/assets/ui/less/form.less index 2732b48bb..a26327866 100644 --- a/modules/system/assets/ui/less/form.less +++ b/modules/system/assets/ui/less/form.less @@ -92,6 +92,20 @@ &:focus, &:active { width: 200px !important; } + + @media (max-width: @screen-xs) { + width: 40px; + text-indent: -999px; + + &:focus, &:active { + text-indent: 0; + width: 100px !important; + } + + &.icon { + padding-right: 0 !important; + } + } } } diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index d08a51151..2e83bb7c5 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -2449,6 +2449,10 @@ html.cssanimations .cursor-loading-indicator.hide{display:none} .form-control.icon.lock{background-position:right 0} .form-control.growable{width:110px} .form-control.growable:focus,.form-control.growable:active{width:200px !important} +@media (max-width:480px){.form-control.growable{width:40px;text-indent:-999px} +.form-control.growable:focus,.form-control.growable:active{text-indent:0;width:100px !important} +.form-control.growable.icon{padding-right:0 !important} +} .form-group{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .form-group:empty{display:none} .form-group,.form-group.layout-item{padding-bottom:20px;margin-bottom:0}