feat: Schedule: Show date and time in left column (#5772)

Author: DIVYAM TAYAL

app/styles/partials/utils.scss

@@ -61,6 +61,10 @@
   padding-top: 0 !important;
 }
 
+.pt-4 {
+  padding-top: 1rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }

app/templates/public/sessions.hbs

@@ -46,11 +46,32 @@
 {{/if}}
 
 <div class="mt-8">
-  {{#each this.model.session as |session|}}
-    <Public::SessionItem @session={{session}} @event={{this.model.event}} @timezone={{this.timezone}} />
+  {{#if this.model.session}}
+    <table class="ui very basic table">
+      <thead class="full-width">
+        <tr>
+          <th class="two wide" style="border: none;"></th>
+          <th style="border: none;"></th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each this.model.session as |session|}}
+          <tr>
+            <td class="top aligned {{unless this.device.isMobile 'centered text'}}" style="border-top: none;">
+              <h4 class="ui header {{unless this.device.isMobile 'pt-4'}}" style="color: rgba(0, 0, 0, 0.7);">
+                {{general-date session.startsAt this.timezone 'h:mm A (z)'}}
+              </h4>
+            </td>
+            <td style="border-top: none; border-left: 1px solid lightgrey">
+              <Public::SessionItem @session={{session}} @event={{this.model.event}} @timezone={{this.timezone}} />
+            </td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
   {{else}}
     <div class="ui disabled header">{{t 'No Sessions exist for this time period'}}</div>
-  {{/each}}
+  {{/if}}    
   <InfinityLoader @infinityModel={{this.model.session}} @triggerOffset={{300}} @eventDebounce={{50}}>
     <div class="center aligned five wide column">
       <div class="ui loading very padded basic segment">