Some style tweaks

1 files changed, 75 insertions, 68 deletions

diff --git a/views/event.handlebars b/views/event.handlebars
index 70c4018..7a57783 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -8,85 +8,92 @@
 		<h3 id="eventName">{{eventData.name}}</h3>
 	</div>
 	{{#if editingEnabled}}
-	<div class="col-lg-2 ml-2 edit-buttons">
+	<div class="col-lg-3 ml-2 edit-buttons">
 		<div class="btn-group" role="group" aria-label="Event controls">
-			<button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i></button>
-			<button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i></button>
+			<button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i> Edit</button>
+			<button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete</button>
 		</div>
 	</div>
 	{{/if}}
 </div>
-<div class="card mt-4 mb-4">
-  <div class="card-body">
-  	<ul class="fa-ul eventInformation">
-			<li>
-				<span class="fa-li">
-					<i class="fas fa-map-marker-alt"></i>
-				</span>
-				{{eventData.location}}<br />
-				<a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
-					<i class="fas fa-map-marked"></i> Show on Google Maps
-				</a>
-				&nbsp;
-				<a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
-					<i class="fas fa-map-marked"></i> Show on OpenStreetMap
-				</a>
-			</li>
-			<li>
-				<span class="fa-li">
-					<i class="fas fa-fw fa-calendar-day"></i>
-				</span>
-				{{{displayDate}}}
-				<br>
-				<span class="text-muted">
-					{{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}}
-				</span>
-				<br />
-				<a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
+<div class="container my-4 pr-0">
+	<div class="row">
+		<div class="col-lg-9 card">
+			<div class="card-body">
+				<ul class="fa-ul eventInformation">
+					<li>
+						<span class="fa-li">
+							<i class="fas fa-map-marker-alt"></i>
+						</span>
+						{{eventData.location}}
+					</li>
+					<li>
+						<span class="fa-li">
+							<i class="fas fa-fw fa-calendar-day"></i>
+						</span>
+						{{{displayDate}}}
+						<br>
+						<span class="text-muted">
+							{{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}}
+						</span>
+					</li>
+					{{#if eventHasHost}}
+						<li>
+							<span class="fa-li">
+								<i class="fas fa-fw fa-user-circle"></i>
+							</span>
+							<span class="text-muted">Hosted by</span> {{eventData.hostName}}
+						</li>
+					{{/if}}
+					{{#if eventData.eventGroup}}
+						<li>
+							<span class="fa-li">
+								<i class="fas fa-fw fa-calendar-alt"></i>
+							</span>
+							<span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a>
+						</li>
+					{{/if}}
+					{{#if eventData.url}}
+						<li>
+							<span class="fa-li">
+								<i class="fas fa-fw fa-link"></i>
+							</span>
+							<a href="{{eventData.url}}">
+								{{eventData.url}}
+							</a>
+						</li>
+					{{/if}}
+					<li>
+						<span class="fa-li">
+							<i class="fas fa-fw fa-share-square"></i>
+						</span>
+						<a href="https://gath.io/{{eventData.id}}">gath.io/{{eventData.id}}</a>
+						<button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://gath.io/{{eventData.id}}">
+							<i class="fas fa-copy"></i> Copy
+						</button>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="col-lg-3" id="eventActions">
+			<aside class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
+				<a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="btn btn-outline-secondary btn-sm">
 					<i class="far fa-calendar-plus"></i> Add to Google Calendar
 				</a>
-				<button type="button" id="exportICS" class="eventInformationAction btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}">
+				<button type="button" id="exportICS" class="btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}">
 					<i class="fas fa-download"></i> Export as ICS
 				</button>
-			</li>
-			{{#if eventHasHost}}
-				<li>
-					<span class="fa-li">
-						<i class="fas fa-fw fa-user-circle"></i>
-					</span>
-					<span class="text-muted">Hosted by</span> {{eventData.hostName}}
-				</li>
-			{{/if}}
-			{{#if eventData.eventGroup}}
-				<li>
-					<span class="fa-li">
-						<i class="fas fa-fw fa-calendar-alt"></i>
-					</span>
-					<span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a>
-				</li>
-			{{/if}}
-			{{#if eventData.url}}
-				<li>
-					<span class="fa-li">
-						<i class="fas fa-fw fa-link"></i>
-					</span>
-					<a href="{{eventData.url}}">
-						{{eventData.url}}
-					</a>
-				</li>
-			{{/if}}
-			<li>
-				<span class="fa-li">
-					<i class="fas fa-fw fa-share-square"></i>
-				</span>
-				<a href="https://gath.io/{{eventData.id}}">gath.io/{{eventData.id}}</a>
-				<button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://gath.io/{{eventData.id}}">
-					<i class="fas fa-copy"></i> Copy
-				</button>
-			</li>
-  	</ul>
+				<a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
+					<i class="fas fa-map-marked"></i> Show on Google Maps
+				</a>
+				<a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="btn btn-outline-secondary btn-sm">
+					<i class="fas fa-map-marked"></i> Show on OpenStreetMap
+				</a>
+			</aside>
+		</div>
 	</div>
 </div>
+
 {{#if eventHasConcluded}}
 <div class="alert alert-warning mb-4" role="alert">
   This event has concluded. It can no longer be edited, and will be automatically deleted <span class="daysToDeletion"></span>.