fix: enhance session card in schedule page

app/components/public/session-item.hbs

@@ -1,6 +1,6 @@
 {{!-- template-lint-disable no-nested-interactive  --}}
 <UiAccordion class="segment p-0" style={{css [email protected] border-color='lightgray'}}>
-  <div class="title p-4" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
+  <div class="title p-4 pr-1" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
     <div class="ui">
       <h3 class="ui header" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
         {{@session.title}}
@@ -19,7 +19,6 @@
           {{@session.sessionType.name}}
         </div>
       </h3>
-      <div class="ui row">{{@session.track.name}}</div>
     </div>
     <br>
     <div class="ui grid stackable">
@@ -32,21 +31,20 @@
         </div>
       {{else}}
         <div class="left floated twelve wide column">
-          <div class="ui grid stackable">
-           <div class="session-speakers">
+          <div class="speaker-flex">
               {{#each @session.speakers as |speaker|}}
-               <img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
-             {{/each}}
-           </div>
-           <div class="left floated nine wide column">
-             {{#each @session.speakers as |speaker|}}
-                {{speaker.name}} ({{speaker.position}}, {{speaker.organisation}})
-                <br>
+                <div class="speaker-card">
+                  <div><img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}"></div>
+                  <div class="ml-2">
+                    {{speaker.name}}
+                    <div class="speaker-details">{{speaker.position}}, {{speaker.organisation}}</div>
+                  </div> 
+                </div>
               {{/each}}
-            </div>
           </div>
         </div>
         <div class="right floated four wide column">
+          <div class="d-flex"><i class="train icon"></i>{{@session.track.name}}</div>
           {{#if @session.startsAt}}
             <div class=""><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
             <div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt 'D MMM, YYYY h:mm A (z)' tz=@timezone}}</div>
@@ -55,7 +53,7 @@
       {{/if}}
     </div>
   </div>
-  <div class="content pt-0 p-4 rounded-t-none {{if @expanded 'active'}}" style={{css background-color='white' border-radius='0.2rem'}}>
+  <div class="content pt-0 p-4 pr-1 rounded-t-none {{if @expanded 'active'}}" style={{css background-color='white' border-radius='0.2rem'}}>
     <div class="ui pt-4 row">
       <div class="column session-description">
         {{sanitize @session.shortAbstract}}

app/styles/partials/speaker.scss

@@ -34,3 +34,20 @@
 .featured-speaker {
   margin-bottom: 10px;
 }
+
+.speaker-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.speaker-card {
+  display: flex;
+  max-width: 230px;
+  padding-bottom: 1rem !important;
+  padding-right: .5rem !important;
+}
+
+.speaker-details {
+  font-size: .9rem;
+  opacity: .8;
+}

app/styles/partials/utils.scss

@@ -65,6 +65,10 @@
   padding-top: 1rem !important;
 }
 
+.pr-1 {
+  padding-right: .25rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }