mirror of https://github.com/akveo/blur-admin
refactor(timeline): enable & relocate to pages, change icons
alex
parent
a302433b13
commit
a05d0bdb0a
|
|
@ -1,43 +0,0 @@
|
||||||
<!-- todo: remove whole block -->
|
|
||||||
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="timelineCtrl">
|
|
||||||
<div class="cd-timeline-block">
|
|
||||||
<div class="cd-timeline-img cd-picture">
|
|
||||||
<img src="img/cd-icon-picture.svg" alt="Picture">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cd-timeline-content cd-timeline-content-green">
|
|
||||||
<h5>Title of section 1</h5>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
|
|
||||||
placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
|
|
||||||
<span class="cd-date">Jan 14</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cd-timeline-block">
|
|
||||||
<div class="cd-timeline-img cd-movie">
|
|
||||||
<img src="img/cd-icon-movie.svg" alt="Movie">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cd-timeline-content cd-timeline-content-red">
|
|
||||||
<h5>Title of section 2</h5>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
|
|
||||||
placeat iure tempora laudantium ipsa ad debitis unde?</p>
|
|
||||||
<span class="cd-date">Jan 18</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cd-timeline-block">
|
|
||||||
<div class="cd-timeline-img cd-location">
|
|
||||||
<img src="img/cd-icon-location.svg" alt="Location">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cd-timeline-content cd-timeline-content-blue">
|
|
||||||
<h5>Title of section 3</h5>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
|
|
||||||
<span class="cd-date">Feb 18</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -26,7 +26,8 @@
|
||||||
'BlurAdmin.pages.tables',
|
'BlurAdmin.pages.tables',
|
||||||
'BlurAdmin.pages.tree',
|
'BlurAdmin.pages.tree',
|
||||||
'BlurAdmin.pages.tabs',
|
'BlurAdmin.pages.tabs',
|
||||||
'BlurAdmin.pages.typography'
|
'BlurAdmin.pages.typography',
|
||||||
|
'BlurAdmin.pages.timeline'
|
||||||
])
|
])
|
||||||
.config(routeConfig);
|
.config(routeConfig);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.pages.dashboard')
|
angular.module('BlurAdmin.pages.timeline')
|
||||||
.service('TimelineCtrl', TimelineCtrl);
|
.controller('TimelineCtrl', TimelineCtrl);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function TimelineCtrl() {
|
function TimelineCtrl() {
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<!-- todo: remove whole block -->
|
||||||
|
<div ba-panel>
|
||||||
|
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="TimelineCtrl">
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg success"><img ng-src="{{::( 'Euro-Coin' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-green">
|
||||||
|
<h5>Title of section 1</h5>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
|
||||||
|
placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
|
||||||
|
<span class="cd-date">Jan 14</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Laptop-Signal' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-red">
|
||||||
|
<h5>Title of section 2</h5>
|
||||||
|
|
||||||
|
<p>Donec dapibus at leo eget volutpat. Praesent dolor tellus, ultricies venenatis molestie eu, luctus eget nibh.
|
||||||
|
Curabitur ullamcorper eleifend nisl.</p>
|
||||||
|
<span class="cd-date">Jan 18</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg primary"><img ng-src="{{::( 'Checklist' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-blue">
|
||||||
|
<h5>Title of section 3</h5>
|
||||||
|
|
||||||
|
<p>Phasellus auctor tellus eget lacinia condimentum. Cum sociis natoque penatibus et magnis dis parturient
|
||||||
|
montes.</p>
|
||||||
|
<span class="cd-date">Feb 18</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg success"><img ng-src="{{::( 'Boss-3' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-green">
|
||||||
|
<h5>Title of section 4</h5>
|
||||||
|
|
||||||
|
<p>Morbi fringilla in massa ac posuere. Fusce non sagittis massa, id accumsan odio. Nullam eget tempor est.
|
||||||
|
Etiam eu felis eu purus aliquam tristique id quis nisl. Nam eros nibh, consequat sed pulvinar eu, ultrices
|
||||||
|
ornare ligula. Aenean interdum sed nunc sed hendrerit.</p>
|
||||||
|
<span class="cd-date">Feb 20</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Online-Shopping' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-red">
|
||||||
|
<h5>Title of section 5</h5>
|
||||||
|
|
||||||
|
<p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eget mattis
|
||||||
|
metus. Nullam egestas eros metus, quis fringilla urna accumsan sed. Aliquam ultrices at arcu vitae
|
||||||
|
tincidunt.</p>
|
||||||
|
<span class="cd-date">Feb 21</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg primary"><img ng-src="{{::( 'Money-Increase' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-blue">
|
||||||
|
<h5>Title of section 6</h5>
|
||||||
|
|
||||||
|
<p>Praesent bibendum ante mattis augue consectetur, ut commodo turpis consequat. Donec ligula eros, porta in
|
||||||
|
iaculis vel, semper ac sem. Integer at mauris lorem.</p>
|
||||||
|
<span class="cd-date">Feb 23</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cd-timeline-block">
|
||||||
|
<div class="cd-timeline-img">
|
||||||
|
<div class="kameleon-icon with-round-bg success"><img ng-src="{{::( 'Vector' | kameleonImg )}}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cd-timeline-content cd-timeline-content-green">
|
||||||
|
<h5>Title of section 7</h5>
|
||||||
|
|
||||||
|
<p>Vivamus ut laoreet erat, vitae eleifend eros. Sed varius id tellus non lobortis. Sed dolor ante, cursus non
|
||||||
|
scelerisque sed, euismod id eros.</p>
|
||||||
|
<span class="cd-date">Feb 24</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/**
|
||||||
|
* @author a.demeshko
|
||||||
|
* created on 1/12/16
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('BlurAdmin.pages.timeline', [])
|
||||||
|
.config(routeConfig);
|
||||||
|
|
||||||
|
/** @ngInject */
|
||||||
|
function routeConfig($stateProvider) {
|
||||||
|
$stateProvider
|
||||||
|
.state('timeline', {
|
||||||
|
url: '/timeline',
|
||||||
|
templateUrl: 'app/pages/timeline/timeline.html'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -44,7 +44,9 @@
|
||||||
'/maps/leaflet': 'Leaflet Map',
|
'/maps/leaflet': 'Leaflet Map',
|
||||||
'/maps/line': 'Line Map',
|
'/maps/line': 'Line Map',
|
||||||
'/maps/bubble': 'Bubble Map',
|
'/maps/bubble': 'Bubble Map',
|
||||||
'/panels': 'Panels'
|
'/panels': 'Panels',
|
||||||
|
'/timeline': 'Timeline',
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.$watch(function () {
|
$scope.$watch(function () {
|
||||||
|
|
|
||||||
|
|
@ -151,6 +151,11 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Timeline',
|
||||||
|
icon: 'ion-ios-pulse',
|
||||||
|
root: '#/timeline'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'User Profile',
|
title: 'User Profile',
|
||||||
icon: 'ion-person',
|
icon: 'ion-person',
|
||||||
|
|
|
||||||
|
|
@ -38,29 +38,6 @@
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: -12px;
|
|
||||||
margin-top: -12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cd-picture {
|
|
||||||
background: $success;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cd-movie {
|
|
||||||
background: $danger;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.cd-location {
|
|
||||||
background: $primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: $resXL) {
|
@media only screen and (min-width: $resXL) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue