refactor(timeline): enable & relocate to pages, change icons

pull/3/head
alex 9 years ago
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.tree',
'BlurAdmin.pages.tabs',
'BlurAdmin.pages.typography'
'BlurAdmin.pages.typography',
'BlurAdmin.pages.timeline'
])
.config(routeConfig);

@ -5,8 +5,8 @@
(function () {
'use strict';
angular.module('BlurAdmin.pages.dashboard')
.service('TimelineCtrl', TimelineCtrl);
angular.module('BlurAdmin.pages.timeline')
.controller('TimelineCtrl', TimelineCtrl);
/** @ngInject */
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/line': 'Line Map',
'/maps/bubble': 'Bubble Map',
'/panels': 'Panels'
'/panels': 'Panels',
'/timeline': 'Timeline',
};
$scope.$watch(function () {

@ -151,6 +151,11 @@
}
]
},
{
title: 'Timeline',
icon: 'ion-ios-pulse',
root: '#/timeline'
},
{
title: 'User Profile',
icon: 'ion-person',

@ -38,29 +38,6 @@
width: 40px;
height: 40px;
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) {

Loading…
Cancel
Save