1313 .event-details dt {
1414 font-size: 130% ;
1515 }
16+
1617 .event-details dd {
1718 margin-bottom: 1em;
1819 }
1920
20- .event-segments h4 {
21- margin-top: 0;
21+ .event-segment__day-of-week {
22+ font-variant-caps: all-small-caps;
23+ font-weight: bold;
24+ margin-right: .25em;
2225 }
23- .event-segments dl {
24- margin-bottom: 0;
26+
27+ .event-segment__location {
28+ font-size: smaller;
2529 }
26- .event-segments dd {
27- margin-bottom: 0.5em;
30+
31+ .event-segment__time {
32+ color: black;
33+ font-variant-numeric: oldstyle-nums;
2834 }
29- .event-segments .event-location {
30- display: block ;
31- margin-top: 1em;
32- margin-bottom: 1em;
35+
36+ .event-segment__summary p {
37+ margin: 0;
3338 }
34- .event-segments .event-location dt {
35- font-size: 200% ;
39+
40+ .event-segment__title {
41+ font-size: 1rem;
42+ font-weight: normal;
43+ line-height: inherit;
44+ margin: 0;
3645 }
3746 </style >
3847{ /block }
4251
4352 <div class =" page-header" >
4453 <ol class =" breadcrumb" >
45- <li ><a href =" /events" >{ _ " Events" } </a ></li >
46- <li >{ tif $Event -> EndTime > $.now ? ' Upcoming' : ' Past' } </li >
54+ <li class = " breadcrumb-item " ><a href =" /events" >{ _ " Events" } </a ></li >
55+ <li class = " breadcrumb-item active " >{ tif $Event -> EndTime > $.now ? ' Upcoming' : ' Past' } </li >
4756 </ol >
48- < div class = " btn-toolbar pull-right " >
49- { if $.User }
50- <a class =" btn btn-success " href =" { $Event -> getUrl (edit)} " >{ icon " pencil" }   ; { _ " Edit Event" } </a >
51- < a class = " btn btn-success " href = " { $ Event -> getUrl ( ' segments/*create ' ) } " > { icon " plus " } & nbsp ; { _ " Add Segment " } </ a >
52- { /if }
53- </ div >
57+ { if $.User }
58+ < div class = " btn-toolbar pull-right mt-1 " >
59+ <a class =" btn btn-secondary " href =" { $Event -> getUrl (edit)} " >{ icon " pencil" }   ; { _ " Edit Event" } </a >
60+ </ div >
61+ { /if }
62+
5463 <h1 >{ $Event -> Title |escape } </h1 >
64+
65+ <dl class =" event-details row" >
66+ { if $Event -> Status != ' published' }
67+ <div class =" col-md-2" >
68+ <dt >Status</dt >
69+ <dd >{ $Event -> Status } </dd >
70+ </div >
71+ { /if }
72+
73+ <div class =" col-md-2" >
74+ <dt >Starts</dt >
75+ <dd >{ timestamp $Event -> StartTime time= ' auto' } </dd >
76+ </div >
77+
78+ { if $Event -> EndTime }
79+ <div class =" col-md-2" >
80+ <dt >Ends</dt >
81+ <dd >{ timestamp $Event -> EndTime time= ' auto' } </dd >
82+ </div >
83+ { /if }
84+
85+ { if $Event -> LocationName || $Event -> LocationAddress }
86+ <div class =" col-md-2" >
87+ <dt >Location</dt >
88+ <dd class =" d-flex my-2 align-items-baseline" >
89+ <div class =" text-danger mr-2" >{ icon " map-marker" fa-fw} </div >
90+ <div class =" flex-fill event-segment__location" >{ eventLocation name= $Segment -> LocationName
91+ address= $Segment -> LocationAddress
92+ linkCls= ' text-secondary' }
93+ </div >
94+ </dd >
95+ </div >
96+ { /if }
97+
98+ { *if $Event->Segments}
99+ <dt>Schedule</dt>
100+ <dd>
101+ <ol class="list-unstyled">
102+ {foreach item=Segment from=$Event->Segments}
103+ {$thisDate = date("l, M j", $Segment->StartTime)}
104+ {if $lastDate != $thisDate}
105+ <li><a href="#{$Segment->StartTime}">{$thisDate}</a></li>
106+ {$lastDate = $thisDate}
107+ {/if}
108+ {/foreach}
109+ </ol>
110+ </dd>
111+ {/if*}
112+ </dl >
55113 </div >
56114
57115 <div class =" row" >
58- <div class =" col-md-9" >
59- { if $Event -> Description }
116+ { if $Event -> Description }
117+ <div class =" col-md-7" >
118+ <a href =" #schedule" class =" d-inline-block d-md-none mb-3" >See the schedule { icon " level-down" } </a >
60119 <div
61- class =" content-markdown event-description well content-editable"
120+ class =" content-markdown event-description content-editable"
62121 { if $.User-> hasAccountLevel (' Staff' )}
63122 data-content-endpoint =" /events"
64123 data-content-id =" { $Event -> Handle } "
69128 >
70129 { $Event -> Description |escape |markdown}
71130 </div >
72- { /if }
131+ </div >
132+ { /if }
73133
74- { if $Event -> Segments }
134+ { if $Event -> Segments }
135+ <div id =" schedule" class =" col-md-5 col-lg-4 offset-lg-1 pt-5 pt-md-0" >
75136 <section class =" event-segments" >
76- <h2 >Schedule</h2 >
137+ <h2 class = " h4 " >Schedule</h2 >
77138
78139 { $lastDate = null}
79140 { $lastLocationName = null}
80141 { $lastLocationAddress = null}
81142
82- { foreach item= Segment from= $Event -> Segments }
83- { $thisDate = date(" l, F jS" , $Segment -> StartTime )}
143+ <ol class =" list-unstyled" >
144+ { foreach item= Segment from= $Event -> Segments }
145+ <li class =" event-segment my-3" id =" { unique_dom_id} { $Segment -> Handle } { /unique_dom_id} " >
146+ { $thisDate = date(" l, F jS" , $Segment -> StartTime )}
147+
148+ { if $lastDate != $thisDate }
149+ <h3 class =" h5 font-weight-normal" id =" { date(" Y-m-d" , $Segment -> StartTime )} " >
150+ <span class =" event-segment__day-of-week" >{ date(" l" , $Segment -> StartTime )} ,</span >
151+ { date(" F jS" , $Segment -> StartTime )}
152+ </h3 >
153+
154+ { $lastDate = $thisDate }
155+ { $lastLocationName = null}
156+ { $lastLocationAddress = null}
157+ { /if }
84158
85- { if $lastDate != $thisDate }
86- { if $lastDate }
87- </dl >
88- { /if }
89- <h3 >{ $thisDate } </h3 >
90- <dl class =" dl-horizontal" >
91- { $lastDate = $thisDate }
92- { $lastLocationName = null}
93- { $lastLocationAddress = null}
94- { /if }
95159 { if
96160 (
97161 $Segment -> LocationName != $lastLocationName
98162 || $Segment -> LocationAddress != $lastLocationAddress
99163 )
100164 && ($Segment -> LocationName || $Segment -> LocationAddress )
101165 }
102- <div class =" event-location" >
103- <dt >{ icon " map-marker" } </dt >
104- <dd >{ eventLocation name= $Segment -> LocationName address= $Segment -> LocationAddress } </dd >
166+ <div class =" d-flex my-2 align-items-baseline" >
167+ <div class =" text-danger mr-2" >{ icon " map-marker" fa-fw} </div >
168+ <div class =" flex-fill event-segment__location" >{ eventLocation name= $Segment -> LocationName
169+ address= $Segment -> LocationAddress
170+ linkCls= ' text-secondary' }
171+ </div >
105172 </div >
106173 { /if }
107- <dt >{ time_range $Segment -> StartTime $Segment -> EndTime } </dt >
108- <dd >
109- <h4 ><a href =" { $Segment -> getUrl ()} " >{ $Segment -> Title |escape } </a ></h4 >
110- { if $Segment -> Description }
111- <div
112- class =" content-markdown event-segment-description content-editable"
113- { if $.User-> hasAccountLevel (' Staff' )}
114- data-content-endpoint =" { $Event -> getUrl (segments)} "
115- data-content-id =" { $Segment -> Handle } "
116- data-content-field =" Description"
117- data-content-value =" { $Segment -> Description |escape } "
118- data-content-renderer =" markdown"
119- { /if }
120- >
121- { $Segment -> Description |escape |markdown}
122- </div >
123- { /if }
124- </dd >
125174
126- { $lastLocationName = $Segment -> LocationName }
127- { $lastLocationAddress = $Segment -> LocationAddress }
128- { /foreach }
129- </foreach >
130- { /if }
131- </div >
132-
133- <dl class =" event-details col-md-3" >
134- { if $Event -> Status != ' published' }
135- <dt >Status</dt >
136- <dd >{ $Event -> Status } </dd >
137- { /if }
138-
139- <dt >Starts</dt >
140- <dd >{ timestamp $Event -> StartTime time= ' auto' } </dd >
141-
142- { if $Event -> EndTime }
143- <dt >Ends</dt >
144- <dd >{ timestamp $Event -> EndTime time= ' auto' } </dd >
145- { /if }
146-
147- { if $Event -> LocationName || $Event -> LocationAddress }
148- <dt >Location</dt >
149- <dd >{ eventLocation name= $Event -> LocationName address= $Event -> LocationAddress } </dd >
150- { /if }
151- </dl >
175+ <div class =" d-flex align-items-baseline" >
176+ <div class =" mr-2" >{ icon " clock-o" fa-fw} </div >
177+ <div class =" flex-fill" >
178+ <div class =" event-segment__time" >{ time_range $Segment -> StartTime $Segment -> EndTime } </div >
179+
180+ <h4 class =" event-segment__title" >
181+ <a class =" text-info" href =" { $Segment -> getUrl ()} " >
182+ { $Segment -> Title |escape }
183+ { if $Segment -> Description } { icon " angle-right" ml-1} { /if }
184+ </a >
185+ </h4 >
186+
187+ { if $Segment -> Summary }
188+ <div
189+ class =" content-markdown event-segment__summary content-editable text-secondary"
190+ { if $.User-> hasAccountLevel (' Staff' )}
191+ data-content-endpoint =" { $Event -> getUrl (segments)} "
192+ data-content-id =" { $Segment -> Handle } "
193+ data-content-field =" Summary"
194+ data-content-value =" { $Segment -> Summary |escape } "
195+ data-content-renderer =" markdown"
196+ { /if }
197+ >
198+ { $Segment -> Summary |escape |markdown}
199+ </div >
200+ { /if }
201+ </div >
202+ </div >
203+
204+ { $lastLocationName = $Segment -> LocationName }
205+ { $lastLocationAddress = $Segment -> LocationAddress }
206+ </li >
207+ { /foreach }
208+ </ol >
209+ </section >
210+ </div >
211+ { /if }
152212 </div >
153- { /block }
213+ { /block }
0 commit comments