knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#342,bugfix,timeline][s]: remove explicitly setting of width in JS as not the right way - fixes #342.

Browse Source
This commit is contained in:
Rufus Pollock 2013-04-16 18:23:59 +01:00
parent fc64fdab8f
commit 1fc5610874
4 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/recline-deps.html
View File

@ -17,6 +17,7 @@
<link rel="stylesheet" href="{{page.root}}css/transform.css">
<link rel="stylesheet" href="{{page.root}}css/map.css">
<link rel="stylesheet" href="{{page.root}}css/multiview.css">
<link rel="stylesheet" href="{{page.root}}css/timeline.css">
<!-- /Recline CSS components -->
<!-- 3rd party JS libraries -->

3
css/timeline.css Normal file
View File

@ -0,0 +1,3 @@
.recline-timeline {
position: relative;
}

6
docs/tutorial-views.markdown
View File

@ -251,9 +251,10 @@ First, add the additional dependencies for the timeline view. The timeline is bu
<script type="text/javascript" src="vendor/timeline/20120520/js/timeline.js"></script>
{% endhighlight %}
Now, create a new div for the map:
Now, create a new div for the map (must have an explicit height for the timeline to render):
{% highlight html %}
<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
<div id="mytimeline"></div>
{% endhighlight %}
@ -264,7 +265,8 @@ previously:
{% include tutorial-views-timeline.js %}
{% endhighlight %}
<div id="mytimeline">&nbsp;</div>
<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
<div id="mytimeline"></div>
<div style="clear: both;"></div>
<script type="text/javascript">

5
src/view.timeline.js
View File

@ -67,11 +67,6 @@ my.Timeline = Backbone.View.extend({
_initTimeline: function() {
var $timeline = this.el.find(this.elementId);
// set width explicitly o/w timeline goes wider that screen for some reason
var width = Math.max(this.el.width(), this.el.find('.recline-timeline').width());
if (width) {
$timeline.width(width);
}
var data = this._timelineJSON();
this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions"));
this._timelineIsInitialized = true