From 4c5d393b9dac70b9b6ab19ffde9f28491d7992c9 Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Sat, 28 Nov 2020 15:42:21 +0530
Subject: [PATCH 1/8] enhance-session-card

---
 app/components/public/session-item.hbs | 17 ++++++-----------
 app/styles/partials/speaker.scss       |  5 +++++
 app/styles/partials/utils.scss         |  8 ++++++++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs
index bd39feab0ef..a8819de7cec 100644
--- a/app/components/public/session-item.hbs
+++ b/app/components/public/session-item.hbs
@@ -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,17 @@
         </div>
       {{else}}
         <div class="left floated twelve wide column">
-          <div class="ui grid stackable">
-           <div class="session-speakers">
+          <div class="speaker-card">
               {{#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')}}">
+                <div class="pr-4 pb-2">
+                  <img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
+                  {{speaker.name}} ({{speaker.position}}, {{speaker.organisation}})
+                </div>  
              {{/each}}
-           </div>
-           <div class="left floated nine wide column">
-             {{#each @session.speakers as |speaker|}}
-                {{speaker.name}} ({{speaker.position}}, {{speaker.organisation}})
-                <br>
-              {{/each}}
-            </div>
           </div>
         </div>
         <div class="right floated four 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>
diff --git a/app/styles/partials/speaker.scss b/app/styles/partials/speaker.scss
index b8331b9a27e..d1ac1f7c0ab 100644
--- a/app/styles/partials/speaker.scss
+++ b/app/styles/partials/speaker.scss
@@ -34,3 +34,8 @@
 .featured-speaker {
   margin-bottom: 10px;
 }
+
+.speaker-card {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index eb3e26e61c2..f0975e12f36 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -65,6 +65,14 @@
   padding-top: 1rem !important;
 }
 
+.pr-4 {
+  padding-right: 1rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }

From 80a1fcbd5f4128a3aaee2fa23b660cf3e6a4a0a3 Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Sat, 28 Nov 2020 18:28:23 +0530
Subject: [PATCH 2/8] fix-utils

---
 app/styles/partials/utils.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index f0975e12f36..77d842e9145 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -70,7 +70,7 @@
 }
 
 .pb-2 {
-  padding-bottom: 0.5rem !important;
+  padding-bottom: .5rem !important;
 }
 
 .mt-4 {

From c113e6c5b3fb552a8bf02726e5fec306e2323710 Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Sat, 28 Nov 2020 19:31:37 +0530
Subject: [PATCH 3/8] redesign

---
 app/components/public/session-item.hbs | 18 +++++++++++-------
 app/styles/partials/utils.scss         |  4 ++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs
index a8819de7cec..799f9906e5a 100644
--- a/app/components/public/session-item.hbs
+++ b/app/components/public/session-item.hbs
@@ -1,6 +1,6 @@
 {{!-- 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}}
@@ -33,15 +33,19 @@
         <div class="left floated twelve wide column">
           <div class="speaker-card">
               {{#each @session.speakers as |speaker|}}
-                <div class="pr-4 pb-2">
+                <div class="d-flex pr-4 pb-2">
                   <img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
-                  {{speaker.name}} ({{speaker.position}}, {{speaker.organisation}})
-                </div>  
-             {{/each}}
+                  <div class="">
+                    {{speaker.name}}
+                    <br/>
+                    <div style="font-size: 75%;">({{speaker.position}}, {{speaker.organisation}})</div>
+                  </div> 
+                </div>
+              {{/each}}
           </div>
         </div>
         <div class="right floated four wide column">
-          <div><i class="train icon"></i>{{@session.track.name}}</div>
+          <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>
@@ -50,7 +54,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}}
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index 77d842e9145..a0d0f79f1e9 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -69,6 +69,10 @@
   padding-right: 1rem !important;
 }
 
+.pr-1 {
+  padding-right: .25rem !important;
+}
+
 .pb-2 {
   padding-bottom: .5rem !important;
 }

From 5fd13908d62357587a84ffe0a23bf76bbade9e23 Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Sun, 29 Nov 2020 23:59:45 +0530
Subject: [PATCH 4/8] apply-max-width

---
 app/components/public/session-item.hbs | 11 +++++------
 app/styles/partials/speaker.scss       | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs
index 799f9906e5a..7f57959b2df 100644
--- a/app/components/public/session-item.hbs
+++ b/app/components/public/session-item.hbs
@@ -31,14 +31,13 @@
         </div>
       {{else}}
         <div class="left floated twelve wide column">
-          <div class="speaker-card">
+          <div class="speaker-flex">
               {{#each @session.speakers as |speaker|}}
-                <div class="d-flex pr-4 pb-2">
-                  <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="">
+                <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}}
-                    <br/>
-                    <div style="font-size: 75%;">({{speaker.position}}, {{speaker.organisation}})</div>
+                    <div class="speaker-details">{{speaker.position}}, {{speaker.organisation}}</div>
                   </div> 
                 </div>
               {{/each}}
diff --git a/app/styles/partials/speaker.scss b/app/styles/partials/speaker.scss
index d1ac1f7c0ab..c5f98f33cf4 100644
--- a/app/styles/partials/speaker.scss
+++ b/app/styles/partials/speaker.scss
@@ -35,7 +35,19 @@
   margin-bottom: 10px;
 }
 
-.speaker-card {
+.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;
+}

From 071d959b97b6c69fd40f36469b2491f2dec8caaa Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Mon, 30 Nov 2020 00:02:23 +0530
Subject: [PATCH 5/8] code-cleanup

---
 app/styles/partials/utils.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index a0d0f79f1e9..ff6ed4e06c7 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -65,18 +65,10 @@
   padding-top: 1rem !important;
 }
 
-.pr-4 {
-  padding-right: 1rem !important;
-}
-
 .pr-1 {
   padding-right: .25rem !important;
 }
 
-.pb-2 {
-  padding-bottom: .5rem !important;
-}
-
 .mt-4 {
   margin-top: 1rem !important;
 }

From 6b96ef888f6607a5e27f839f4c96e36246400510 Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Tue, 1 Dec 2020 13:11:12 +0530
Subject: [PATCH 6/8] align-icon

---
 app/components/public/session-item.hbs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs
index 0a81de99887..e415c553fd3 100644
--- a/app/components/public/session-item.hbs
+++ b/app/components/public/session-item.hbs
@@ -53,8 +53,8 @@
         <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>
+            <div class="d-flex"><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
+            <div class="d-flex"><i class="wait icon"></i>{{general-date @session.startsAt 'D MMM, YYYY h:mm A (z)' tz=@timezone}}</div>
           {{/if}}
         </div>
       {{/if}}

From 7a96deeec19981654d05123ed33273a070e8a793 Mon Sep 17 00:00:00 2001
From: Schin Chauhan <sachinchauhan2889@gmail.com>
Date: Tue, 1 Dec 2020 16:40:53 +0530
Subject: [PATCH 7/8] line-break-in-title

---
 app/components/public/session-item.hbs | 34 +++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs
index e415c553fd3..1fe39620022 100644
--- a/app/components/public/session-item.hbs
+++ b/app/components/public/session-item.hbs
@@ -2,27 +2,33 @@
 <UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}}>
   <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 space-between" 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">
           {{#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>
-              {{if this.slidesUploaded (t 'Download Slides') (t 'Link to Slides')}}
-            </button>
+            <div style="white-space: nowrap;">
+              <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>
+                {{if this.slidesUploaded (t 'Download Slides') (t 'Link to Slides')}}
+              </button>
+            </div>
           {{/if}}
           {{#if @session.microlocation.hasVideoStream}}
-            <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToStream}}>
-              <i class="icon video"></i>
-              {{t 'Join Video'}}
-            </button>
+            <div style="white-space: nowrap;">
+              <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToStream}}>
+                <i class="icon video"></i>
+                {{t 'Join Video'}}
+              </button>
+            </div>
           {{/if}}
           {{#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>

From c4c2661370a29f9fd170a773acd29eb2a01b1252 Mon Sep 17 00:00:00 2001
From: Areeb Jamal <jamal.areeb@gmail.com>
Date: Fri, 4 Dec 2020 07:05:52 +0530
Subject: [PATCH 8/8] fix

---
 app/components/public/session-item.hbs | 54 ++++++++++++--------------
 app/styles/libs/_helpers.scss          | 16 ++++++++
 app/styles/partials/overrides.scss     | 12 ------
 app/styles/partials/speaker.scss       | 10 +----
 app/styles/partials/utils.scss         |  8 ++++
 5 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/app/components/public/session-item.hbs b/app/components/public/session-item.hbs
index b7d0c1d56e1..d99f44a9600 100644
--- a/app/components/public/session-item.hbs
+++ b/app/components/public/session-item.hbs
@@ -2,29 +2,25 @@
 <UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}}>
   <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 d-flex space-between" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
+      <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">
+        <div class="d-flex items-center ml-auto">
           {{#if @session.slidesUrl}}
-            <div style="white-space: nowrap;">
-              <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>
-                {{if this.slidesUploaded (t 'Download Slides') (t 'Link to Slides')}}
-              </button>
-            </div>
+            <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>
+              {{if this.slidesUploaded (t 'Download Slides') (t 'Link to Slides')}}
+            </button>
           {{/if}}
           {{#if @session.microlocation.hasVideoStream}}
-            <div style="white-space: nowrap;">
-              <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToStream}}>
-                <i class="icon video"></i>
-                {{t 'Join Video'}}
-              </button>
-            </div>
+            <button class="ui basic {{text-color @session.track.color 'basic' 'inverted'}} button" style={{css color=(text-color @session.track.color 'grey' 'lightgrey')}} {{action this.goToStream}}>
+              <i class="icon video"></i>
+              {{t 'Join Video'}}
+            </button>
           {{/if}}
           {{#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>
@@ -36,30 +32,30 @@
     <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="speaker-flex">
-              {{#each @session.speakers as |speaker|}}
-                <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}}
-                    {{#if speaker.positionOrganisation}}<div class="speaker-details">({{speaker.positionOrganisation}})</div>{{/if}}
-                  </div> 
-                </div>
-
-              {{/each}}
+        <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="d-flex"><i class="train icon"></i>{{@session.track.name}}</div>
+        <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>
diff --git a/app/styles/libs/_helpers.scss b/app/styles/libs/_helpers.scss
index de4c98df21c..e6b1dcda93e 100644
--- a/app/styles/libs/_helpers.scss
+++ b/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;
+}
diff --git a/app/styles/partials/overrides.scss b/app/styles/partials/overrides.scss
index 77ce4d4d115..8798e1cc22c 100644
--- a/app/styles/partials/overrides.scss
+++ b/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;
-}
diff --git a/app/styles/partials/speaker.scss b/app/styles/partials/speaker.scss
index c5f98f33cf4..39c779c5eb7 100644
--- a/app/styles/partials/speaker.scss
+++ b/app/styles/partials/speaker.scss
@@ -35,16 +35,8 @@
   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;
+  flex: 1 1 250px;
 }
 
 .speaker-details {
diff --git a/app/styles/partials/utils.scss b/app/styles/partials/utils.scss
index 99ad401d316..724694785f4 100644
--- a/app/styles/partials/utils.scss
+++ b/app/styles/partials/utils.scss
@@ -69,6 +69,14 @@
   padding-right: .25rem !important;
 }
 
+.pr-2 {
+  padding-right: .5rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }