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

make sidebar fixed, improve tables, center profile picture

pull/3/head
Nasta 2015-09-22 10:54:07 +03:00
parent 1097b5f34b
commit 18edcb95dd
15 changed files with 414 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bower.json
View File

@ -22,6 +22,8 @@
"ammap": "~3.14.5",
"angular": "~1.4.6",
"angular-route": "~1.4.6",
"angular-slimscroll": "~1.1.5",
"angular-smart-table": "~2.1.3",
"angular-toastr": "~1.5.0",
"angular-ui-sortable": "~0.13.4",
"animate.css": "~3.4.0",
@ -37,6 +39,7 @@
"jquery.easing": "~1.3.1",
"jquery.easy-pie-chart": "~2.1.6",
"leaflet": "~0.7.5",
"moment": "~2.10.6"
"moment": "~2.10.6",
"slimScroll": "jquery-slimscroll#~1.3.6"
}
}

4
gulpfile.js
View File

@ -89,6 +89,7 @@ gulp.task('js', function () {
'bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js',
'bower_components/moment/min/moment.min.js',
'bower_components/amcharts/dist/amcharts/amcharts.js',
'bower_components/amcharts/dist/amcharts/plugins/responsive/responsive.js',
'bower_components/amcharts/dist/amcharts/serial.js',
'bower_components/amcharts/dist/amcharts/funnel.js',
'bower_components/amcharts/dist/amcharts/pie.js',
@ -102,6 +103,9 @@ gulp.task('js', function () {
'bower_components/Chart.js/Chart.min.js',
'bower_components/leaflet/dist/leaflet.js',
'bower_components/angular-toastr/dist/angular-toastr.tpls.min.js',
'bower_components/angular-smart-table/dist/smart-table.min.js',
'bower_components/slimScroll/jquery.slimscroll.min.js',
'bower_components/angular-slimscroll/angular-slimscroll.js',
'src/app/components/backTop/lib/jquery.backTop.min.js'
];

4
src/app/app.js
View File

@ -14,7 +14,9 @@ var blurAdminApp = angular.module('BlurAdmin', [
'BlurAdmin.profilePage',
'BlurAdmin.tablesPage',
'BlurAdmin.typographyPage',
'toastr'
'toastr',
'smart-table',
'ui.slimscroll'
]).config(['$routeProvider', 'toastrConfig', function ($routeProvider, toastrConfig) {
$routeProvider.otherwise({redirectTo: '/dashboard'});

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

@ -4,7 +4,6 @@ $angle-right: "\f101";
.al-sidebar {
width: $sidebar-width;
position: absolute;
top: 0;
left: 0;
z-index: 904;
@ -12,12 +11,12 @@ $angle-right: "\f101";
min-height: 100%;
@include bg-translucent-dark(0.5);
transition: width 0.5s ease;
height: 100%;
position: fixed;
}
a.collapse-menu-link {
padding: 0px 0 0px 18px;
font-size: 13px;
color: $success;
@include bg-translucent-dark(0.5);
cursor: pointer;
display: block;
@ -25,6 +24,13 @@ a.collapse-menu-link {
line-height: 42px;
white-space: nowrap;
overflow: hidden;
color: #fff;
width: 18px;
position: absolute;
top: 52px;
right: -18px;
padding: 0;
&:hover {
text-decoration: none;
color: $warning;
@ -40,6 +46,15 @@ a.collapse-menu-link {
}
}
.al-sidebar-list-block {
position: absolute;
height: 100%;
top: 52px;
left: 0;
width: 100%;
padding-bottom: 10px;
}
.al-sidebar-list {
margin: 0;
padding: 0;
@ -223,11 +238,6 @@ a.al-sidebar-list-link {
width: 180px;
}
a.collapse-menu-link {
display: block;
width: 18px;
position: relative;
cursor: pointer;
padding-left: 0px;
i {
transform: rotate(540deg);
}
@ -284,9 +294,7 @@ a.al-sidebar-list-link {
}
a.collapse-menu-link {
width: 100%;
position: relative;
padding-left: 18px;
@include bg-translucent-dark(0.75);
i {
transform: rotate(0deg);
}
@ -300,4 +308,9 @@ a.al-sidebar-list-link {
.sidebar-overlap {
background: rgba(0, 0, 0, .75);
@extend .sidebar-full-width;
}
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
width: 4px !important;
}

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

@ -5,15 +5,14 @@
<a href class="collapse-menu-link clearfix" ng-click="menuExpand()">
<i class="fa fa-angle-double-left"></i>
<span>Collapse Menu</span>
</a>
<div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
<ul class="al-sidebar-list">
<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">
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link" ng-click="collapseSidebar()">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
@ -26,7 +25,7 @@
<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 }}">{{ subitem.title }}</a>
<a href="{{ subitem.root }}" ng-click="collapseSidebar()">{{ subitem.title }}</a>
</li>
</ul>
</li>

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

@ -176,6 +176,13 @@ blurAdminApp.directive('sidebar', function () {
$scope.hideHoverElement = function () {
$scope.showHoverElem = false;
};
$scope.collapseSidebar = function() {
if (window.innerWidth <= resWidthCollapseSidebar) {
console.log('test');
$scope.showSidebar = false;
}
};
}]
};
});

6
src/app/pages/profile/_profile.scss
View File

@ -73,9 +73,13 @@ h3.with-line {
width: 200px;
height: 200px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100%;
max-width: 100%;
max-height: 100%;
}
i {
display: none;

239
src/app/pages/tables/tables.js
View File

@ -14,8 +14,8 @@ angular.module('BlurAdmin.tablesPage', ['ngRoute'])
widgets: [
[
{
title: 'Basic Table',
url: 'app/pages/tables/widgets/basicTable.html'
title: 'Smart Table',
url: 'app/pages/tables/widgets/smartTable.html'
}
]
]
@ -24,25 +24,244 @@ angular.module('BlurAdmin.tablesPage', ['ngRoute'])
widgets: [
[
{
title: 'Striped Rows',
url: 'app/pages/tables/widgets/stripedRows.html'
title: 'Hover Tows and Fix Headers',
url: 'app/pages/tables/widgets/hoverRows.html'
},
{
title: 'Bordered table',
url: 'app/pages/tables/widgets/borderedTable.html'
title: 'Condensed Table',
url: 'app/pages/tables/widgets/condensedTable.html'
}
],
[
{
title: 'Hover rows',
url: 'app/pages/tables/widgets/hoverRows.html'
title: 'Striped Rows',
url: 'app/pages/tables/widgets/stripedRows.html'
},
{
title: 'Condensed table',
url: 'app/pages/tables/widgets/condensedTable.html'
title: 'Bordered Table',
url: 'app/pages/tables/widgets/borderedTable.html'
}
]
]
}
];
$scope.smartTableData = [
{
id: 1,
firstName: 'Mark',
lastName: 'Otto',
username: '@mdo',
email: 'mdo@gmail.com',
age: '28'
},
{
id: 2,
firstName: 'Jacob',
lastName: 'Thornton',
username: '@fat',
email: 'fat@yandex.ru',
age: '45'
},
{
id: 3,
firstName: 'Larry',
lastName: 'Bird',
username: '@twitter',
email: 'twitter@outlook.com',
age: '18'
},
{
id: 4,
firstName: 'John',
lastName: 'Snow',
username: '@snow',
email: 'snow@gmail.com',
age: '20'
},
{
id: 5,
firstName: 'Jack',
lastName: 'Sparrow',
username: '@jack',
email: 'jack@yandex.ru',
age: '30'
},
{
id: 6,
firstName: 'Ann',
lastName: 'Smith',
username: '@ann',
email: 'ann@gmail.com',
age: '21'
},
{
id: 7,
firstName: 'Barbara',
lastName: 'Black',
username: '@barbara',
email: 'barbara@yandex.ru',
age: '43'
},
{
id: 8,
firstName: 'Sevan',
lastName: 'Bagrat',
username: '@sevan',
email: 'sevan@outlook.com',
age: '13'
},
{
id: 9,
firstName: 'Ruben',
lastName: 'Vardan',
username: '@ruben',
email: 'ruben@gmail.com',
age: '22'
},
{
id: 10,
firstName: 'Karen',
lastName: 'Sevan',
username: '@karen',
email: 'karen@yandex.ru',
age: '33'
},
{
id: 11,
firstName: 'Mark',
lastName: 'Otto',
username: '@mark',
email: 'mark@gmail.com',
age: '38'
},
{
id: 12,
firstName: 'Jacob',
lastName: 'Thornton',
username: '@jacob',
email: 'jacob@yandex.ru',
age: '48'
},
{
id: 13,
firstName: 'Haik',
lastName: 'Hakob',
username: '@haik',
email: 'haik@outlook.com',
age: '48'
},
{
id: 14,
firstName: 'Garegin',
lastName: 'Jirair',
username: '@garegin',
email: 'garegin@gmail.com',
age: '40'
},
{
id: 15,
firstName: 'Krikor',
lastName: 'Bedros',
username: '@krikor',
email: 'krikor@yandex.ru',
age: '32'
}
];
$scope.peopleTableData = [
{
id: 1,
firstName: 'Mark',
lastName: 'Otto',
username: '@mdo',
email: 'mdo@gmail.com',
age: '28'
},
{
id: 2,
firstName: 'Jacob',
lastName: 'Thornton',
username: '@fat',
email: 'fat@yandex.ru',
age: '45'
},
{
id: 3,
firstName: 'Larry',
lastName: 'Bird',
username: '@twitter',
email: 'twitter@outlook.com',
age: '18'
},
{
id: 4,
firstName: 'John',
lastName: 'Snow',
username: '@snow',
email: 'snow@gmail.com',
age: '20'
},
{
id: 5,
firstName: 'Jack',
lastName: 'Sparrow',
username: '@jack',
email: 'jack@yandex.ru',
age: '30'
}
];
$scope.metricsTableData = [
{
image: 'img/chrome.svg',
browser: 'Google Chrome',
visits: '10,392',
isVisitsUp: true,
purchases: '4,214',
isPurchasesUp: true,
percent: '45%',
isPercentUp: true
},
{
image: 'img/firefox.svg',
browser: 'Mozilla Firefox',
visits: '7,873',
isVisitsUp: true,
purchases: '3,031',
isPurchasesUp: false,
percent: '28%',
isPercentUp: true
},
{
image: 'img/ie.svg',
browser: 'Internet Explorer',
visits: '5,890',
isVisitsUp: false,
purchases: '2,102',
isPurchasesUp: false,
percent: '17%',
isPercentUp: false
},
{
image: 'img/safari.svg',
browser: 'Safari',
visits: '4,001',
isVisitsUp: false,
purchases: '1,001',
isPurchasesUp: false,
percent: '14%',
isPercentUp: true
},
{
image: 'img/opera.svg',
browser: 'Opera',
visits: '1,833',
isVisitsUp: true,
purchases: '83',
isPurchasesUp: true,
percent: '5%',
isPercentUp: false
}
];
}]);

42
src/app/pages/tables/widgets/borderedTable.html
View File

@ -1,4 +1,4 @@
<div class="horizontal-scroll">
<div class="horizontal-scroll" ng-controller="tablesPageCtrl">
<table class="table table-bordered">
<thead>
<tr>
@ -10,40 +10,12 @@
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/chrome.svg" width="20" height="20"></td>
<td ng-class="nowrap">Google Chrome</td>
<td class="align-right">10,392</td>
<td class="align-right">4,214</td>
<td class="align-right">45%</td>
</tr>
<tr>
<td><img src="img/firefox.svg" width="20" height="20"></td>
<td>Mozilla Firefox</td>
<td class="align-right">7,873</td>
<td class="align-right">3,031</td>
<td class="align-right">28%</td>
</tr>
<tr>
<td><img src="img/ie.svg" width="20" height="20"></td>
<td ng-class="nowrap">Internet Explorer</td>
<td class="align-right">5,890</td>
<td class="align-right">2,102</td>
<td class="align-right">17%</td>
</tr>
<tr>
<td><img src="img/safari.svg" width="20" height="20"></td>
<td ng-class="nowrap">Safari</td>
<td class="align-right">4,001</td>
<td class="align-right">1,001</td>
<td class="align-right">14%</td>
</tr>
<tr>
<td><img src="img/opera.svg" width="20" height="20"></td>
<td ng-class="nowrap">Opera</td>
<td class="align-right">1,833</td>
<td class="align-right">83</td>
<td class="align-right">5%</td>
<tr ng-repeat="item in metricsTableData">
<td><img ng-src="{{item.image}}" width="20" height="20"></td>
<td ng-class="nowrap">{{item.browser}}</td>
<td class="align-right">{{item.visits}}</td>
<td class="align-right">{{item.purchases}}</td>
<td class="align-right">{{item.percent}}</td>
</tr>
</tbody>
</table>

50
src/app/pages/tables/widgets/condensedTable.html
View File

@ -1,8 +1,8 @@
<div class="horizontal-scroll">
<div class="horizontal-scroll" ng-controller="tablesPageCtrl">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th class="table-id">#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
@ -11,45 +11,13 @@
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>mdo@gmail.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>fat@yandex.ru</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
<td>twitter@outlook.com</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>John</td>
<td>Snow</td>
<td>@snow</td>
<td>snow@gmail.com</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>Jack</td>
<td>Sparrow</td>
<td>@jack</td>
<td>jack@yandex.ru</td>
<td>30</td>
<tr ng-repeat="item in peopleTableData">
<td class="table-id">{{item.id}}</td>
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td>{{item.username}}</td>
<td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>

60
src/app/pages/tables/widgets/hoverRows.html
View File

@ -1,4 +1,4 @@
<div class="horizontal-scroll">
<div class="horizontal-scroll" ng-controller="tablesPageCtrl">
<table class="table table-hover">
<thead>
<tr>
@ -13,55 +13,15 @@
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/chrome.svg" width="20" height="20"></td>
<td class="nowrap">Google Chrome</td>
<td class="align-right">10,392</td>
<td class="table-arr"><i class="icon-up"></i></td>
<td class="align-right">4,214</td>
<td class="table-arr"><i class="icon-up"></i></td>
<td class="align-right">45%</td>
<td class="table-arr"><i class="icon-up"></i></td>
</tr>
<tr>
<td><img src="img/firefox.svg" width="20" height="20"></td>
<td class="nowrap">Mozilla Firefox</td>
<td class="align-right">7,873</td>
<td class="table-arr"><i class="icon-down"></i></td>
<td class="align-right">3,031</td>
<td class="table-arr"><i class="icon-up"></i></td>
<td class="align-right">28%</td>
<td class="table-arr"><i class="icon-up"></i></td>
</tr>
<tr>
<td><img src="img/ie.svg" width="20" height="20"></td>
<td class="nowrap">Internet Explorer</td>
<td class="align-right">5,890</td>
<td class="table-arr"><i class="icon-down"></i></td>
<td class="align-right">2,102</td>
<td class="table-arr"><i class="icon-down"></i></td>
<td class="align-right">17%</td>
<td class="table-arr"><i class="icon-down"></i></td>
</tr>
<tr>
<td><img src="img/safari.svg" width="20" height="20"></td>
<td class="nowrap">Safari</td>
<td class="align-right">4,001</td>
<td class="table-arr"><i class="icon-up"></i></td>
<td class="align-right">1,001</td>
<td class="table-arr"><i class="icon-down"></i></td>
<td class="align-right">14%</td>
<td class="table-arr"><i class="icon-down"></i></td>
</tr>
<tr>
<td><img src="img/opera.svg" width="20" height="20"></td>
<td class="nowrap">Opera</td>
<td class="align-right">1,833</td>
<td class="table-arr"><i class="icon-up"></i></td>
<td class="align-right">83</td>
<td class="table-arr"><i class="icon-up"></i></td>
<td class="align-right">5%</td>
<td class="table-arr"><i class="icon-up"></i></td>
<tr ng-repeat="item in metricsTableData">
<td><img ng-src="{{item.image}}" width="20" height="20"></td>
<td ng-class="nowrap">{{item.browser}}</td>
<td class="align-right">{{item.visits}}</td>
<td class="table-arr"><i ng-class="{'icon-up': item.isVisitsUp, 'icon-down': !item.isVisitsUp }"></i></td>
<td class="align-right">{{item.purchases}}</td>
<td class="table-arr"><i ng-class="{'icon-up': item.isPurchasesUp, 'icon-down': !item.isPurchasesUp }"></i></td>
<td class="align-right">{{item.percent}}</td>
<td class="table-arr"><i ng-class="{'icon-up': item.isPercentUp, 'icon-down': !item.isPercentUp }"></i></td>
</tr>
</tbody>
</table>

39
src/app/pages/tables/widgets/smartTable.html Normal file
View File

@ -0,0 +1,39 @@
<div class="horizontal-scroll">
<table class="table" st-table="smartTableData" ng-controller="tablesPageCtrl">
<thead>
<tr class="sortable">
<th class="table-id" st-sort="id">#</th>
<th st-sort="firstName">First Name</th>
<th st-sort="lastName">Last Name</th>
<th st-sort="username">Username</th>
<th st-sort="email">Email</th>
<th st-sort="age">Age</th>
</tr>
<tr>
<th></th>
<th><input st-search="firstName" placeholder="Search First Name" class="input-sm form-control search-input" type="search"/></th>
<th><input st-search="lastName" placeholder="Search Last Name" class="input-sm form-control search-input" type="search"/></th>
<th><input st-search="username" placeholder="Search Username" class="input-sm form-control search-input" type="search"/></th>
<th><input st-search="email" placeholder="Search Email" class="input-sm form-control search-input" type="search"/></th>
<th><input st-search="age" placeholder="Search Age" class="input-sm form-control search-input" type="search"/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in smartTableData">
<td class="table-id">{{item.id}}</td>
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td>{{item.username}}</td>
<td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
<td>{{item.age}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" class="text-center">
<div st-pagination="" st-items-by-page="5" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
</div>

50
src/app/pages/tables/widgets/stripedRows.html
View File

@ -1,8 +1,8 @@
<div class="horizontal-scroll">
<div class="horizontal-scroll vertical-scroll" ng-controller="tablesPageCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th class="table-id">#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
@ -11,45 +11,13 @@
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>mdo@gmail.com</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>fat@yandex.ru</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
<td>twitter@outlook.com</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>John</td>
<td>Snow</td>
<td>@snow</td>
<td>snow@gmail.com</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>Jack</td>
<td>Sparrow</td>
<td>@jack</td>
<td>jack@yandex.ru</td>
<td>30</td>
<tr ng-repeat="item in smartTableData">
<td class="table-id">{{item.id}}</td>
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td>{{item.username}}</td>
<td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>

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

@ -43,6 +43,9 @@ a.al-logo {
white-space: nowrap;
text-shadow: 0 0 2px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
&:hover {
color: $primary;
text-decoration: none;

58
src/assets/css/_table.scss
View File

@ -37,6 +37,11 @@
}
}
.table-id {
text-align: left !important;
width: 40px;
}
.table-arr {
width: 5px;
padding: 10px 8px 8px 0 !important;
@ -52,3 +57,56 @@
.browser-icons {
width: 41px;
}
.st-sort-ascent, .st-sort-descent {
position: relative;
}
.st-sort-ascent:after, .st-sort-descent:after {
width: 0;
height: 0;
border-bottom: 4px solid $default-text;
border-top: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin-bottom: 2px;
}
.st-sort-descent:after {
transform:rotate(-180deg);
margin-bottom: -2px;
}
.sortable {
th {
cursor: pointer;
&:after {
content: '';
display: inline-block;
width: 8px;
margin-left: 8px;
}
}
}
a.email-link {
color: $default-text;
&:hover {
color: $danger;
}
}
input.search-input {
margin-left: -8px;
padding-left: 8px;
}
.table .pagination {
margin: 4px 0 -12px 0;
a {
cursor: pointer;
}
}
.vertical-scroll {
max-height: 210px;
}