rpocklin / angular-timeline Goto Github PK

Hi. because I have:

Unable to find suitable version for angular

when installing angular-timeline.

It looks very well, Angular 8 support would be cool

Is there any option to turn vertical timeline into horizontal?

Great angular directive. Curious if there was a way to easily remove the badges in the center or otherwise make the timeline look better in a narrow sidebar. I've tried making the events show up on one side, but not having much luck. Is this function part of the directive?

I recommend you namespace your directives and CSS:

• The reduces potential conflicts with other libraries
• This helps identify your own library components/directives

angular.module('angular-timeline').directive('rp-timeline', function() {... }
angular.module('angular-timeline').directive('rp-timeline-panel', function() { ... }

Note the additional hypens in np-timeline-panel

.rp-timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative; 
}

Hi, angular 1.3 is still suported?
because I get:
Unable to find suitable version for angular
when installing angular-timeline.

Thank you!

Hi,

When the data which the timeline is rendering is changed I get

Error: d[h].apply is not a function hf/this.$get</m.prototype.$broadcast@http://localhost:9885/Scripts/angular.min.js:136:426 hf/this.$get</m.prototype.$destroy@http://localhost:9885/Scripts/angular.min.js:132:362 Ce</<.compile/</<@http://localhost:9885/Scripts/angular.min.js:277:203 hf/this.$get</m.prototype.$watchCollection/<@http://localhost:9885/Scripts/angular.min.js:130:291 hf/this.$get</m.prototype.$digest@http://localhost:9885/Scripts/angular.min.js:131:354 hf/this.$get</m.prototype.$apply@http://localhost:9885/Scripts/angular.min.js:134:359 l@http://localhost:9885/Scripts/angular.min.js:86:325 M@http://localhost:9885/Scripts/angular.min.js:90:370 Rf/</x.onload@http://localhost:9885/Scripts/angular.min.js:91:394

I am simply calling (simplified for brevity)
$scope.timelineData = TimelineData.query()

in 'Installation'

  <!-- view -->
  <timeline-event ng-repeat="event in events">
    <timeline-badge class="{{event.badgeClass}}">
      <i class="glyphicon {{event.badgeIconClass}}"></i>
    </timeline-badge>
    <timeline-panel class="{{event.badgeClass}}">
      <timeline-heading>
        <h4>{{event.title}}</h4>
      </timeline-heading>
      <p>{{event.content}}</p>
    </timeline-panel>
  </timeline-event>

the code above should be contained by

<timeline>
<--! code above-->
</timeline>

I think freshmen may be encounter problem when copying code from current docs

why Float right is forced on smaller (eg. mobile) devices ?

Thanks Robert for this plugin, I love it.

I wonder if there's any way to make it work with Angular Translate? I assume one does have to use $translate.instant in the controller and presumably ng-bind-html in the html, but that alone doesn't work. I couldn't figure out what exactly the problem is, does anyone know?

Thanks for this great directive. I'm wondering if there's a way to make the badge on the center timeline a little wider(to fit more text) but still have it centered on the center line? I've figure out how to make it wider by just adjusting the "width" css property but can't seem to figure out the secret sauce to center it on the line. I tried messing with the "left" css property but that wasn't a perfect solution since it only worked for the current width of the browser. Every time I resized, it was off again. Thanks!

Here are the properties I was playing around with:

timeline li timeline-badge {
width: 50px;
left: 50%;
}

Hi!

I am using angular-timeline 1.6.1.
Putting side="left" on the has no effect; the timeline is still rendered left-and-right (unless max-width 767px).

This is my markup:

<timeline>
    <timeline-event ng-repeat="event in events" side="left">
        <timeline-badge>...</timeline-badge>
        <timeline-panel>...</timeline-panel>
    </timeline-event>
</timeline>

Thanks,
Frank

The timline worked perfectly with JSON dataset passed to the timeline-node using ng-repeat.
However, ng-click is not working.
Is it possible to use ng-click without modifying the directives?

Hey,

Thanks for your lib.
When width is greater than 767px, a media-query center the timeline, and all elements are adjusting to the left or the right. How can i force the element to be in a column (whatever the width of the screen) the same way it is displayed in mobile device / "little screen" ?

Regards

When the timeline isn't set manually (using buttons) the "side" attribute is empty, making it a real pain to make specific css for events based on the side they are positioned at.

On npm, version is 1.2.1.
Allso, the github link seems to be wrong

It would be really useful if the directives were namespaced as "timeline" is very common. (It is currently causing a conflict for me.)

Thanks!

Hey,

your bower.json has a version attribute that hast the valu 1.0. Bower ignores the version attribute anyway, so better remove it or keep updated.

Additionally, could you create version tags for the latest 1.2 release? 1.1 has no entry in the changelog, and that's the only currently available version in bower. The README seems to reflect 1.2 which is dev-master I guess?

@rpocklin
Just like in this bootstrap demo
http://bootsnipp.com/snippets/featured/timeline-dotted
does this module supports date & time display opposite of their respective panel?
So for example timeline panel on the left side of the timeline badge and the date & time component on the right side.
And if it doesn't support the feature, is it planned to be in some future release ?

When using side left or side right the timeline should use the full width that it has available

Currently it is always positioned at center.

Hello,

I was wondering if it is possible to display both labels on left and right side of a node at the same time?
This can be used when you have two storyboards and would like to show summary from both of them for each node.

Thanks

Awesome work this, but any implementation for angular2?

Hi,

Great library, very easy to use, thank you!

I'm trying to limit the height of the timeline on the page by setting the height and overflow: auto properties of the

under the tag. This works apart from the vertical line separating the left and right side (and where the badges are display) is also set to the height of the
so once you start scrolling the vertical line doesn't continue. Any suggestions?

Thanks,

Tom

This is great... but is there a way of adding a sense of elapsed time between entries?

For example.. larger gaps between events that occurred days apart and shorter gaps for events that occurred closer together?

Hi Robert,

this is more a question about your bower.json...

"main" only specifies JS to be installed but does not contain any CSS. As a result, I have to add it manually to my index.html. If you add the CSS file to the "main" section, it'll be added automatically to my index.html. Unually this is "/dist/angular-timeline.css" then, since it is built from scss.

In addition, I am wondering why you have dependencies to "angular-bootstrap" and "angular-ui-router". As a result, I have these libraries automatically added to my index.html. Why are these required? The original Bootsnip at least doesn't.

Many thanks for making this available,
Frank

I'm having to use a resolution to angular 1.4.7 and angular-sanitize 1.4.7. It seems to work fine running 1.4.7. If it could be updated that would be great. Thanks!

I can make a PR changing the versions in bower.json if that would be helpful.

Thank you so much for this great module! I'm having a problem with printing: everything looks correct in the browser, when I print a timeline (I have tried in both Firefox and IE11) the badges and panels show up, but the center line and the lines that connect each panel to its badge do not show up. Any thoughts on what can be done to fix this? Thanks.

Hi and thanks a lot for the lovely plugin.

I went through the docs and example, even the code, and I can't figure out how (and whether) it'd be possible to 'force' the alignment of the panel to be all to the left/right (as when used in a small column the panels are too narrow when alternating between left and right).

Can this be done?

Cheers!

Hi,
Using last version of library v1.7.0.

Have you considered making the library available through cdnjs or jsdelivr? Publishing it to npm would also be helpful.

Hello,
First of all - great work and I loved this. Just one issue for now... How do I fill up the whole content with text? It always only fills half of it - does not matter html content or simple text.

What changes need to be done in css or any other place to achieve this?

Here is a picture

...

Hi,

I propose you some improvements to customize layout :
https://github.com/landru29/angular-timeline/blob/master/src/timeline-event-directive.js

2 attributes are available on timeline-event directive

• side : 'right' or 'left' to display all elements on the same side
• distribute : 'right' or 'left' to alternate elements right/left (the value define where the first element will be displayed)

the attributes are watched, so that they be lived changed

git clone [email protected]:rpocklin/angular-timeline.git

cloned using the url on the right of source
please update it on readme too.. Thanks

It seems that the z-index or something may be off. As you can see in the screenshot, the left-box and arrow pointing towards the timeline act as "one", while the right-side still has a border covering part of the arrow.