mirror of https://github.com/akveo/blur-admin
feat(redesign): change basic layout
parent
74ae2f0fdc
commit
7ab7c9324a
|
@ -0,0 +1,27 @@
|
||||||
|
.content-top {
|
||||||
|
padding-top: 13px;
|
||||||
|
padding-bottom: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.al-title {
|
||||||
|
font-weight: normal;
|
||||||
|
color: #ffffff;
|
||||||
|
float: left;
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-breadcrumb {
|
||||||
|
background: none;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
padding-top: 11px;
|
||||||
|
li {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,9 @@
|
||||||
|
<div class="content-top clearfix">
|
||||||
|
<h1 class="al-title">{{ activePageTitle }}</h1>
|
||||||
|
|
||||||
|
<ul class="breadcrumb al-breadcrumb">
|
||||||
|
<li>
|
||||||
|
<a href="#/dashboard">Home</a></li>
|
||||||
|
<li>{{ activePageTitle }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
|
@ -0,0 +1,34 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
blurAdminApp.directive('contentTop', ['$location', function ($location) {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
controller: [function () {
|
||||||
|
|
||||||
|
}],
|
||||||
|
templateUrl: 'app/components/contentTop/contentTop.html',
|
||||||
|
link: function($scope) {
|
||||||
|
$scope.pages = {
|
||||||
|
'/dashboard': 'Dashboard',
|
||||||
|
'/page': 'Default Page',
|
||||||
|
'/404': 'Page Not Found',
|
||||||
|
'/buttons': 'Buttons',
|
||||||
|
'/charts': 'Charts',
|
||||||
|
'/grid': 'Grid',
|
||||||
|
'/icons': 'Icons',
|
||||||
|
'/login': 'Authentication',
|
||||||
|
'/maps': 'Maps',
|
||||||
|
'/modals': 'Modals',
|
||||||
|
'/profile': 'User Profile',
|
||||||
|
'/tables': 'Tables',
|
||||||
|
'/typography': 'Typography',
|
||||||
|
'/form-layouts': 'Form Layouts',
|
||||||
|
'/form-inputs': 'Form Inputs'
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.$watch(function () {
|
||||||
|
$scope.activePageTitle = $scope.pages[$location.$$url];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
|
@ -17,11 +17,15 @@
|
||||||
float: right;
|
float: right;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 9px 57px 0 0;
|
margin: 13px 47px 0 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
& > a {
|
& > a {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -1,112 +1,36 @@
|
||||||
.page-top {
|
.page-top {
|
||||||
padding: 12px 15px 0px;
|
@include bg-translucent-dark(0.5);
|
||||||
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 904;
|
||||||
|
box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
height: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-area {
|
a.al-logo {
|
||||||
margin-bottom: 32px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-top-main {
|
|
||||||
margin-bottom: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.al-breadcrumb {
|
|
||||||
background: none;
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 12px 0 0;
|
text-decoration: none;
|
||||||
|
padding-right: 4px;
|
||||||
|
display: block;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: $font-family;
|
||||||
|
white-space: nowrap;
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 0;
|
outline: none !important;
|
||||||
}
|
width: 180px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
|
||||||
@media (max-width: $resXS) {
|
span {
|
||||||
.al-breadcrumb {
|
color: #41bee9;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1.al-title {
|
|
||||||
font-weight: 100;
|
|
||||||
color: #ffffff;
|
|
||||||
float: left;
|
|
||||||
width: auto;
|
|
||||||
margin: 7px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-stat-block {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding: 0px 9px;
|
|
||||||
text-align: right;
|
|
||||||
color: #ffffff;
|
|
||||||
float: right;
|
|
||||||
display: table;
|
|
||||||
.quick-stat-row {
|
|
||||||
display: table-row;
|
|
||||||
& > div {
|
|
||||||
display: table-cell;
|
|
||||||
padding-left: 7px;
|
|
||||||
line-height: 21px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
}
|
|
||||||
i.icon-small {
|
|
||||||
display: none;
|
|
||||||
margin-right: 4px;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: -1px;
|
|
||||||
}
|
|
||||||
.quick-stat-name {
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: right;
|
|
||||||
line-height: 21px;
|
|
||||||
}
|
|
||||||
.quick-stat-val {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-long-arrow-up {
|
|
||||||
color: $success;
|
|
||||||
}
|
|
||||||
.fa-long-arrow-down {
|
|
||||||
color: $danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-stat-up, .quick-stat-down {
|
|
||||||
height: 0;
|
|
||||||
transition: height 0.3s ease;
|
|
||||||
}
|
|
||||||
.show-arr {
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $resL) {
|
|
||||||
.quick-stat-block {
|
|
||||||
display: block;
|
|
||||||
margin-top: 24px;
|
|
||||||
.quick-stat-row {
|
|
||||||
display: table;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 612px) {
|
|
||||||
.quick-stat-block .quick-stat-row {
|
|
||||||
i.icon-small {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.quick-stat-name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-profile {
|
.user-profile {
|
||||||
float: right;
|
float: right;
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-right: 31px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.al-user-profile {
|
.al-user-profile {
|
||||||
|
@ -123,8 +47,9 @@ h1.al-title {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
width: 36px;
|
width: 45px;
|
||||||
height: 36px;
|
height: 45px;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -134,29 +59,64 @@ a.refresh-data {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 9px;
|
margin-top: 13px;
|
||||||
|
margin-right: 26px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $warning !important;
|
color: $warning !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $resXXS) {
|
a.collapse-menu-link {
|
||||||
h1.al-title {
|
font-size: 31px;
|
||||||
font-size: 28px;
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 42px;
|
||||||
|
color: #fff;
|
||||||
|
width: 18px;
|
||||||
|
padding: 0;
|
||||||
|
float: left;
|
||||||
|
margin-left: 9px;
|
||||||
|
margin-top: 11px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $warning;
|
||||||
}
|
}
|
||||||
.top-area {
|
}
|
||||||
margin-bottom: 22px;
|
|
||||||
|
.search {
|
||||||
|
text-shadow: none;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 25px;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 162px;
|
||||||
|
float: left;
|
||||||
|
margin-left: 49px;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.page-top-main {
|
i {
|
||||||
margin-bottom: 8px;
|
width: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 1px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 13px;
|
||||||
}
|
}
|
||||||
.quick-stat-block {
|
input {
|
||||||
margin-top: 22px;
|
background: none;
|
||||||
.quick-stat-row {
|
border: none;
|
||||||
.quick-stat-val {
|
outline: none;
|
||||||
font-size: 13px;
|
width: 120px;
|
||||||
}
|
padding: 0;
|
||||||
}
|
margin: 0 0 0 -3px;
|
||||||
|
height: 27px;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,47 +1,25 @@
|
||||||
<div class="page-top clearfix">
|
<div class="page-top clearfix">
|
||||||
|
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
|
||||||
|
<a href class="collapse-menu-link ion-navicon" ng-click="menuToggle()"></a>
|
||||||
|
|
||||||
<div class="top-area clearfix">
|
<div class="search">
|
||||||
<div class="user-profile clearfix">
|
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
|
||||||
<div class="al-user-profile dropdown">
|
<input id="searchInput" type="text" placeholder="Search for...">
|
||||||
<a href class="dropdown-toggle" data-toggle="dropdown">
|
|
||||||
<img src="img/pic-profile-small.png">
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu top-dropdown-menu profile-dropdown">
|
|
||||||
<i class="dropdown-arr"></i>
|
|
||||||
<a href="#/profile"><i class="fa fa-user"></i>Profile</a>
|
|
||||||
<a href><i class="fa fa-cog"></i>Settings</a>
|
|
||||||
<a href class="signout"><i class="fa fa-power-off"></i>Sign out</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<msg-center></msg-center>
|
|
||||||
<a href class="refresh-data"><i class="fa fa-refresh"></i></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="breadcrumb al-breadcrumb">
|
|
||||||
<li>
|
|
||||||
<a href="#/dashboard">Home</a></li>
|
|
||||||
<li>{{ activePageTitle }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<pie-charts></pie-charts>
|
<div class="user-profile clearfix">
|
||||||
|
<div class="al-user-profile dropdown">
|
||||||
<div class="page-top-main clearfix">
|
<a href class="dropdown-toggle" data-toggle="dropdown">
|
||||||
<div class="quick-stat-block">
|
<img src="img/pic-profile-small.png">
|
||||||
<div class="quick-stat-row">
|
</a>
|
||||||
<div><i class="icon-small ion-ios-download-outline"></i></div>
|
<div class="dropdown-menu top-dropdown-menu profile-dropdown">
|
||||||
<div class="quick-stat-name">Daily Downloads:</div>
|
<i class="dropdown-arr"></i>
|
||||||
<div class="quick-stat-val" animated-change new-value="982">509</div>
|
<a href="#/profile"><i class="fa fa-user"></i>Profile</a>
|
||||||
<div><i class="icon-up quick-stat-up"></i></div>
|
<a href><i class="fa fa-cog"></i>Settings</a>
|
||||||
</div>
|
<a href class="signout"><i class="fa fa-power-off"></i>Sign out</a>
|
||||||
<div class="quick-stat-row">
|
|
||||||
<div><i class="icon-small ion-ios-people-outline"></i></div>
|
|
||||||
<div class="quick-stat-name">Active Users:</div>
|
|
||||||
<div class="quick-stat-val" animated-change new-value="611">971</div>
|
|
||||||
<div><i class="icon-down quick-stat-down"></i></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<msg-center></msg-center>
|
||||||
<h1 class="al-title">{{ activePageTitle }}</h1>
|
<a href class="refresh-data"><i class="fa fa-refresh"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -1,31 +1,10 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
blurAdminApp.directive('pageTop', ['$location', function ($location) {
|
blurAdminApp.directive('pageTop', function () {
|
||||||
return {
|
return {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
templateUrl: 'app/components/pageTop/pageTop.html',
|
templateUrl: 'app/components/pageTop/pageTop.html',
|
||||||
link: function ($scope) {
|
link: function ($scope) {
|
||||||
$scope.pages = {
|
|
||||||
'/dashboard': 'Dashboard',
|
|
||||||
'/page': 'Default Page',
|
|
||||||
'/404': 'Page Not Found',
|
|
||||||
'/buttons': 'Buttons',
|
|
||||||
'/charts': 'Charts',
|
|
||||||
'/grid': 'Grid',
|
|
||||||
'/icons': 'Icons',
|
|
||||||
'/login': 'Authentication',
|
|
||||||
'/maps': 'Maps',
|
|
||||||
'/modals': 'Modals',
|
|
||||||
'/profile': 'User Profile',
|
|
||||||
'/tables': 'Tables',
|
|
||||||
'/typography': 'Typography',
|
|
||||||
'/form-layouts': 'Form Layouts',
|
|
||||||
'/form-inputs': 'Form Inputs'
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.$watch(function () {
|
|
||||||
$scope.activePageTitle = $scope.pages[$location.$$url];
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}]);
|
});
|
|
@ -4,7 +4,7 @@ $angle-right: "\f101";
|
||||||
|
|
||||||
.al-sidebar {
|
.al-sidebar {
|
||||||
width: $sidebar-width;
|
width: $sidebar-width;
|
||||||
top: 0;
|
top: $top-height;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 904;
|
z-index: 904;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -15,49 +15,9 @@ $angle-right: "\f101";
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.collapse-menu-link {
|
|
||||||
font-size: 13px;
|
|
||||||
@include bg-translucent-dark(0.5);
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 42px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
color: #fff;
|
|
||||||
width: 18px;
|
|
||||||
position: absolute;
|
|
||||||
top: 47px;
|
|
||||||
right: -18px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $warning;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
float: left;
|
|
||||||
margin-right: 18px;
|
|
||||||
width: 16px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 42px;
|
|
||||||
transition: transform 0.5s ease-in;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.al-sidebar-list-block {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
top: 88px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.al-sidebar-list {
|
.al-sidebar-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 18px 0 0 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -121,39 +81,6 @@ a.al-sidebar-list-link {
|
||||||
width: 4px !important;
|
width: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
|
||||||
position: absolute;
|
|
||||||
left: 18px;
|
|
||||||
top: 54px;
|
|
||||||
text-shadow: none;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 25px;
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 162px;
|
|
||||||
label {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
margin-right: 18px;
|
|
||||||
width: 16px;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
width: 120px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 0 -3px;
|
|
||||||
height: 27px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin layout-collapsed() {
|
@mixin layout-collapsed() {
|
||||||
.al-main {
|
.al-main {
|
||||||
margin-left: 70px;
|
margin-left: 70px;
|
||||||
|
@ -229,13 +156,6 @@ a.al-sidebar-list-link {
|
||||||
.al-sidebar {
|
.al-sidebar {
|
||||||
width: 52px;
|
width: 52px;
|
||||||
|
|
||||||
.al-logo {
|
|
||||||
padding-left: 16px;
|
|
||||||
span {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-angle-down, .fa-angle-up {
|
.fa-angle-down, .fa-angle-up {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
@ -267,42 +187,16 @@ a.al-sidebar-list-link {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a.collapse-menu-link {
|
|
||||||
i {
|
|
||||||
transform: rotate(540deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-hover-elem, .sidebar-select-elem {
|
.sidebar-hover-elem, .sidebar-select-elem {
|
||||||
left: 48px;
|
left: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin sidebar-hidden() {
|
@mixin sidebar-hidden() {
|
||||||
.al-sidebar {
|
.al-sidebar {
|
||||||
width: 0;
|
width: 0;
|
||||||
a.al-logo {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
a.collapse-menu-link {
|
|
||||||
i {
|
|
||||||
transform: rotate(540deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.al-sidebar-list-block {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.search {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
a.al-logo-small-rez {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -310,23 +204,11 @@ a.al-sidebar-list-link {
|
||||||
.al-sidebar {
|
.al-sidebar {
|
||||||
width: $sidebar-width;
|
width: $sidebar-width;
|
||||||
background: rgba(0, 0, 0, .75);
|
background: rgba(0, 0, 0, .75);
|
||||||
a.al-logo {
|
|
||||||
display: block;
|
|
||||||
span {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a.al-logo-small-rez {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.fa-angle-down, .fa-angle-up {
|
.fa-angle-down, .fa-angle-up {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.al-sidebar-list-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.al-sidebar-sublist {
|
.al-sidebar-sublist {
|
||||||
@include default-sublist();
|
@include default-sublist();
|
||||||
top: auto;
|
top: auto;
|
||||||
|
@ -337,20 +219,9 @@ a.al-sidebar-list-link {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.collapse-menu-link {
|
|
||||||
@include bg-translucent-dark(0.75);
|
|
||||||
i {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-hover-elem, .sidebar-select-elem {
|
.sidebar-hover-elem, .sidebar-select-elem {
|
||||||
left: $sidebar-width - 4;
|
left: $sidebar-width - 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
|
||||||
width: 162px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,42 +1,29 @@
|
||||||
<aside class="al-sidebar" ng-swipe-right="menuExpand()" ng-swipe-left="menuCollapse()">
|
<aside class="al-sidebar" ng-swipe-right="menuExpand()" ng-swipe-left="menuCollapse()">
|
||||||
<a href="#/dashboard" class="al-logo clearfix">
|
<ul class="al-sidebar-list" slimscroll="{height: '100%'}">
|
||||||
B<span>lur Admin</span>
|
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"
|
||||||
</a>
|
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}" ng-mouseover="hoverItem($event, item)">
|
||||||
|
|
||||||
<a href class="collapse-menu-link clearfix" ng-click="menuToggle()">
|
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link"
|
||||||
<i class="fa fa-angle-double-left"></i>
|
ng-click="collapseSidebarIfSmallRes()">
|
||||||
</a>
|
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
<div class="search">
|
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item); item.expanded = !item.expanded"
|
||||||
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
|
class="al-sidebar-list-link">
|
||||||
<input id="searchInput" type="text" placeholder="Search for...">
|
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||||
</div>
|
<b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
|
||||||
|
ng-if="item.subMenu"></b>
|
||||||
|
</a>
|
||||||
|
|
||||||
<div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
|
<ul ng-if="item.subMenu" class="al-sidebar-sublist"
|
||||||
<ul class="al-sidebar-list" slimscroll="{height: '100%'}">
|
ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
|
||||||
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"
|
<li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
|
||||||
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}" ng-mouseover="hoverItem($event, item)">
|
<a href="{{ subitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{ subitem.title }}</a>
|
||||||
|
</li>
|
||||||
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebarIfSmallRes()">
|
</ul>
|
||||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
</li>
|
||||||
</a>
|
</ul>
|
||||||
|
<div class="sidebar-select-elem" ng-style="{top: selectElemTop + 'px'}"></div>
|
||||||
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item); item.expanded = !item.expanded"
|
<div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px'}"
|
||||||
class="al-sidebar-list-link">
|
ng-class="{'show-hover-elem': showHoverElem }"></div>
|
||||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
|
||||||
<b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
|
|
||||||
ng-if="item.subMenu"></b>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul ng-if="item.subMenu" class="al-sidebar-sublist" ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
|
|
||||||
<li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
|
|
||||||
<a href="{{ subitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{ subitem.title }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="sidebar-select-elem" ng-style="{top: selectElemTop + 'px'}"></div>
|
|
||||||
<div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px'}"
|
|
||||||
ng-class="{'show-hover-elem': showHoverElem }"></div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
</aside>
|
|
@ -169,40 +169,15 @@ blurAdminApp.directive('sidebar', function () {
|
||||||
|
|
||||||
$scope.hoverItem = function ($event) {
|
$scope.hoverItem = function ($event) {
|
||||||
$scope.showHoverElem = true;
|
$scope.showHoverElem = true;
|
||||||
var menuTopValue = 88;
|
var menuTopValue = 66;
|
||||||
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
|
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.hideHoverElement = function () {
|
|
||||||
$scope.showHoverElem = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.collapseSidebarIfSmallRes = function () {
|
$scope.collapseSidebarIfSmallRes = function () {
|
||||||
if (window.innerWidth <= resWidthCollapseSidebar) {
|
if (window.innerWidth <= resWidthCollapseSidebar) {
|
||||||
$scope.isMenuCollapsed = true;
|
$scope.isMenuCollapsed = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function focusSearchInput() {
|
|
||||||
document.getElementById("searchInput").focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.startSearch = function () {
|
|
||||||
if ($scope.isMenuCollapsed) {
|
|
||||||
$scope.isMenuCollapsed = false;
|
|
||||||
$timeout(function () {
|
|
||||||
focusSearchInput();
|
|
||||||
}, 900);
|
|
||||||
} else {
|
|
||||||
focusSearchInput();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.search = function (event) {
|
|
||||||
if (event.which === 13) {
|
|
||||||
$scope.collapseSidebarIfSmallRes();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
});
|
});
|
|
@ -1 +1,3 @@
|
||||||
<widgets ng-model="widgetBlocks"></widgets>
|
<widgets ng-model="widgetBlocks"></widgets>
|
||||||
|
|
||||||
|
<!--<pie-charts></pie-charts>-->
|
||||||
|
|
|
@ -46,6 +46,6 @@ blurAdminApp.directive('pieCharts', function () {
|
||||||
updatePieCharts();
|
updatePieCharts();
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}],
|
}],
|
||||||
templateUrl: 'app/components/pieCharts/pieCharts.html'
|
templateUrl: 'app/pages/dashboard/widgets/pieCharts/pieCharts.html'
|
||||||
};
|
};
|
||||||
});
|
});
|
|
@ -1,4 +1,4 @@
|
||||||
$left-space: 198px;
|
$left-space: 180px;
|
||||||
|
|
||||||
@include scrollbars(.5em, #f4f4f4, #142840);
|
@include scrollbars(.5em, #f4f4f4, #142840);
|
||||||
|
|
||||||
|
@ -33,45 +33,6 @@ a {
|
||||||
color: #444444;
|
color: #444444;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.al-logo {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 10px 18px 8px 16px;
|
|
||||||
display: block;
|
|
||||||
font: 100 24px/34px $font-family;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-shadow: 0 0 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
&:hover {
|
|
||||||
color: $primary;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
&:active, &:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 12px;
|
|
||||||
color: $primary;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 34px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
transition: padding-left 0.5s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.al-logo-small-rez {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 180px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.al-main {
|
.al-main {
|
||||||
margin-left: $left-space;
|
margin-left: $left-space;
|
||||||
padding: 0 0 34px 0;
|
padding: 0 0 34px 0;
|
||||||
|
@ -150,7 +111,7 @@ a.al-logo-small-rez {
|
||||||
}
|
}
|
||||||
|
|
||||||
.al-content {
|
.al-content {
|
||||||
padding: 8px 15px;
|
padding: 8px 32px 8px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vis-hidden {
|
.vis-hidden {
|
||||||
|
|
|
@ -48,4 +48,6 @@ $resL: 991px;
|
||||||
$resM: 768px;
|
$resM: 768px;
|
||||||
$resS: 630px;
|
$resS: 630px;
|
||||||
$resXS: 500px;
|
$resXS: 500px;
|
||||||
$resXXS: 430px;
|
$resXXS: 430px;
|
||||||
|
|
||||||
|
$top-height: 66px;
|
|
@ -13,11 +13,12 @@
|
||||||
"../../app/pages/profile/profile.scss",
|
"../../app/pages/profile/profile.scss",
|
||||||
"../../app/pages/form/form.scss",
|
"../../app/pages/form/form.scss",
|
||||||
"../../app/components/pageTop/pageTop.scss",
|
"../../app/components/pageTop/pageTop.scss",
|
||||||
|
"../../app/components/contentTop/contentTop.scss",
|
||||||
"../../app/components/sidebar/sidebar.scss",
|
"../../app/components/sidebar/sidebar.scss",
|
||||||
"../../app/components/backTop/backTop.scss",
|
"../../app/components/backTop/backTop.scss",
|
||||||
"../../app/components/msgCenter/msgCenter.scss",
|
"../../app/components/msgCenter/msgCenter.scss",
|
||||||
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
||||||
"../../app/components/pieCharts/pieCharts.scss",
|
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
|
||||||
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
|
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
|
||||||
"../../app/pages/dashboard/widgets/todo/todo.scss",
|
"../../app/pages/dashboard/widgets/todo/todo.scss",
|
||||||
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
|
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
|
||||||
|
|
|
@ -17,12 +17,13 @@
|
||||||
<body ng-controller="mainCtrl">
|
<body ng-controller="mainCtrl">
|
||||||
|
|
||||||
<main ng-if="finishLoading" ng-class="{ 'menu-collapsed': isMenuCollapsed }">
|
<main ng-if="finishLoading" ng-class="{ 'menu-collapsed': isMenuCollapsed }">
|
||||||
<a href="#/dashboard" class="al-logo al-logo-small-rez">Blur Admin</a>
|
|
||||||
<sidebar is-menu-collapsed="isMenuCollapsed"></sidebar>
|
<sidebar is-menu-collapsed="isMenuCollapsed"></sidebar>
|
||||||
|
<page-top></page-top>
|
||||||
|
|
||||||
<div class="al-main">
|
<div class="al-main">
|
||||||
<page-top></page-top>
|
|
||||||
<div class="al-content">
|
<div class="al-content">
|
||||||
|
<content-top></content-top>
|
||||||
<div ng-view></div>
|
<div ng-view></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue