Skip to content

Commit b55efc2

Browse files
themightychristhemightychris
authored
Merge pull request #210 from CodeForPhilly/features/events
Add some polish to events system
2 parents 069ab40 + f655930 commit b55efc2

File tree

9 files changed

+279
-170
lines changed

9 files changed

+279
-170
lines changed

‎html-templates/events/event.tpl

Lines changed: 146 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,35 @@
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}
@@ -42,23 +51,73 @@
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"}&nbsp;{_ "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"}&nbsp;{_ "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}"
@@ -69,85 +128,86 @@
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}

‎html-templates/events/eventEdit.tpl

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,24 @@
1212
{$Event = $data}
1313

1414
<div class="container">
15+
<div class="page-header">
16+
<ol class="breadcrumb">
17+
<li class="breadcrumb-item"><a href="/events">{_ "Events"}</a></li>
18+
<li class="breadcrumb-item"><a href="{$Event->getUrl()}">{$Event->Title|escape}</a></li>
19+
<li class="breadcrumb-item active">Edit</li>
20+
</ol>
21+
22+
<h1>
23+
{if $Event->isPhantom}
24+
{_ "Create new event"}
25+
{else}
26+
{_("Edit event")} <strong>{$Event->Title|escape}</strong>
27+
{/if}
28+
</h1>
29+
</div>
30+
1531
<div class="row">
1632
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
17-
<div class="page-header">
18-
<h1>
19-
{if $Event->isPhantom}
20-
{_ "Create new event"}
21-
{else}
22-
{_("Edit event %s")|sprintf:$Event->Title|escape}
23-
{/if}
24-
</h1>
25-
</div>
2633

2734
{if !$Event->isValid}
2835
<div class="error well">
@@ -38,12 +45,12 @@
3845
<form method="POST">
3946
<div class="form-group">
4047
<label for="field-title">{_ "Title"}:</label>
41-
<input name="Title" id="field-title" class="form-control" placeholder="{_ 'Workshop #125'}" value="{refill field=Title default=$Event->Title}" />
48+
<input name="Title" id="field-title" class="form-control form-control-lg" placeholder="{_ 'Workshop #125'}" value="{refill field=Title default=$Event->Title}" />
4249
</div>
4350
<div class="form-group">
4451
<label for="field-handle">{_ "Handle"} ({_ "optional"}):</label>
4552
<input name="Handle" id="field-handle" class="form-control" placeholder="{_ 'workshop-125'}" value="{refill field=Handle default=$Event->Handle}" />
46-
<p class="help-block">Must be unique &mdash; leave blank to auto-generate</p>
53+
<small class="form-text text-muted">Must be unique &mdash; leave blank to auto-generate</small>
4754
</div>
4855
<div class="form-group">
4956
<label for="field-status">{_ "Status"}:</label>
@@ -53,13 +60,19 @@
5360
{/foreach}
5461
</select>
5562
</div>
56-
<div class="form-group">
57-
<label for="field-time-start">{_ "Start time"}:</label>
58-
<input type="datetime-local" name="StartTime" id="field-time-start" class="form-control" value="{refill field=StartTime default=tif($Event->StartTime, date('Y-m-d\TH:i', $Event->StartTime))}"/>
59-
</div>
60-
<div class="form-group">
61-
<label for="field-time-end">{_ "End time"}:</label>
62-
<input type="datetime-local" name="EndTime" id="field-time-end" class="form-control" value="{refill field=EndTime default=tif($Event->EndTime, date('Y-m-d\TH:i', $Event->EndTime))}"/>
63+
<div class="form-row">
64+
<div class="col-md-6">
65+
<div class="form-group">
66+
<label for="field-time-start">{_ "Start time"}:</label>
67+
<input type="datetime-local" name="StartTime" id="field-time-start" class="form-control" value="{refill field=StartTime default=tif($Event->StartTime, date('Y-m-d\TH:i', $Event->StartTime))}"/>
68+
</div>
69+
</div>
70+
<div class="col-md-6">
71+
<div class="form-group">
72+
<label for="field-time-end">{_ "End time"}:</label>
73+
<input type="datetime-local" name="EndTime" id="field-time-end" class="form-control" value="{refill field=EndTime default=tif($Event->EndTime, date('Y-m-d\TH:i', $Event->EndTime))}"/>
74+
</div>
75+
</div>
6376
</div>
6477
<div class="form-group">
6578
<label for="field-location-name">{_ "Location name"}:</label>
@@ -73,7 +86,7 @@
7386
<div class="form-group">
7487
<label for="field-description">{_ 'Description(.md)'}</label>
7588
<div class="controls">
76-
<textarea name="Description" class="input-block-level" rows="10">{refill field=Description default=$Event->Description}</textarea>
89+
<textarea name="Description" class="form-control" rows="10">{refill field=Description default=$Event->Description}</textarea>
7790
</div>
7891
</div>
7992

@@ -82,4 +95,4 @@
8295
</div>
8396
</div>
8497
</div>
85-
{/block}
98+
{/block}

0 commit comments

Comments
 (0)