I'm currently working on creating a timeline for changeLogs and populating it with data from an AngularJS controller. The issue I'm facing is that the height of the timeline "Line" is set to 6px. This means that even when there is no data in the controller, a 6px line is still displayed in the view.
What I'd like instead is for the line to have a height of 0px when there is no data, and a height of 6px when data is present.
Here's a snippet from the CSS
.timeline {
position: relative;
padding: 1em 0;
list-style-type: none;
overflow-x: hidden;
}
.timeline:after {
position: absolute;
left: 120px;
top: 0;
content: ' ';
display: block;
width: 6px;
height: 100%;
background: #636e72; /*Color of horizontal line*/
z-index: 5;
}
Here's a snippet from the HTML
<ul class="timeline">
<li ng-repeat="log in changelogCtrl.logs | orderBy: '-dateObj'">
<span class="direction-l">
<span class="flag-wrapper">
<span class="flag">
<span class="time-wrapper">
<span class="time">
{{log.date}}
</span>
</span>
</span>
</span>
</span>
<div class="direction-r move-left">
<div class="flag-wrapper">
<div class="flag">
<strong>{{log.module}}</strong> <strong class="fa fa-long-arrow-right"></strong> {{log.subModule}}
</div>
</div>
<div class="desc">
{{log.desc}}
</div>
</div>
</li>
</ul>