diff --git a/README.md b/README.md index a487e87..9124977 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,8 @@ show history or describe a sequence of events. [Demo](http://rpocklin.github.io/angular-timeline/example/index.html) +[Demo using attributes](http://rpocklin.github.io/angular-timeline/example/index-attributes.html) + [Demo without bootstrap](http://rpocklin.github.io/angular-timeline/example/index-no-bootstrap.html) [Original Implementation (HTML / Javascript)](http://bootsnipp.com/snippets/featured/timeline-responsive) diff --git a/dist/angular-timeline-animations.css b/dist/angular-timeline-animations.css index 720e79a..5a56b23 100644 --- a/dist/angular-timeline-animations.css +++ b/dist/angular-timeline-animations.css @@ -3,16 +3,16 @@ opacity: 0; } @media only screen and (min-width: 768px) { - .timeline timeline-event:nth-child(odd) timeline-panel.bounce-in { + .timeline .timeline-event:nth-child(odd) .timeline-panel.bounce-in { animation: cd-bounce-2 0.5s; } - .timeline timeline-event:nth-child(even) timeline-panel.bounce-in { + .timeline .timeline-event:nth-child(even) .timeline-panel.bounce-in { animation: cd-bounce-2-inverse 0.5s; } } @media only screen and (max-width: 767px) { - .timeline timeline-event timeline-panel.bounce-in { + .timeline .timeline-event .timeline-panel.bounce-in { animation: cd-bounce-2 0.5s; } } -.timeline timeline-event timeline-badge.bounce-in { +.timeline .timeline-event .timeline-badge.bounce-in { animation: cd-bounce-1 0.5s; } @-webkit-keyframes cd-bounce-2 { diff --git a/dist/angular-timeline.css b/dist/angular-timeline.css index 87e7a95..7921022 100644 --- a/dist/angular-timeline.css +++ b/dist/angular-timeline.css @@ -2,18 +2,18 @@ margin-right: 4px; vertical-align: -1px; } -img { +.timeline img { vertical-align: middle; } -.img-responsive { +.timeline .img-responsive { display: block; height: auto; max-width: 100%; } -.img-rounded { +.timeline .img-rounded { border-radius: 3px; } -.img-thumbnail { +.timeline .img-thumbnail { background-color: #fff; border: 1px solid #ededf0; border-radius: 3px; @@ -27,23 +27,22 @@ img { transition: all .2s ease-in-out; webkit-transition: all .2s ease-in-out; } -.img-circle { +.timeline .img-circle { border-radius: 50%; } .timeline { padding: 0; list-style: none; position: relative; } - -.timeline:before { - top: 0; - bottom: 0; - position: absolute; - content: " "; - width: 3px; - background-color: #cccccc; - left: 50%; - margin-left: -1.5px; } + .timeline:before { + top: 0; + bottom: 0; + position: absolute; + content: " "; + width: 3px; + background-color: #cccccc; + left: 50%; + margin-left: -1.5px; } .timeline-event { margin-bottom: 20px; @@ -59,60 +58,7 @@ img { padding: 0.8em 1em; margin: 0; } -timeline-badge.primary { - background-color: #2e6da4 !important; } - -timeline-badge.success { - background-color: #3f903f !important; } - -timeline-badge.warning { - background-color: #f0ad4e !important; } - -timeline-badge.danger { - background-color: #d9534f !important; } - -timeline-badge.info { - background-color: #5bc0de !important; } - -.timeline-title { - margin-top: 0; } - -timeline-panel > * { - margin: 0; } - -timeline-panel { - background-color: #fff; - float: left; - border: 1px solid #d4d4d4; - border-radius: 2px; - padding: 12px; - position: relative; - -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } - -timeline-panel:before { - position: absolute; - top: 35px; - right: -15px; - display: inline-block; - border-top: 15px solid transparent; - border-left: 15px solid #ccc; - border-right: 0 solid #ccc; - border-bottom: 15px solid transparent; - content: " "; } - -timeline-panel:after { - position: absolute; - top: 36px; - right: -14px; - display: inline-block; - border-top: 14px solid transparent; - border-left: 14px solid #fff; - border-right: 0 solid #fff; - border-bottom: 14px solid transparent; - content: " "; } - -timeline-badge { +.timeline-badge { box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); color: #fff; width: 50px; @@ -130,32 +76,66 @@ timeline-badge { border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } + .timeline-badge.primary { + background-color: #2e6da4 !important; } + .timeline-badge.success { + background-color: #3f903f !important; } + .timeline-badge.warning { + background-color: #f0ad4e !important; } + .timeline-badge.danger { + background-color: #d9534f !important; } + .timeline-badge.info { + background-color: #5bc0de !important; } -.timeline-inverted timeline-panel { - float: right; } - -.timeline-inverted timeline-panel:before { - border-left-width: 0; - border-right-width: 15px; - left: -15px; - right: auto; } - -.timeline-inverted timeline-panel:after { - border-left-width: 0; - border-right-width: 14px; - left: -14px; - right: auto; } - -.timeline-event:before, -.timeline-event:after { - content: " "; - display: table; } +.timeline-title { + margin-top: 0; } -.timeline-event:after { - clear: both; } +.timeline-panel { + background-color: #fff; + float: left; + border: 1px solid #d4d4d4; + border-radius: 2px; + padding: 12px; + position: relative; + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } + .timeline-panel > * { + margin: 0; } + .timeline-panel:before { + position: absolute; + top: 35px; + right: -15px; + display: inline-block; + border-top: 15px solid transparent; + border-left: 15px solid #ccc; + border-right: 0 solid #ccc; + border-bottom: 15px solid transparent; + content: " "; } + .timeline-panel:after { + position: absolute; + top: 36px; + right: -14px; + display: inline-block; + border-top: 14px solid transparent; + border-left: 14px solid #fff; + border-right: 0 solid #fff; + border-bottom: 14px solid transparent; + content: " "; } + +.timeline-inverted .timeline-panel { + float: right; } + .timeline-inverted .timeline-panel:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; } + .timeline-inverted .timeline-panel:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; } -.timeline-event:before, -.timeline-event:after { +.timeline-event:before, .timeline-event:after { content: " "; display: table; } @@ -163,7 +143,7 @@ timeline-badge { clear: both; } @media only screen and (min-width: 768px) { - timeline-panel { + .timeline-panel { width: calc(50% - 45px); width: -moz-calc(50% - 45px); width: -webkit-calc(50% - 45px); } } @@ -171,25 +151,24 @@ timeline-badge { @media only screen and (max-width: 767px) { .timeline:before { left: 40px; } - timeline-panel { + .timeline-panel { + float: right; width: calc(100% - 85px); width: -moz-calc(100% - 85px); width: -webkit-calc(100% - 85px); } - timeline-badge { + .timeline-panel:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + top: 46px; } + .timeline-panel:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + top: 47px; } + .timeline-badge { left: 15px; margin-left: 0; - top: 36px; } - timeline-panel { - float: right; } - timeline-panel:before { - border-left-width: 0; - border-right-width: 15px; - left: -15px; - right: auto; - top: 46px; } - timeline-panel:after { - border-left-width: 0; - border-right-width: 14px; - left: -14px; - right: auto; - top: 47px; } } + top: 36px; } } diff --git a/dist/angular-timeline.js b/dist/angular-timeline.js index 33736fe..ca59e41 100644 --- a/dist/angular-timeline.js +++ b/dist/angular-timeline.js @@ -13,6 +13,7 @@ angular.module('angular-timeline').directive('timelineBadge', function() { require: '^timelineEvent', restrict: 'AE', transclude: true, + replace: true, template: '
' }; }); @@ -30,6 +31,7 @@ angular.module('angular-timeline').directive('timeline', function() { return { restrict: 'AE', transclude: true, + replace: true, template: '', controller: function() {} }; @@ -55,6 +57,7 @@ angular.module('angular-timeline').directive('timelineEvent', function() { require: '^timeline', restrict: 'AE', transclude: true, + replace: true, template: '
  • ', link: function(scope, element, attrs, controller) { @@ -105,6 +108,7 @@ angular.module('angular-timeline').directive('timelineFooter', function() { require: '^timelinePanel', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; }); @@ -123,6 +127,7 @@ angular.module('angular-timeline').directive('timelineHeading', function() { require: '^timelinePanel', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; }); @@ -141,6 +146,7 @@ angular.module('angular-timeline').directive('timelinePanel', function() { require: '^timeline', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; }); diff --git a/example/app-attributes.js b/example/app-attributes.js new file mode 100644 index 0000000..6a62ebf --- /dev/null +++ b/example/app-attributes.js @@ -0,0 +1,16 @@ +'use strict'; + +var app = angular.module('example', [ + 'ngSanitize', + 'ui.router', + 'angular-timeline', + 'angular-scroll-animate' +]); + +app.config(function($stateProvider) { + $stateProvider.state('user', { + url: '', + controller: 'ExampleCtrl', + templateUrl: 'example-attributes.html' + }); +}); diff --git a/example/example-attributes.html b/example/example-attributes.html new file mode 100644 index 0000000..3192918 --- /dev/null +++ b/example/example-attributes.html @@ -0,0 +1,37 @@ +
    +

    Angular Timeline

    + + + + +
    +
    +
    + +
    + +
    + +
    + + +
    +
    +

    {{event.title}}

    + +

    + {{event.when}} +

    +

    +

    +
    +

    +
    + +
    +
    +
    +
    +
    diff --git a/example/index-attributes.html b/example/index-attributes.html new file mode 100644 index 0000000..95a75b3 --- /dev/null +++ b/example/index-attributes.html @@ -0,0 +1,33 @@ + + + + + Angular Timeline Example + + + + + + + + + + + + +
    + + + + + + + + + + + + diff --git a/src/angular-timeline-animations.scss b/src/angular-timeline-animations.scss index d94e93d..2db885a 100644 --- a/src/angular-timeline-animations.scss +++ b/src/angular-timeline-animations.scss @@ -4,22 +4,22 @@ } @media only screen and (min-width: 768px) { - .timeline timeline-event:nth-child(odd) timeline-panel.bounce-in { + .timeline .timeline-event:nth-child(odd) .timeline-panel.bounce-in { animation: cd-bounce-2 0.5s; } - .timeline timeline-event:nth-child(even) timeline-panel.bounce-in { + .timeline .timeline-event:nth-child(even) .timeline-panel.bounce-in { animation: cd-bounce-2-inverse 0.5s; } } @media only screen and (max-width: 767px) { - .timeline timeline-event timeline-panel.bounce-in { + .timeline .timeline-event .timeline-panel.bounce-in { animation: cd-bounce-2 0.5s; } } -.timeline timeline-event timeline-badge.bounce-in { +.timeline .timeline-event .timeline-badge.bounce-in { animation: cd-bounce-1 0.5s; } @@ -198,5 +198,3 @@ transform: scale(1); } } - - diff --git a/src/angular-timeline-images.scss b/src/angular-timeline-images.scss index eda0932..20de21f 100644 --- a/src/angular-timeline-images.scss +++ b/src/angular-timeline-images.scss @@ -5,35 +5,37 @@ } } -img { - vertical-align: middle; -} +.timeline { + img { + vertical-align: middle; + } -.img-responsive { - display: block; - height: auto; - max-width: 100%; -} + .img-responsive { + display: block; + height: auto; + max-width: 100%; + } -.img-rounded { - border-radius: 3px; -} + .img-rounded { + border-radius: 3px; + } -.img-thumbnail { - background-color: #fff; - border: 1px solid #ededf0; - border-radius: 3px; - display: inline-block; - height: auto; - line-height: 1.428571429; - max-width: 100%; - moz-transition: all .2s ease-in-out; - o-transition: all .2s ease-in-out; - padding: 2px; - transition: all .2s ease-in-out; - webkit-transition: all .2s ease-in-out; -} + .img-thumbnail { + background-color: #fff; + border: 1px solid #ededf0; + border-radius: 3px; + display: inline-block; + height: auto; + line-height: 1.428571429; + max-width: 100%; + moz-transition: all .2s ease-in-out; + o-transition: all .2s ease-in-out; + padding: 2px; + transition: all .2s ease-in-out; + webkit-transition: all .2s ease-in-out; + } -.img-circle { - border-radius: 50%; + .img-circle { + border-radius: 50%; + } } diff --git a/src/angular-timeline.scss b/src/angular-timeline.scss index 63b94f7..30c2000 100644 --- a/src/angular-timeline.scss +++ b/src/angular-timeline.scss @@ -12,18 +12,18 @@ $timelineCenterColor: #cccccc; padding: 0; list-style: none; position: relative; -} // center line -.timeline:before { - top: 0; - bottom: 0; - position: absolute; - content: " "; - width: 3px; - background-color: $timelineCenterColor; - left: 50%; - margin-left: -1.5px; + &:before { + top: 0; + bottom: 0; + position: absolute; + content: " "; + width: 3px; + background-color: $timelineCenterColor; + left: 50%; + margin-left: -1.5px; + } } .timeline-event { @@ -44,70 +44,7 @@ $timelineCenterColor: #cccccc; } } -timeline-badge.primary { - background-color: #2e6da4 !important; -} - -timeline-badge.success { - background-color: #3f903f !important; -} - -timeline-badge.warning { - background-color: #f0ad4e !important; -} - -timeline-badge.danger { - background-color: #d9534f !important; -} - -timeline-badge.info { - background-color: #5bc0de !important; -} - -.timeline-title { - margin-top: 0; -} - -timeline-panel > * { - margin: 0; -} - -timeline-panel { - background-color: $panelBackgroundColor; - float: left; - border: 1px solid #d4d4d4; - border-radius: 2px; - padding: 12px; - position: relative; - -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); -} - -timeline-panel:before { - position: absolute; - top: $top; - right: -15px; - display: inline-block; - border-top: 15px solid transparent; - border-left: 15px solid $panelBorderColor; - border-right: 0 solid $panelBorderColor; - border-bottom: 15px solid transparent; - content: " "; -} - -timeline-panel:after { - position: absolute; - top: $top + 1; - right: -14px; - display: inline-block; - border-top: 14px solid transparent; - border-left: 14px solid $panelBackgroundColor; - border-right: 0 solid $panelBackgroundColor; - border-bottom: 14px solid transparent; - content: " "; -} - -timeline-badge { +.timeline-badge { box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); color: #fff; width: 50px; @@ -125,49 +62,104 @@ timeline-badge { border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; -} -.timeline-inverted timeline-panel { - float: right; -} + &.primary { + background-color: #2e6da4 !important; + } -.timeline-inverted timeline-panel:before { - border-left-width: 0; - border-right-width: 15px; - left: -15px; - right: auto; -} + &.success { + background-color: #3f903f !important; + } -.timeline-inverted timeline-panel:after { - border-left-width: 0; - border-right-width: 14px; - left: -14px; - right: auto; + &.warning { + background-color: #f0ad4e !important; + } + + &.danger { + background-color: #d9534f !important; + } + + &.info { + background-color: #5bc0de !important; + } } -.timeline-event:before, -.timeline-event:after { - content: " "; - display: table; +.timeline-title { + margin-top: 0; } -.timeline-event:after { - clear: both; +.timeline-panel { + background-color: $panelBackgroundColor; + float: left; + border: 1px solid #d4d4d4; + border-radius: 2px; + padding: 12px; + position: relative; + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + + > * { + margin: 0; + } + + &:before { + position: absolute; + top: $top; + right: -15px; + display: inline-block; + border-top: 15px solid transparent; + border-left: 15px solid $panelBorderColor; + border-right: 0 solid $panelBorderColor; + border-bottom: 15px solid transparent; + content: " "; + } + + &:after { + position: absolute; + top: $top + 1; + right: -14px; + display: inline-block; + border-top: 14px solid transparent; + border-left: 14px solid $panelBackgroundColor; + border-right: 0 solid $panelBackgroundColor; + border-bottom: 14px solid transparent; + content: " "; + } } -.timeline-event:before, -.timeline-event:after { - content: " "; - display: table; +.timeline-inverted { + .timeline-panel { + float: right; + + &:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } } -.timeline-event:after { - clear: both; +.timeline-event { + &:before, &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } } @media only screen and (min-width: 768px) { - - timeline-panel { + .timeline-panel { width: calc(50% - 45px); width: -moz-calc(50% - 45px); width: -webkit-calc(50% - 45px); @@ -175,41 +167,38 @@ timeline-badge { } @media only screen and (max-width: 767px) { - .timeline:before { left: 40px; } - timeline-panel { + .timeline-panel { + float: right; width: calc(100% - 85px); width: -moz-calc(100% - 85px); width: -webkit-calc(100% - 85px); + + &:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + top: $top + 11px; + } + + &:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + top: $top + 12px; + } } - timeline-badge { + .timeline-badge { left: 15px; margin-left: 0; top: $top + 1; } - timeline-panel { - float: right; - } - - timeline-panel:before { - border-left-width: 0; - border-right-width: 15px; - left: -15px; - right: auto; - top: $top + 11px; - } - - timeline-panel:after { - border-left-width: 0; - border-right-width: 14px; - left: -14px; - right: auto; - top: $top + 12px; - } } diff --git a/src/timeline-badge-directive.js b/src/timeline-badge-directive.js index 15ad36a..20f2918 100644 --- a/src/timeline-badge-directive.js +++ b/src/timeline-badge-directive.js @@ -13,6 +13,7 @@ angular.module('angular-timeline').directive('timelineBadge', function() { require: '^timelineEvent', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; }); diff --git a/src/timeline-directive.js b/src/timeline-directive.js index c404ab2..0b9baa3 100644 --- a/src/timeline-directive.js +++ b/src/timeline-directive.js @@ -12,6 +12,7 @@ angular.module('angular-timeline').directive('timeline', function() { return { restrict: 'AE', transclude: true, + replace: true, template: '', controller: function() {} }; diff --git a/src/timeline-event-directive.js b/src/timeline-event-directive.js index a4eb205..f9f47df 100644 --- a/src/timeline-event-directive.js +++ b/src/timeline-event-directive.js @@ -19,6 +19,7 @@ angular.module('angular-timeline').directive('timelineEvent', function() { require: '^timeline', restrict: 'AE', transclude: true, + replace: true, template: '
  • ', link: function(scope, element, attrs, controller) { diff --git a/src/timeline-footer-directive.js b/src/timeline-footer-directive.js index 15d6de3..cd27be8 100644 --- a/src/timeline-footer-directive.js +++ b/src/timeline-footer-directive.js @@ -13,6 +13,7 @@ angular.module('angular-timeline').directive('timelineFooter', function() { require: '^timelinePanel', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; }); diff --git a/src/timeline-heading-directive.js b/src/timeline-heading-directive.js index a79083a..155cd4e 100644 --- a/src/timeline-heading-directive.js +++ b/src/timeline-heading-directive.js @@ -13,6 +13,7 @@ angular.module('angular-timeline').directive('timelineHeading', function() { require: '^timelinePanel', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; }); diff --git a/src/timeline-panel-directive.js b/src/timeline-panel-directive.js index fc08ab1..a88a1de 100644 --- a/src/timeline-panel-directive.js +++ b/src/timeline-panel-directive.js @@ -13,6 +13,7 @@ angular.module('angular-timeline').directive('timelinePanel', function() { require: '^timeline', restrict: 'AE', transclude: true, + replace: true, template: '
    ' }; });