feat: add verticle timeline (#5002)

Author: maze-runnar

app/styles/components/track-item.scss

@@ -10,3 +10,29 @@
   position: absolute;
   top: 0;
 }
+
+.history-tl-container {
+  display: block;
+  margin: auto;
+  position: relative;
+  width: 100%;
+}
+
+.history-tl-container ul.tl li {
+  border-left: 1px solid rgba(86, 86, 87, .15);
+  list-style: none;
+  margin: auto;
+  margin-left: 75px;
+  min-height: 50px;
+  padding: 0 0 10px 10px;
+  position: relative;
+}
+
+ul.tl li .timestamp {
+  color: #3b3939;
+  font-size: 13px;
+  left: -20%;
+  position: absolute;
+  text-align: right;
+  width: 100px;
+}

app/templates/public/sessions.hbs

@@ -44,12 +44,23 @@
   </InfinityLoader>
 {{/if}}
 
-<div class="mt-8">
+
+<div class="history-tl-container">
+  <ul class="tl">
   {{#each this.model.session as |session|}}
-    <Public::SessionItem @session={{session}} @timezone={{this.timezone}} />
+    <li>
+     <div class="timestamp">
+       {{general-date session.startsAt session.event.timezone 'HH:mm'}} - 
+       {{general-date session.endsAt session.event.timezone 'HH:mm'}}
+      </div>
+    <div class="item-title">
+      <Public::SessionItem @session={{session}} @timezone={{this.timezone}} />
+    </div>
+   </li>
   {{else}}
     <div class="ui disabled header">{{t 'No Sessions exist for this time period'}}</div>
   {{/each}}
+  </ul>
   <InfinityLoader @infinityModel={{this.model.session}} @triggerOffset={{300}} @eventDebounce={{50}}>
     <div class="center aligned five wide column">
       <div class="ui loading very padded basic segment">