Skip to content

Commit 02db3b9

Browse files
sachinchauhan2889iamareebjamalmariobehling
authored
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 <[email protected]> Co-authored-by: Mario Behling <[email protected]>
1 parent 7995611 commit 02db3b9

File tree

5 files changed

+62
-36
lines changed

5 files changed

+62
-36
lines changed

‎app/components/public/session-item.hbs‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
{{!-- template-lint-disable no-nested-interactive --}}
22
<UiAccordion class="segment p-0" style={{css background-color=@session.track.color border-color='lightgray'}}>
3-
<div class="title p-4" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
3+
<div class="title p-4 pr-1" {{action 'hideSpeakerImage'}} role="button" style={{css color=(text-color @session.track.color)}}>
44
<div class="ui">
5-
<h3 class="ui header" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
6-
{{@session.title}}
7-
<span style={{css float='right'}}>
5+
<h3 class="ui header d-flex" id="session-id-{{@session.id}}" style={{css color=(text-color @session.track.color)}}>
6+
<div>
7+
{{@session.title}}
8+
<div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
9+
{{@session.sessionType.name}}
10+
</div>
11+
</div>
12+
<div class="d-flex items-center ml-auto">
813
{{#if @session.slidesUrl}}
914
<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}}>
1015
<i class="icon {{if this.slidesUploaded 'download' 'linkify'}}"></i>
@@ -20,48 +25,44 @@
2025
{{#unless @hideSessionLink}}
2126
<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>
2227
{{/unless}}
23-
</span>
24-
<div class="sub header" style={{css color=(text-color @session.track.color) opacity=0.6}}>
25-
{{@session.sessionType.name}}
2628
</div>
2729
</h3>
28-
<div class="ui row">{{@session.track.name}}</div>
2930
</div>
3031
<br>
3132
<div class="ui grid stackable">
3233
{{#if this.hideImage}}
3334
<div class="left floated twelve wide column">
35+
<div><i class="train icon"></i>{{@session.track.name}}</div>
3436
{{#if @session.startsAt}}
3537
<div class=""><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
3638
<div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt 'D MMM, YYYY h:mm A (z)' tz=@timezone}}</div>
3739
{{/if}}
3840
</div>
3941
{{else}}
40-
<div class="left floated twelve wide column">
41-
<div class="ui grid stackable">
42-
<div class="session-speakers">
43-
{{#each @session.speakers as |speaker|}}
44-
<img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
45-
{{/each}}
46-
</div>
47-
<div class="left floated nine wide column">
48-
{{#each @session.speakers as |speaker|}}
49-
{{speaker.name}} {{#if speaker.positionOrganisation}}({{speaker.positionOrganisation}}){{/if}}
50-
<br>
51-
{{/each}}
52-
</div>
42+
<div class="left floated eleven wide column">
43+
<div class="d-flex wrap">
44+
{{#each @session.speakers as |speaker|}}
45+
<div class="d-flex items-center speaker-card pr-2 pb-4">
46+
<img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
47+
<div class="ml-2">
48+
{{speaker.name}}
49+
{{#if speaker.positionOrganisation}}<div class="speaker-details">{{speaker.positionOrganisation}}</div>{{/if}}
50+
</div>
51+
</div>
52+
{{/each}}
5353
</div>
5454
</div>
55-
<div class="right floated four wide column">
55+
<div class="right floated five wide column">
56+
<div><i class="train icon"></i>{{@session.track.name}}</div>
5657
{{#if @session.startsAt}}
57-
<div class=""><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
58+
<div><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
5859
<div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt 'date-time-tz-short' tz=@timezone}}</div>
5960
{{/if}}
6061
</div>
6162
{{/if}}
6263
</div>
6364
</div>
64-
<div class="content pt-0 p-4 rounded-t-none {{if @expanded 'active'}}" style={{css background-color='white' border-radius='0.2rem'}}>
65+
<div class="content pt-0 p-4 pr-1 rounded-t-none {{if @expanded 'active'}}" style={{css background-color='white' border-radius='0.2rem'}}>
6566
<div class="ui pt-4 row">
6667
<div class="column session-description">
6768
{{sanitize @session.shortAbstract}}

‎app/styles/libs/_helpers.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,19 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
7878
.items-center {
7979
align-items: center;
8080
}
81+
82+
.space-between {
83+
justify-content: space-between;
84+
}
85+
86+
.flex-1 {
87+
flex: 1;
88+
}
89+
90+
.upper-case {
91+
text-transform: uppercase;
92+
}
93+
94+
.no-wrap {
95+
white-space: nowrap;
96+
}

‎app/styles/partials/overrides.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,3 @@ body.dimmable.undetached.dimmed {
8282
margin-left: auto !important;
8383
margin-top: auto !important;
8484
}
85-
86-
.space-between {
87-
justify-content: space-between;
88-
}
89-
90-
.flex-1 {
91-
flex: 1;
92-
}
93-
94-
.upper-case {
95-
text-transform: uppercase;
96-
}

‎app/styles/partials/speaker.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,12 @@
3434
.featured-speaker {
3535
margin-bottom: 10px;
3636
}
37+
38+
.speaker-card {
39+
flex: 1 1 250px;
40+
}
41+
42+
.speaker-details {
43+
font-size: .9rem;
44+
opacity: .8;
45+
}

‎app/styles/partials/utils.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@
6565
padding-top: 1rem !important;
6666
}
6767

68+
.pr-1 {
69+
padding-right: .25rem !important;
70+
}
71+
72+
.pr-2 {
73+
padding-right: .5rem !important;
74+
}
75+
76+
.pb-4 {
77+
padding-bottom: 1rem !important;
78+
}
79+
6880
.mt-4 {
6981
margin-top: 1rem !important;
7082
}

0 commit comments

Comments
 (0)