jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

change sidebar animation and expand/collapse logic

pull/3/head
KostyaDanovsky 2015-11-18 14:07:53 +03:00
parent 1ab60bd192
commit 262b5646cf
4 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/sidebar/_sidebar.scss
View File

@ -10,7 +10,6 @@ $angle-right: "\f101";
display: block; display: block;
min-height: 100%; min-height: 100%;
@include bg-translucent-dark(0.5); @include bg-translucent-dark(0.5);
transition: width 0.5s ease;
height: 100%; height: 100%;
position: fixed; position: fixed;
} }
@ -140,7 +139,6 @@ a.al-sidebar-list-link {
left: 176px; left: 176px;
height: 42px; height: 42px;
display: none; display: none;
transition: all 0.5s ease;
&.show-hover-elem { &.show-hover-elem {
height: 42px; height: 42px;
display: block; display: block;
@ -204,6 +202,7 @@ a.al-sidebar-list-link {
.al-sidebar { .al-sidebar {
width: $sidebar-width; width: $sidebar-width;
@include bg-translucent-dark(0.75); @include bg-translucent-dark(0.75);
transition: width 0.5s ease;
.fa-angle-down, .fa-angle-up { .fa-angle-down, .fa-angle-up {
opacity: 1; opacity: 1;
@ -221,11 +220,12 @@ a.al-sidebar-list-link {
.sidebar-hover-elem, .sidebar-select-elem { .sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4; left: $sidebar-width - 4;
transition: all 0.5s ease;
} }
} }
} }
@media (min-width: 1120px) { @media (min-width: $resXL) {
.menu-collapsed { .menu-collapsed {
@include layout-collapsed(); @include layout-collapsed();
} }
@ -237,11 +237,11 @@ a.al-sidebar-list-link {
} }
} }
@media (max-width: 1120px) and (min-width: $resXS) { @media (max-width: $resXL) and (min-width: $resXS) {
@include layout-collapsed(); @include layout-collapsed();
} }
@media (max-width: 1120px) { @media (max-width: $resXL) {
@include sidebar-overlap(); @include sidebar-overlap();
} }

10
src/app/components/sidebar/sidebar.js
View File

@ -131,9 +131,13 @@ blurAdminApp.directive('sidebar', function () {
// watch window resize to change menu collapsed state if needed // watch window resize to change menu collapsed state if needed
$(window).resize(function () { $(window).resize(function () {
$scope.$apply(function () { var isMenuShouldCollapsed = $(window).width() <= resWidthCollapseSidebar;
$scope.isMenuCollapsed = $(window).width() <= resWidthCollapseSidebar; if ($scope.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
}); $scope.$apply(function () {
$scope.isMenuCollapsed = isMenuShouldCollapsed;
});
}
$scope.isMenuShouldCollapsed = isMenuShouldCollapsed;
}); });
$scope.toggleSubMenu = function ($event, item) { $scope.toggleSubMenu = function ($event, item) {

1
src/assets/css/_layout.scss
View File

@ -38,7 +38,6 @@ a {
margin-left: $left-space; margin-left: $left-space;
padding: 66px 0 34px 0; padding: 66px 0 34px 0;
min-height: 500px; min-height: 500px;
transition: margin-left 0.5s ease;
} }
.al-footer { .al-footer {

2
src/assets/js/global-variables.js
View File

@ -22,5 +22,5 @@ var colorDefaultText = '#585858';
var pageLoaded = false; var pageLoaded = false;
var resWidthCollapseSidebar = 1120; var resWidthCollapseSidebar = 1170;
var resWidthHideSidebar = 500; var resWidthHideSidebar = 500;