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

feat(redesign): change basic layout

pull/3/head
Anastasiya 2015-11-10 14:20:52 +03:00
parent 74ae2f0fdc
commit 7ab7c9324a
18 changed files with 208 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/components/contentTop/_contentTop.scss Normal file
View File

@ -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;
}
}

9
src/app/components/contentTop/contentTop.html Normal file
View File

@ -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>

34
src/app/components/contentTop/contentTop.js Normal file
View File

@ -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];
});
}
};
}]);

6
src/app/components/msgCenter/_msgCenter.scss
View File

@ -17,11 +17,15 @@
float: right;
padding: 0;
list-style: none;
margin: 9px 57px 0 0;
margin: 13px 47px 0 0;
li {
list-style: none;
float: left;
margin-left: 30px;
&:first-child {
margin-left: 0;
}
& > a {
color: #ffffff;
text-decoration: none;

186
src/app/components/pageTop/_pageTop.scss
View File

@ -1,112 +1,36 @@
.page-top {
padding: 12px 15px 0px;
@include bg-translucent-dark(0.5);
padding: 0;
position: relative;
z-index: 904;
box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
height: 66px;
}
.top-area {
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.page-top-main {
margin-bottom: 19px;
}
.al-breadcrumb {
background: none;
a.al-logo {
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;
margin-bottom: 0;
}
outline: none !important;
width: 180px;
text-align: center;
line-height: 60px;
@media (max-width: $resXS) {
.al-breadcrumb {
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;
}
span {
color: #41bee9;
}
}
.user-profile {
float: right;
min-width: 220px;
margin-top: 10px;
margin-right: 31px;
}
.al-user-profile {
@ -123,8 +47,9 @@ h1.al-title {
display: block;
}
img {
width: 36px;
height: 36px;
width: 45px;
height: 45px;
border-radius: 50%;
}
}
@ -134,29 +59,64 @@ a.refresh-data {
text-decoration: none;
font-weight: normal;
float: right;
margin-top: 9px;
margin-top: 13px;
margin-right: 26px;
&:hover {
color: $warning !important;
}
}
@media (max-width: $resXXS) {
h1.al-title {
font-size: 28px;
a.collapse-menu-link {
font-size: 31px;
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 {
margin-bottom: 8px;
i {
width: 16px;
display: inline-block;
cursor: pointer;
padding-left: 1px;
font-size: 16px;
margin-right: 13px;
}
.quick-stat-block {
margin-top: 22px;
.quick-stat-row {
.quick-stat-val {
font-size: 13px;
}
}
input {
background: none;
border: none;
outline: none;
width: 120px;
padding: 0;
margin: 0 0 0 -3px;
height: 27px;
}
}

56
src/app/components/pageTop/pageTop.html
View File

@ -1,47 +1,25 @@
<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="user-profile clearfix">
<div class="al-user-profile dropdown">
<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 class="search">
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
<input id="searchInput" type="text" placeholder="Search for...">
</div>
<pie-charts></pie-charts>
<div class="page-top-main clearfix">
<div class="quick-stat-block">
<div class="quick-stat-row">
<div><i class="icon-small ion-ios-download-outline"></i></div>
<div class="quick-stat-name">Daily Downloads:</div>
<div class="quick-stat-val" animated-change new-value="982">509</div>
<div><i class="icon-up quick-stat-up"></i></div>
</div>
<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 class="user-profile clearfix">
<div class="al-user-profile dropdown">
<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>
<h1 class="al-title">{{ activePageTitle }}</h1>
<msg-center></msg-center>
<a href class="refresh-data"><i class="fa fa-refresh"></i></a>
</div>
</div>

25
src/app/components/pageTop/pageTop.js
View File

@ -1,31 +1,10 @@
'use strict';
blurAdminApp.directive('pageTop', ['$location', function ($location) {
blurAdminApp.directive('pageTop', function () {
return {
restrict: 'E',
templateUrl: 'app/components/pageTop/pageTop.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];
});
}
};
}]);
});

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

@ -4,7 +4,7 @@ $angle-right: "\f101";
.al-sidebar {
width: $sidebar-width;
top: 0;
top: $top-height;
left: 0;
z-index: 904;
display: block;
@ -15,49 +15,9 @@ $angle-right: "\f101";
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 {
margin: 0;
padding: 0;
padding: 18px 0 0 0;
list-style: none;
}
@ -121,39 +81,6 @@ a.al-sidebar-list-link {
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() {
.al-main {
margin-left: 70px;
@ -229,13 +156,6 @@ a.al-sidebar-list-link {
.al-sidebar {
width: 52px;
.al-logo {
padding-left: 16px;
span {
padding-left: 20px;
}
}
.fa-angle-down, .fa-angle-up {
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 {
left: 48px;
}
.search {
width: 32px;
}
}
}
@mixin sidebar-hidden() {
.al-sidebar {
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 {
width: $sidebar-width;
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 {
opacity: 1;
}
.al-sidebar-list-block {
display: block;
}
.al-sidebar-sublist {
@include default-sublist();
top: auto;
@ -337,20 +219,9 @@ a.al-sidebar-list-link {
transition: none;
}
a.collapse-menu-link {
@include bg-translucent-dark(0.75);
i {
transform: rotate(0deg);
}
}
.sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4;
}
.search {
width: 162px;
}
}
}

61
src/app/components/sidebar/sidebar.html
View File

@ -1,42 +1,29 @@
<aside class="al-sidebar" ng-swipe-right="menuExpand()" ng-swipe-left="menuCollapse()">
<a href="#/dashboard" class="al-logo clearfix">
B<span>lur Admin</span>
</a>
<ul class="al-sidebar-list" slimscroll="{height: '100%'}">
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"
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()">
<i class="fa fa-angle-double-left"></i>
</a>
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link"
ng-click="collapseSidebarIfSmallRes()">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
<div class="search">
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
<input id="searchInput" type="text" placeholder="Search for...">
</div>
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item); item.expanded = !item.expanded"
class="al-sidebar-list-link">
<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>
<div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
<ul class="al-sidebar-list" slimscroll="{height: '100%'}">
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}" ng-mouseover="hoverItem($event, item)">
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebarIfSmallRes()">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item); item.expanded = !item.expanded"
class="al-sidebar-list-link">
<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>
<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>
</aside>

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

@ -169,40 +169,15 @@ blurAdminApp.directive('sidebar', function () {
$scope.hoverItem = function ($event) {
$scope.showHoverElem = true;
var menuTopValue = 88;
var menuTopValue = 66;
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
};
$scope.hideHoverElement = function () {
$scope.showHoverElem = false;
};
$scope.collapseSidebarIfSmallRes = function () {
if (window.innerWidth <= resWidthCollapseSidebar) {
$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();
}
}
}]
};
});

2
src/app/pages/dashboard/dashboard.html
View File

@ -1 +1,3 @@
<widgets ng-model="widgetBlocks"></widgets>
<!--<pie-charts></pie-charts>-->

0
src/app/components/pieCharts/_pieCharts.scss → src/app/pages/dashboard/widgets/pieCharts/_pieCharts.scss
View File

0
src/app/components/pieCharts/pieCharts.html → src/app/pages/dashboard/widgets/pieCharts/pieCharts.html
View File

2
src/app/components/pieCharts/pieCharts.js → src/app/pages/dashboard/widgets/pieCharts/pieCharts.js
View File

@ -46,6 +46,6 @@ blurAdminApp.directive('pieCharts', function () {
updatePieCharts();
}, 2000);
}],
templateUrl: 'app/components/pieCharts/pieCharts.html'
templateUrl: 'app/pages/dashboard/widgets/pieCharts/pieCharts.html'
};
});

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

@ -1,4 +1,4 @@
$left-space: 198px;
$left-space: 180px;
@include scrollbars(.5em, #f4f4f4, #142840);
@ -33,45 +33,6 @@ a {
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 {
margin-left: $left-space;
padding: 0 0 34px 0;
@ -150,7 +111,7 @@ a.al-logo-small-rez {
}
.al-content {
padding: 8px 15px;
padding: 8px 32px 8px 40px;
}
.vis-hidden {

4
src/assets/css/_variables.scss
View File

@ -48,4 +48,6 @@ $resL: 991px;
$resM: 768px;
$resS: 630px;
$resXS: 500px;
$resXXS: 430px;
$resXXS: 430px;
$top-height: 66px;

3
src/assets/css/main.scss
View File

@ -13,11 +13,12 @@
"../../app/pages/profile/profile.scss",
"../../app/pages/form/form.scss",
"../../app/components/pageTop/pageTop.scss",
"../../app/components/contentTop/contentTop.scss",
"../../app/components/sidebar/sidebar.scss",
"../../app/components/backTop/backTop.scss",
"../../app/components/msgCenter/msgCenter.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/todo/todo.scss",
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",

5
src/index.html
View File

@ -17,12 +17,13 @@
<body ng-controller="mainCtrl">
<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>
<page-top></page-top>
<div class="al-main">
<page-top></page-top>
<div class="al-content">
<content-top></content-top>
<div ng-view></div>
</div>
</div>