fix: enhance session card in schedule page (#5809)

* enhance-session-card

* fix-utils

* redesign

* apply-max-width

* code-cleanup

* align-icon

* line-break-in-title

* fix

Co-authored-by: Areeb Jamal <jamal.areeb@gmail.com>
Co-authored-by: Mario Behling <mb@mariobehling.de>

Author: 3 people

app/components/public/session-item.hbs

@@ -1,10 +1,15 @@
 {{!-- template-lint-disable no-nested-interactive  --}}
 <UiAccordion class="segment p-0" style={{css background-color=@session.track.color 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}}
-        <span style={{css float='right'}}>
+      <h3 class="ui header d-flex" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
+        <div>
+          {{@session.title}}
+          <div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
+            {{@session.sessionType.name}}
+          </div>
+        </div>
+        <div class="d-flex items-center ml-auto">
           {{#if @session.slidesUrl}}
             <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToSlides}}>
               <i class="icon {{if this.slidesUploaded 'download' 'linkify'}}"></i>
@@ -20,48 +25,44 @@
           {{#unless @hideSessionLink}}
             <a role="button" href="{{href-to 'public.session.view' (or @event.identifier @session.event.identifier) @session.id}}" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}}><i class="share icon"></i></a>
           {{/unless}}
-        </span>
-        <div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
-          {{@session.sessionType.name}}
         </div>
       </h3>
-      <div class="ui row">{{@session.track.name}}</div>
     </div>
     <br>
     <div class="ui grid stackable">
       {{#if this.hideImage}}
         <div class="left floated twelve wide column">
+          <div><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>
           {{/if}}
         </div>
       {{else}}
-        <div class="left floated twelve wide column">
-          <div class="ui grid stackable">
-           <div class="session-speakers">
-              {{#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}} {{#if speaker.positionOrganisation}}({{speaker.positionOrganisation}}){{/if}}
-                <br>
-              {{/each}}
-            </div>
+        <div class="left floated eleven wide column">
+          <div class="d-flex wrap">
+            {{#each @session.speakers as |speaker|}}
+              <div class="d-flex items-center speaker-card pr-2 pb-4">
+                <img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
+                <div class="ml-2">
+                  {{speaker.name}}
+                  {{#if speaker.positionOrganisation}}<div class="speaker-details">{{speaker.positionOrganisation}}</div>{{/if}}
+                </div> 
+              </div>
+            {{/each}}
           </div>
         </div>
-        <div class="right floated four wide column">
+        <div class="right floated five wide column">
+          <div><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><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
             <div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt 'date-time-tz-short' tz=@timezone}}</div>
           {{/if}}
         </div>
       {{/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/libs/_helpers.scss

@@ -78,3 +78,19 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
 .items-center {
   align-items: center;
 }
+
+.space-between {
+  justify-content: space-between;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.upper-case {
+  text-transform: uppercase;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}

app/styles/partials/overrides.scss

@@ -82,15 +82,3 @@ body.dimmable.undetached.dimmed {
   margin-left: auto !important;
   margin-top: auto !important;
 }
-
-.space-between {
-  justify-content: space-between;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.upper-case {
-  text-transform: uppercase;
-}

app/styles/partials/speaker.scss

@@ -34,3 +34,12 @@
 .featured-speaker {
   margin-bottom: 10px;
 }
+
+.speaker-card {
+  flex: 1 1 250px;
+}
+
+.speaker-details {
+  font-size: .9rem;
+  opacity: .8;
+}

app/styles/partials/utils.scss

@@ -65,6 +65,18 @@
   padding-top: 1rem !important;
 }
 
+.pr-1 {
+  padding-right: .25rem !important;
+}
+
+.pr-2 {
+  padding-right: .5rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }