From 80ab983d93ac079ac7fc5a7af631d08605a84377 Mon Sep 17 00:00:00 2001
From: lowercasename <raphaelkabo@gmail.com>
Date: Thu, 2 Jan 2020 21:53:23 +1100
Subject: Some style tweaks

---
 public/css/style.css   |  16 ++++--
 views/event.handlebars | 143 ++++++++++++++++++++++++++-----------------------
 2 files changed, 87 insertions(+), 72 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 4085875..e55f07a 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -115,6 +115,11 @@ body, html {
 	text-transform:capitalize;
 }
 
+#eventActions {
+	padding-left: 0;
+	margin-top: 1rem;
+}
+
 /*
 .location, .eventLink {
 	display: flex;
@@ -162,10 +167,6 @@ body, html {
 	margin-left: 5px;
 }
 
-.eventInformationAction:not(#copyEventLink) {
-	margin-top: 0.25rem;
-}
-
 .commentContainer {
 	background: #fafafa;
 	border-radius: 5px;
@@ -308,6 +309,13 @@ body, html {
 	}
 }
 
+@media (min-width: 1120px) {
+	#eventActions {
+		margin-top: 0;
+		padding-left: 1rem;
+	}
+}
+
 @media (min-width: 577px) {
 	#sidebar {
 		border-right: 2px solid #e0e0e0;
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>.
-- 
cgit v1.2.3