Skip to content
This repository was archived by the owner on Apr 2, 2022. It is now read-only.

Commit a83cc32

Browse files
author
Scott K
committed
Re-laid out event detail page. Added raw JSON for each event.
1 parent 214646e commit a83cc32

File tree

2 files changed

+101
-54
lines changed

2 files changed

+101
-54
lines changed

‎app/assets/javascripts/templates/event.handlebars

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{{#with model}}
2+
<div class="event-details">
23
<span class="outer-text">
34
<h1>Event Details</h1>
45
{{#if event}}
@@ -12,7 +13,7 @@
1213
<div class="panel-heading">
1314
Event Information
1415
</div>
15-
<div class="panel-body" id="event-info-body" style="overflow:hidden">
16+
<div class="panel-body" id="event-info-body">
1617
{{#if timestamp}}
1718
<p><b>Time:</b></p>
1819
<ul><li>{{format-date timestamp}}</li></ul>
@@ -128,27 +129,44 @@
128129
{{/with}}
129130

130131

131-
<div class="panel panel-info related-events" style="margin-top: 25px;">
132-
<div class="panel-heading">
133-
Related Events
134-
</div>
135-
<div class="panel-body">
136-
Related events are determined by the sg_message_id field of the message.
132+
<div class="panel panel-info related-events" style="margin-top: 25px;">
133+
<div class="panel-heading">
134+
Related Events
135+
</div>
136+
<div class="panel-body">
137+
Related events are determined by the sg_message_id field of the message.
138+
</div>
139+
<div class="list-group" style="overflow-y: auto;" id="related-group">
140+
{{#if related.length}}
141+
{{#each event in related}}
142+
{{#link-to 'event' event tagName="span" class="list-group-item"}}
143+
<h3>{{event-title event=event.event}}&nbsp;<small style="display:none;">Currently Selected</small></h3>
144+
<p>{{format-date event.timestamp}}</p>
145+
{{/link-to}}
146+
{{/each}}
147+
{{else}}
148+
<span class="list-group-item">
149+
<h3 style="font-size: 18px; margin-top: 1em; margin-bottom: 1em;">
150+
No related events found.
151+
</h3>
152+
</span>
153+
{{/if}}
154+
</div>
137155
</div>
138-
<div class="list-group" style="overflow-y: auto;" id="related-group">
139-
{{#if related.length}}
140-
{{#each event in related}}
141-
{{#link-to 'event' event tagName="span" class="list-group-item"}}
142-
<h3>{{event-title event=event.event}}&nbsp;<small style="display:none;">Currently Selected</small></h3>
143-
<p>{{format-date event.timestamp}}</p>
144-
{{/link-to}}
145-
{{/each}}
146-
{{else}}
147-
<span class="list-group-item">
148-
<h3 style="font-size: 18px; margin-top: 1em; margin-bottom: 1em;">
149-
No related events found.
150-
</h3>
151-
</span>
152-
{{/if}}
156+
157+
<div class="panel panel-info raw-json" style="margin-top: 25px;">
158+
<div class="panel-heading">
159+
Raw JSON
160+
</div>
161+
<div class="panel-body">
162+
Below is the raw JSON POST sent from SendGrid's Event Notification app.
163+
</div>
164+
<div class="list-group">
165+
<pre>
166+
<code>
167+
{{model.raw}}
168+
</code>
169+
</pre>
170+
</div>
153171
</div>
154-
</div>
172+
</div>

‎app/assets/stylesheets/partials/_event.scss

Lines changed: 60 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,75 @@
11
.content {
2-
$panel-top: 130px;
2+
.event-details {
3+
$panel-top: 130px;
4+
$panel-height: 440px;
35

4-
.event-info {
5-
width: ($content-width / 2) - ($dashboard-panel-padding / 2);
6-
@include position(absolute, $panel-top null null 0px);
7-
}
6+
height: $panel-top + ($panel-height * 2);
87

9-
.related-events {
10-
width: ($content-width / 2) - ($dashboard-panel-padding / 2);
11-
@include position(absolute, $panel-top 0px null null);
8+
.event-info {
9+
width: ($content-width / 2) - ($dashboard-panel-padding / 2);
10+
height: $panel-height;
11+
overflow: hidden;
12+
@include position(absolute, $panel-top null null 0px);
1213

13-
span.list-group-item {
14-
cursor: pointer;
14+
.panel-body {
15+
@include position(absolute, 42px 0px 0px 0px);
16+
overflow: auto;
17+
}
1518
}
1619

17-
span.list-group-item:hover {
18-
background: #EFEFEF;
19-
cursor: pointer;
20+
.raw-json {
21+
width: $content-width;
22+
margin-bottom: 100px;
23+
@include position(absolute, ($panel-top + $dashboard-panel-padding + $panel-height) 0px null null);
24+
25+
.list-group {
26+
padding: $dashboard-panel-padding;
27+
}
2028
}
2129

22-
span.active {
23-
background: #FFFFFF !important;
24-
border-color: #DDDDDD;
25-
color: black;
26-
cursor: auto !important;
30+
.related-events {
31+
width: ($content-width / 2) - ($dashboard-panel-padding / 2);
32+
height: $panel-height;
33+
overflow: hidden;
34+
@include position(absolute, $panel-top 0px null null);
2735

28-
small {
29-
display: block !important;
30-
float: right;
36+
.list-group {
37+
@include position(absolute, 110px 0px 0px 0px);
38+
overflow-y: auto;
39+
border-top: 1px solid #DDDDDD;
3140
}
32-
}
3341

34-
h3 {
35-
font-size: 18px;
36-
margin: 0px;
37-
}
42+
span.list-group-item {
43+
cursor: pointer;
44+
}
45+
46+
span.list-group-item:hover {
47+
background: #EFEFEF;
48+
cursor: pointer;
49+
}
50+
51+
span.active {
52+
background: #FFFFFF !important;
53+
border-color: #DDDDDD;
54+
color: black;
55+
cursor: auto !important;
56+
57+
small {
58+
display: block !important;
59+
float: right;
60+
}
61+
}
3862

39-
p {
40-
font-size: 10px;
41-
margin: 0px;
42-
color: #AAA;
63+
h3 {
64+
font-size: 18px;
65+
margin: 0px;
66+
}
67+
68+
p {
69+
font-size: 10px;
70+
margin: 0px;
71+
color: #AAA;
72+
}
4373
}
4474
}
45-
4675
}

0 commit comments

Comments
 (0)