Some tweaks to event page display

4 files changed, 37 insertions, 15 deletions

diff --git a/public/css/style.css b/public/css/style.css
index ed755e3..3793e8f 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -140,10 +140,14 @@ body, html {
 	margin-bottom: 0.8em;
 }
 
-.eventInformation > li > .eventInformationAction {
+#copyEventLink {
 	margin-left: 5px;
 }
 
+.eventInformationAction:not(#copyEventLink) {
+	margin-top: 0.25rem;
+}
+
 .commentContainer {
 	background: #fafafa;
 	border-radius: 5px;
@@ -239,11 +243,19 @@ body, html {
     height: 2.25rem !important;
 }
 
-#removeAttendee {
+.attendee-name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: "";
+	overflow: hidden;
+	max-width: 62px;
+}
+
+.remove-attendee {
 	color: #fff;
 }
 
-#removeAttendee:hover {
+.remove-attendee:hover {
 	color: #016418;
 }
 
diff --git a/routes.js b/routes.js
index ba5750b..fde1b86 100755
--- a/routes.js
+++ b/routes.js
@@ -243,7 +243,8 @@ router.get('/:eventID', (req, res) => {
 						}
 					}
 				}
-				var metadata = {
+				let eventAttendees = event.attendees.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+				let metadata = {
 					title: event.name,
 					description: marked(event.description, { renderer: render_plain()}).split(" ").splice(0,40).join(" ").trim(),
 					image: (eventHasCoverImage ? 'https://gath.io/events/' + event.image : null),
@@ -254,6 +255,7 @@ router.get('/:eventID', (req, res) => {
 					title: event.name,
 					escapedName: escapedName,
 					eventData: event,
+					eventAttendees: eventAttendees,
 					eventStartISO: eventStartISO,
 					eventEndISO: eventEndISO,
 					parsedLocation: parsedLocation,
diff --git a/views/event.handlebars b/views/event.handlebars
index 9314c09..1b25f20 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -23,9 +23,13 @@
 				<span class="fa-li">
 					<i class="fas fa-map-marker-alt"></i>
 				</span>
-				{{eventData.location}}
-				<a href="http://maps.google.com/?q={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm">
-					<i class="fas fa-map-marker-alt"></i> Find on Google Maps
+				{{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>
 			{{#if eventHasHost}}
@@ -41,13 +45,14 @@
 					<i class="far fa-fw fa-calendar-alt"></i>
 				</span>
 				{{{displayDate}}}
-				<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">
-					<i class="far fa-calendar-plus"></i> Add to Google Calendar
-				</a>
 				<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">
+					<i class="far fa-calendar-plus"></i> Add to Google Calendar
+				</a>
 			</li>
 			{{#if eventData.url}}
 				<li>
@@ -95,17 +100,17 @@
 
 {{#if eventData.usersCanAttend}}
 <div class="card mb-4" id="eventAttendees">
-	<h5 class="card-header">Attendees {{#if eventData.attendees}}({{eventData.attendees.length}}){{/if}}
+	<h5 class="card-header">Attendees {{#if eventAttendees}}({{eventAttendees.length}}){{/if}}
 		<div class="btn-group" role="group" aria-label="Attendance controls">
 			<button type="button" id="attendEvent" class="btn btn-success" data-toggle="modal" data-target="#attendModal"><i class="fas fa-user-plus"></i> Add me</button>
 			<button type="button" id="unattendEvent" class="btn btn-secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> Remove me</button>
 		</div>
 	</h5>
 	<div class="card-body">
-		{{#if eventData.attendees}}
+		{{#if eventAttendees}}
 			<ul class="attendeesList">
-				{{#each eventData.attendees}}
-					<li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}}>{{this.name}}{{#if ../editingEnabled}}<a href="#" id="removeAttendee" data-toggle="modal" data-target="#removeAttendeeModal"><i class="fas fa-user-times"></i></a>{{/if}}</li>
+				{{#each eventAttendees}}
+					<li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}}><span class="attendee-name">{{this.name}}</span>{{#if ../editingEnabled}}<a href="#" class="remove-attendee" data-toggle="modal" data-target="#removeAttendeeModal"><i class="fas fa-user-times"></i></a>{{/if}}</li>
 				{{/each}}
 			</ul>
 		{{else}}
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index a7c4321..06bb146 100755
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -74,7 +74,10 @@
 						{{{body}}}
 					</div>
 					<div id="footerContainer">
-						<small class="text-muted"><a href="https://github.com/lowercasename/gathio">GitHub</a> &middot; Made with <i class="far fa-heart"></i> by <a href="http://raphaelkabo.com">Raphael</a> &middot; Need help? <a href="mailto:support@gath.io">Email us</a>.</small>
+						<small class="text-muted">
+							<a href="https://github.com/lowercasename/gathio">GitHub</a> &middot; Made with <i class="far fa-heart"></i> by <a href="http://raphaelkabo.com">Raphael</a> &middot; Need help? <a href="mailto:support@gath.io">Email us</a>.<br />
+							If you like gathio, you might like <strong><a href="http://sweet.sh/" style="color:#ed5e5e;">sweet</a></strong>, my utopian social network.
+						</small>
 					</div>
 				</div>
 			</div>