Included createdBy/createdAt in news items and other minor tweaks

frontend/src/App.vue

@@ -1090,6 +1090,8 @@ h4.section-title {
 	font-family: "Karla";
 	border-radius: 5px;
 	padding: 20px;
+	border: unset !important;
+	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 
 	* {
 		font-family: Karla, Arial, sans-serif;

frontend/src/components/modals/EditNews.vue

@@ -38,6 +38,18 @@
 				type="save-and-close"
 				@clicked="newsId ? update(true) : create(true)"
 			/>
+			<div class="right">
+				<span v-if="createdBy">
+					By
+					<user-id-to-username
+						:user-id="createdBy"
+						:alt="createdBy"
+						:link="true"
+					/>
+					@
+				</span>
+				{{ formatDate(createdAt) }}
+			</div>
 		</div>
 	</modal>
 </template>
@@ -46,20 +58,25 @@
 import { mapActions, mapGetters, mapState } from "vuex";
 import marked from "marked";
 import Toast from "toasters";
+import { format } from "date-fns";
 
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import SaveButton from "../SaveButton.vue";
 import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal, SaveButton },
+	components: { Modal, SaveButton, UserIdToUsername },
 	props: {
 		newsId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }
 	},
 	data() {
 		return {
-			markdown: "# Example\n## Subheading goes here",
-			status: "published"
+			markdown:
+				"# Header\n ## Sub-Header\n- **So**\n- _Many_\n- ~Points~\n\nOther things you want to say and [link](https://example.com).\n\n### Sub-Sub-Header\n> Oh look, a quote!\n\n`lil code`\n\n```\nbig code\n```\n",
+			status: "published",
+			createdBy: null,
+			createdAt: 0
 		};
 	},
 	computed: {
@@ -81,9 +98,16 @@ export default {
 		if (this.newsId) {
 			this.socket.dispatch(`news.getNewsFromId`, this.newsId, res => {
 				if (res.status === "success") {
-					const { markdown, status } = res.data.news;
+					const {
+						markdown,
+						status,
+						createdBy,
+						createdAt
+					} = res.data.news;
 					this.markdown = markdown;
 					this.status = status;
+					this.createdBy = createdBy;
+					this.createdAt = createdAt;
 				} else {
 					new Toast("News with that ID not found.");
 					this.closeModal("editNews");
@@ -158,6 +182,9 @@ export default {
 				}
 			);
 		},
+		formatDate: unix => {
+			return format(unix, "HH:ii:ss dd-MM-yyyy");
+		},
 		...mapActions("modalVisibility", ["closeModal"]),
 		...mapActions("modals/editNews", [
 			"editNews",
@@ -172,6 +199,9 @@ export default {
 .edit-news-modal {
 	.modal-card {
 		width: 1300px;
+		.modal-card-foot .right {
+			margin: auto 0 auto auto !important;
+		}
 	}
 }
 </style>

frontend/src/components/modals/ManageStation/index.vue

@@ -147,6 +147,16 @@
 			</div>
 		</template>
 		<template #footer>
+			<router-link
+				v-if="sector !== 'station'"
+				:to="{
+					name: 'station',
+					params: { id: station.name }
+				}"
+				class="button is-primary"
+			>
+				Go To Station
+			</router-link>
 			<a
 				class="button is-default"
 				v-if="isOwnerOrAdmin() && !station.partyMode"

frontend/src/components/modals/WhatIsNew.vue

@@ -1,25 +1,38 @@
 <template>
 	<div v-if="news !== null">
-		<modal :title="`News posted ${timeCreated}`">
+		<modal title="News">
 			<div slot="body">
 				<div
 					class="section news-item"
 					v-html="marked(news.markdown)"
 				></div>
 			</div>
+			<div slot="footer">
+				<span v-if="news.createdBy">
+					By
+					<user-id-to-username
+						:user-id="news.createdBy"
+						:alt="news.createdBy"
+						:link="true"
+					/>
+					@
+				</span>
+				{{ formatDate(news.createdAt) }}
+			</div>
 		</modal>
 	</div>
 </template>
 
 <script>
-import { formatDistance } from "date-fns";
+import { format } from "date-fns";
 import marked from "marked";
 import { mapGetters, mapActions } from "vuex";
 
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal },
+	components: { Modal, UserIdToUsername },
 	data() {
 		return {
 			isModalActive: false,
@@ -29,12 +42,7 @@ export default {
 	computed: {
 		...mapGetters({
 			socket: "websockets/getSocket"
-		}),
-		timeCreated() {
-			return formatDistance(this.news.createdAt, new Date(), {
-				addSuffix: true
-			});
-		}
+		})
 	},
 	mounted() {
 		marked.use({
@@ -77,6 +85,9 @@ export default {
 	},
 	methods: {
 		marked,
+		formatDate: unix => {
+			return format(unix, "HH:ii:ss dd-MM-yyyy");
+		},
 		...mapActions("modalVisibility", ["openModal"])
 	}
 };
@@ -106,6 +117,10 @@ export default {
 	font-size: 14px;
 }
 
+.news-item {
+	box-shadow: unset !important;
+}
+
 .delete {
 	background: transparent;
 	&:hover {

frontend/src/pages/News.vue

@@ -3,12 +3,20 @@
 		<metadata title="News" />
 		<main-header />
 		<div class="container">
-			<div
-				v-for="item in news"
-				:key="item._id"
-				class="section news-item"
-				v-html="marked(item.markdown)"
-			></div>
+			<h1 class="has-text-centered">News</h1>
+			<div v-for="item in news" :key="item._id" class="section news-item">
+				<div v-html="marked(item.markdown)"></div>
+				<div class="info">
+					<hr />
+					By
+					<user-id-to-username
+						:user-id="item.createdBy"
+						:alt="item.createdBy"
+						:link="true"
+					/>
+					@ {{ formatDate(item.createdAt) }}
+				</div>
+			</div>
 			<h3 v-if="news.length === 0" class="has-text-centered page-title">
 				No news items were found.
 			</h3>
@@ -24,9 +32,10 @@ import marked from "marked";
 
 import MainHeader from "@/components/layout/MainHeader.vue";
 import MainFooter from "@/components/layout/MainFooter.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
-	components: { MainHeader, MainFooter },
+	components: { MainHeader, MainFooter, UserIdToUsername },
 	data() {
 		return {
 			news: []
@@ -67,7 +76,7 @@ export default {
 	methods: {
 		marked,
 		formatDate: unix => {
-			return format(unix, "dd-MM-yyyy");
+			return format(unix, "HH:ii:ss dd-MM-yyyy");
 		}
 	}
 };

frontend/src/pages/Team.vue

@@ -222,9 +222,15 @@ export default {
 					bio: "Official instance Moderator.",
 					active: "Unknown"
 				},
+				{
+					name: "Johannes Andersen",
+					bio: "Official instance Moderator and QA Tester.",
+					active: "Unknown",
+					link: "https://github.com/Johannes-Andersen"
+				},
 				{
 					name: "Adryd",
-					bio: "Created Logo.",
+					bio: "Created Logo and Notes image.",
 					active: "May 2016",
 					link: "https://github.com/Adryd"
 				}
@@ -241,10 +247,6 @@ export default {
 				{
 					name: "Wesley McCann",
 					link: "https://github.com/Septimus"
-				},
-				{
-					name: "Johannes Andersen",
-					link: "https://github.com/Johannes-Andersen"
 				}
 			]
 		};