Skip to content

Commit dd16829

Browse files
Program page fly out (#284)
* Program page fly out Use stimulus for the program page detail fly out. All of the program sessions are hidden, in a div off screen. On session click program session is revealed and fly out glides out. * fix close effect * add secondary font to fly-out
1 parent c9acfed commit dd16829

File tree

9 files changed

+241
-65
lines changed

9 files changed

+241
-65
lines changed
210 Bytes
Loading

app/assets/stylesheets/themes/default/footer.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
footer {
22
color: white;
3+
position: relative;
4+
z-index: 11;
5+
background-color: black;
6+
37
.overlay {
48
background-color: black;
59
opacity: 0.9;

app/assets/stylesheets/themes/default/program.scss

Lines changed: 158 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,73 @@
11
.program-page-wrapper {
2-
padding-top: 100px;
3-
42
h3.page-title {
3+
padding-top: 100px;
54
text-align: center;
65
font-size: 32px;
76
font-weight: 700;
87
line-height: 38px;
98
margin-bottom: 15px
109
}
1110

12-
.bg-track-1 { background-color: $bg-track-1 ; }
13-
.bg-track-2 { background-color: $bg-track-2 ; }
14-
.bg-track-3 { background-color: $bg-track-3 ; }
15-
.bg-track-4 { background-color: $bg-track-4 ; }
16-
.bg-track-5 { background-color: $bg-track-5 ; }
17-
.bg-track-6 { background-color: $bg-track-6 ; }
18-
.bg-track-7 { background-color: $bg-track-7 ; }
19-
.bg-track-8 { background-color: $bg-track-8 ; }
20-
.bg-track-9 { background-color: $bg-track-9 ; }
21-
.bg-track-10 { background-color: $bg-track-10 ; }
22-
.bg-track-11 { background-color: $bg-track-11 ; }
23-
.bg-track-12 { background-color: $bg-track-12 ; }
24-
.default-accent { background-color: $grey-light; }
11+
.bg-track-1 { background-color: $bg-track-1; }
12+
.bg-track-2 { background-color: $bg-track-2; }
13+
.bg-track-3 { background-color: $bg-track-3; }
14+
.bg-track-4 { background-color: $bg-track-4; }
15+
.bg-track-5 { background-color: $bg-track-5; }
16+
.bg-track-6 { background-color: $bg-track-6; }
17+
.bg-track-7 { background-color: $bg-track-7; }
18+
.bg-track-8 { background-color: $bg-track-8; }
19+
.bg-track-9 { background-color: $bg-track-9; }
20+
.bg-track-10 { background-color: $bg-track-10; }
21+
.bg-track-11 { background-color: $bg-track-11; }
22+
.bg-track-12 { background-color: $bg-track-12; }
23+
24+
.session-format-bg-1 { background-color: $session-format-tag-1;}
25+
.session-format-bg-2 { background-color: $session-format-tag-2;}
26+
.session-format-bg-3 { background-color: $session-format-tag-3;}
27+
.session-format-bg-4 { background-color: $session-format-tag-4;}
28+
.session-format-bg-5 { background-color: $session-format-tag-5;}
29+
}
30+
31+
.session-format-tag {
32+
padding: 8px 10px 8px 50px;
33+
border: 1px solid $divider-light;
34+
border-radius: 100px;
35+
font-size: 12px;
36+
margin-right: 8px;
37+
position: relative;
38+
39+
&::before {
40+
content: '';
41+
position: absolute;
42+
top: 50%;
43+
left: 26px;
44+
transform: translate(-50%, -50%);
45+
height: 12px;
46+
width: 24px;
47+
border-radius: 150px 150px 0 0;
48+
}
49+
&.session-format-tag-1::before { background-color: $session-format-tag-1;}
50+
&.session-format-tag-2::before { background-color: $session-format-tag-2;}
51+
&.session-format-tag-3::before { background-color: $session-format-tag-3;}
52+
&.session-format-tag-4::before { background-color: $session-format-tag-4;}
53+
&.session-format-tag-5::before { background-color: $session-format-tag-5;}
54+
}
55+
56+
.track-tag {
57+
font-size: 12px;
58+
padding: 7px 10px;
59+
border-radius: 20px;
60+
border: 1px solid $divider-light;
61+
62+
.track-dot{
63+
height: 16px;
64+
width: 16px;
65+
display: inline-block;
66+
position: relative;
67+
top: 3px;
68+
border-radius: 50%;
69+
margin-right: 4px;
70+
}
2571
}
2672

2773
.program-filter-pane {
@@ -130,50 +176,6 @@
130176
margin-bottom: 12px;
131177
}
132178

133-
.session-format-tag {
134-
font-family: var(--secondary-body-font);
135-
padding: 8px 10px 8px 50px;
136-
border: 1px solid $divider-light;
137-
border-radius: 100px;
138-
font-size: 12px;
139-
margin-right: 8px;
140-
position: relative;
141-
142-
&::before {
143-
content: '';
144-
position: absolute;
145-
top: 50%;
146-
left: 26px;
147-
transform: translate(-50%, -50%);
148-
height: 12px;
149-
width: 24px;
150-
border-radius: 150px 150px 0 0;
151-
}
152-
&.session-format-tag-1::before { background-color: $session-format-tag-1;}
153-
&.session-format-tag-2::before { background-color: $session-format-tag-2;}
154-
&.session-format-tag-3::before { background-color: $session-format-tag-3;}
155-
&.session-format-tag-4::before { background-color: $session-format-tag-4;}
156-
&.session-format-tag-5::before { background-color: $session-format-tag-5;}
157-
}
158-
159-
.track-tag {
160-
font-family: var(--secondary-body-font);
161-
font-size: 12px;
162-
padding: 7px 10px;
163-
border-radius: 20px;
164-
border: 1px solid $divider-light;
165-
166-
.track-dot{
167-
height: 16px;
168-
width: 16px;
169-
display: inline-block;
170-
position: relative;
171-
top: 3px;
172-
border-radius: 50%;
173-
margin-right: 4px;
174-
}
175-
}
176-
177179
.session-accent {
178180
width: 100%;
179181
height: .5rem;
@@ -184,6 +186,89 @@
184186
}
185187
}
186188

189+
.fly-out-wrapper {
190+
position: fixed;
191+
top: 0;
192+
bottom: 0;
193+
padding-top: 160px;
194+
width: 40%;
195+
height: 100%;
196+
z-index: 10;
197+
background-color: $white;
198+
border: 1px solid black;
199+
transition: all 1s;
200+
overflow: scroll;
201+
202+
203+
&.open {
204+
right: 0;
205+
206+
}
207+
208+
&.closed {
209+
right: -40%;
210+
}
211+
212+
.close-icon {
213+
position: absolute;
214+
right: 40px;
215+
top: 140px;
216+
}
217+
218+
.program-session-detail {
219+
margin: 0 40px 50px 30px;
220+
overflow: scroll;
221+
222+
.program-session-title {
223+
font-size: 21px;
224+
font-weight: 700;
225+
margin-bottom: 15px;
226+
}
227+
228+
.program-session-tags {
229+
display: flex;
230+
flex-wrap: wrap;
231+
margin-bottom: 25px;
232+
}
233+
234+
.program-session-about {
235+
border-top: 1px solid #D1D1D1;
236+
font-family: var(--secondary-body-font);
237+
padding-top: 25px;
238+
width: 100%;
239+
font-weight: 400;
240+
font-size: 16px;
241+
line-height: 25px;
242+
margin-bottom: 25px;
243+
244+
245+
span {
246+
font-family: var(--sans-serif-font);
247+
font-weight: 700;
248+
font-size: 16px;
249+
margin-bottom: 6px;
250+
display: block;
251+
}
252+
}
253+
254+
.program-session-authors {
255+
.speaker-name {
256+
font-weight: 700;
257+
font-size: 16px;
258+
margin-bottom: 6px;
259+
}
260+
261+
.speaker-bio {
262+
font-family: var(--secondary-body-font);
263+
margin-bottom: 15px;
264+
font-weight: 400;
265+
font-size: 16px;
266+
line-height: 25px;
267+
}
268+
}
269+
}
270+
}
271+
187272
@media screen and (max-width: 1200px) and (orientation: portrait),
188273
(max-width: 1123px) and (orientation: landscape) {
189274
.program-sessions-wrapper {
@@ -192,9 +277,17 @@
192277
.session {
193278
width: 40%;
194279
}
280+
281+
.fly-out-wrapper {
282+
width: 70%;
283+
&.open { right: 0 }
284+
&.closed { right: -70%; }
285+
}
195286
}
196287

197288

289+
290+
198291
@media screen and (max-width: 900px) and (orientation: portrait),
199292
(max-width: 823px) and (orientation: landscape) {
200293
.program-sessions-wrapper {
@@ -204,4 +297,10 @@
204297
.session {
205298
width: 100%;
206299
}
300+
301+
.fly-out-wrapper {
302+
width: 100%;
303+
&.open { right: 0; }
304+
&.closed { right: -100%; }
305+
}
207306
}

app/decorators/website_decorator.rb

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ def session_format_tag_class(session_format)
104104
"session-format-tag-#{session_format_num(session_format)}"
105105
end
106106

107+
def session_format_background_class(session_format)
108+
"session-format-bg-#{session_format_num(session_format)}"
109+
end
110+
107111
def session_format_name(session_format)
108112
object.session_format_configs.find_by(session_format: session_format).name
109113
end
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Controller } from 'stimulus'
2+
3+
export default class extends Controller {
4+
static targets = [ 'sidePanel', 'programSession' ]
5+
static values = { revealedElement: String }
6+
7+
updateSidePanel(e) {
8+
e.preventDefault();
9+
this.hideAll();
10+
11+
const toShow = document.getElementById(`program-session-detail-${e.target.dataset.sessionId}`);
12+
if(!!toShow) {
13+
toShow.classList.remove('hidden');
14+
this.openSidePanel();
15+
}
16+
}
17+
18+
hideAll() {
19+
this.programSessionTargets.forEach(element => {
20+
element.classList.add('hidden');
21+
})
22+
}
23+
24+
close(e) {
25+
e.preventDefault();
26+
e.stopPropagation();
27+
this.closeSidePanel();
28+
}
29+
30+
closeSidePanel() {
31+
this.sidePanelTarget.classList.remove('open');
32+
this.sidePanelTarget.classList.add('closed');
33+
}
34+
35+
openSidePanel() {
36+
this.sidePanelTarget.classList.remove('closed');
37+
this.sidePanelTarget.classList.add('open');
38+
}
39+
}

app/views/program_sessions/_program_session.html.haml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.session
22
%div.seesion-title-abstract-container
3-
%h3.session-title
4-
= program_session.title
3+
%a.session-title{ href: "#", data: { action: 'click->fly-out#updateSidePanel', 'session-id': program_session.id } }
4+
=program_session.title
55

66
.session-abstract
77
= program_session.abstract.html_safe
@@ -18,4 +18,4 @@
1818
%span.track-dot{ class: "#{current_website.track_background(program_session.track)}" }
1919
= program_session.track_name
2020

21-
.session-accent{ class: program_session.track ? "#{current_website.track_background(program_session.track)}" : "default-accent" }
21+
.session-accent{ class: program_session.track ? current_website.track_background(program_session.track) : current_website.session_format_background_class(program_session.session_format) }

app/views/programs/_detail.haml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.program-session-detail{ id: "program-session-detail-#{program_session.id}", data: { 'fly-out-target': 'programSession' } }
2+
.program-session-title
3+
= program_session.title
4+
5+
.program-session-tags
6+
%span.session-format-tag{ class: "#{current_website.session_format_tag_class(program_session.session_format)}" }
7+
= current_website.session_format_name(program_session.session_format)
8+
9+
-if program_session.track
10+
%span.track-tag
11+
%span.track-dot{ class: "#{current_website.track_background(program_session.track)}" }
12+
= program_session.track_name
13+
14+
.program-session-about
15+
%span About
16+
= program_session.abstract.html_safe
17+
18+
.program-session-authors
19+
- program_session.speakers.each do |s|
20+
.speaker-name
21+
= s.speaker_name
22+
.speaker-bio
23+
= s.bio

app/views/programs/_fly_out.html.haml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.fly-out-wrapper.closed{ data: { 'fly-out-target': 'sidePanel'} }
2+
%a{ href: "#", data: { action: 'fly-out#close' }, class: 'close-icon' }
3+
= image_tag('themes/default/close.png')
4+
- @program_sessions.each do |program_session|
5+
= render 'detail', program_session: program_session

app/views/programs/show.html.haml

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
.program-page-wrapper{ data: { 'controller': 'sub-nav', 'sub-nav-displayed-id-value': "#{current_website.default_session_slug}" } }
1+
2+
.program-page-wrapper{ data: { 'controller': 'sub-nav fly-out', 'sub-nav-displayed-id-value': "#{current_website.default_session_slug}", 'fly-out-revealed-element-value': 'inital' } }
3+
= render 'fly_out', collection: @program_sessions
24
%h3.page-title
35
Program
46
.program-filter-pane
57
= image_tag 'themes/default/open-filter.png', class: 'open-filter-icon'
68
= image_tag 'themes/default/closed-filter.png', class: 'close-filter-icon hidden '
79
%nav.sub-nav
810
%ul
9-
- current_website.displayed_session_formats.in_order.each do |session_format_config|
11+
- current_website.displayed_session_formats.in_order.each.with_index do |session_format_config, index|
1012
%li
11-
%a{ href: "#", data: { action: 'click->sub-nav#updateDisplay', displayedId: "#{session_format_config.slug}"} }
13+
%a{ href: "#", class: "#{index == 0 ? 'selected' : ''}", data: { action: 'click->sub-nav#updateDisplay', displayedId: session_format_config.slug } }
1214
= "#{session_format_config.name} (#{@program_sessions.in_session_format(session_format_config.session_format).count})"
1315

1416
- current_website.displayed_session_formats.each do |session_format_config|

0 commit comments

Comments
 (0)