feat(News): code, blockquotes, lists are now styled, fixed font sizes

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -3,7 +3,7 @@
 		<banned v-if="banned" />
 		<div v-else class="upper-container">
 			<router-view :key="$route.fullPath" class="main-container" />
-			<what-is-new />
+			<what-is-new v-show="modals.whatIsNew" />
 			<login-modal v-if="modals.login" />
 			<register-modal v-if="modals.register" />
 		</div>
@@ -1087,4 +1087,59 @@ h4.section-title {
 		color: var(--light-grey-1);
 	}
 }
+
+.news-item {
+	font-family: "Karla";
+
+	* {
+		font-family: Karla, Arial, sans-serif;
+		font-size: 16px;
+	}
+
+	h1 {
+		font-size: 55px;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
+	h2 {
+		font-size: 45px;
+	}
+
+	h3 {
+		font-size: 40px;
+	}
+
+	h4 {
+		font-size: 35px;
+	}
+
+	h5 {
+		font-size: 30px;
+	}
+
+	h6 {
+		font-size: 25px;
+	}
+
+	ul {
+		list-style: unset;
+	}
+
+	li {
+		margin-left: 30px;
+	}
+
+	blockquote {
+		padding: 0px 15px;
+		color: #6a737d;
+		border-left: 0.25em solid #dfe2e5;
+	}
+
+	code {
+		font-style: italic;
+	}
+}
 </style>

frontend/src/components/modals/EditNews.vue

@@ -1,5 +1,8 @@
 <template>
-	<modal :title="newsId ? 'Edit News' : 'Create News'">
+	<modal
+		class="edit-news-modal"
+		:title="newsId ? 'Edit News' : 'Create News'"
+	>
 		<div slot="body">
 			<div id="markdown-editor-and-preview">
 				<div class="column">
@@ -8,7 +11,11 @@
 				</div>
 				<div class="column">
 					<p><strong>Preview</strong></p>
-					<div id="preview" v-html="marked(markdown)"></div>
+					<div
+						class="news-item"
+						id="preview"
+						v-html="marked(markdown)"
+					></div>
 				</div>
 			</div>
 		</div>
@@ -150,6 +157,14 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.edit-news-modal {
+	.modal-card {
+		width: 1300px;
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 #markdown-editor-and-preview {
 	display: flex;
@@ -181,7 +196,7 @@ export default {
 		padding: 5px;
 		border: 1px solid var(--light-grey-3);
 		border-radius: 3px;
-		height: 500px;
+		height: 700px;
 	}
 }
 </style>

frontend/src/components/modals/WhatIsNew.vue

@@ -1,41 +1,41 @@
 <template>
-	<div
-		v-if="news !== null"
-		class="modal"
-		:class="{ 'is-active': isModalActive }"
-	>
-		<div class="modal-background" />
-		<div class="modal-card">
-			<header class="modal-card-head">
-				<p class="modal-card-title">
-					<strong>{{ news.title }}</strong>
-					({{ formatDate(news.createdAt) }})
-				</p>
-				<button class="delete" @click="toggleModal()" />
-			</header>
-			<section class="modal-card-body">
-				<div class="content">
-					<p>{{ news.markdown }}</p>
-				</div>
-			</section>
-		</div>
+	<div v-if="news !== null">
+		<modal :title="`News posted ${timeCreated}`">
+			<div slot="body">
+				<div
+					class="section news-item"
+					v-html="marked(news.markdown)"
+				></div>
+			</div>
+		</modal>
 	</div>
 </template>
 
 <script>
-import { format } from "date-fns";
-import { mapGetters } from "vuex";
+import { formatDistance } from "date-fns";
+import marked from "marked";
+import { mapGetters, mapActions } from "vuex";
+
+import Modal from "../Modal.vue";
 
 export default {
+	components: { Modal },
 	data() {
 		return {
 			isModalActive: false,
 			news: null
 		};
 	},
-	computed: mapGetters({
-		socket: "websockets/getSocket"
-	}),
+	computed: {
+		...mapGetters({
+			socket: "websockets/getSocket"
+		}),
+		timeCreated() {
+			return formatDistance(this.news.createdAt, new Date(), {
+				addSuffix: true
+			});
+		}
+	},
 	mounted() {
 		this.socket.dispatch("news.newest", res => {
 			if (res.status !== "success") return;
@@ -49,7 +49,7 @@ export default {
 						parseInt(localStorage.getItem("whatIsNew")) <
 						news.createdAt
 					) {
-						this.toggleModal();
+						this.openModal("whatIsNew");
 						localStorage.setItem("whatIsNew", news.createdAt);
 					}
 				} else {
@@ -57,7 +57,7 @@ export default {
 						parseInt(localStorage.getItem("firstVisited")) <
 						news.createdAt
 					)
-						this.toggleModal();
+						this.openModal("whatIsNew");
 					localStorage.setItem("whatIsNew", news.createdAt);
 				}
 			} else if (!localStorage.getItem("firstVisited"))
@@ -65,17 +65,8 @@ export default {
 		});
 	},
 	methods: {
-		toggleModal() {
-			this.isModalActive = !this.isModalActive;
-		},
-		formatDate: unix => {
-			return format(unix, "dd-MM-yyyy");
-		}
-	},
-	events: {
-		closeModal() {
-			this.isModalActive = false;
-		}
+		marked,
+		...mapActions("modalVisibility", ["openModal"])
 	}
 };
 </script>

frontend/src/pages/Admin/tabs/News.vue

@@ -14,7 +14,7 @@
 				</thead>
 				<tbody>
 					<tr v-for="news in news" :key="news._id">
-						<td class="news-status">{{ news.status }}</td>
+						<td class="news-item-status">{{ news.status }}</td>
 						<td>
 							<strong>{{ news.title }}</strong>
 						</td>
@@ -25,7 +25,7 @@
 								:link="true"
 							/>
 						</td>
-						<td>{{ news.markdown }}</td>
+						<td class="news-item-markdown">{{ news.markdown }}</td>
 						<td>
 							<button
 								class="button is-primary"
@@ -193,7 +193,14 @@ td {
 	color: var(--primary-color);
 }
 
-.news-status {
+.news-item-status {
 	text-transform: capitalize;
 }
+
+.news-item-markdown {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	max-width: 400px;
+}
 </style>

frontend/src/pages/News.vue

@@ -3,30 +3,15 @@
 		<metadata title="News" />
 		<main-header />
 		<div class="container">
-			<div class="content-wrapper">
-				<div
-					v-for="item in news"
-					:key="item._id"
-					class="card is-fullwidth"
-				>
-					<header class="card-header">
-						<p class="card-header-title">
-							{{ item.title }} - {{ formatDate(item.createdAt) }}
-						</p>
-					</header>
-					<div class="card-content">
-						<div class="content">
-							<p>{{ item.markdown }}</p>
-						</div>
-					</div>
-				</div>
-				<h3
-					v-if="news.length === 0"
-					class="has-text-centered page-title"
-				>
-					No news items were found.
-				</h3>
-			</div>
+			<div
+				v-for="item in news"
+				:key="item._id"
+				class="section news-item"
+				v-html="marked(item.markdown)"
+			></div>
+			<h3 v-if="news.length === 0" class="has-text-centered page-title">
+				No news items were found.
+			</h3>
 		</div>
 		<main-footer />
 	</div>
@@ -35,6 +20,7 @@
 <script>
 import { format } from "date-fns";
 import { mapGetters } from "vuex";
+import marked from "marked";
 
 import MainHeader from "@/components/layout/MainHeader.vue";
 import MainFooter from "@/components/layout/MainFooter.vue";
@@ -50,6 +36,17 @@ export default {
 		socket: "websockets/getSocket"
 	}),
 	mounted() {
+		marked.use({
+			renderer: {
+				table(header, body) {
+					return `<table class="table is-striped">
+					<thead>${header}</thead>
+					<tbody>${body}</tbody>
+					</table>`;
+				}
+			}
+		});
+
 		this.socket.dispatch("news.index", res => {
 			if (res.status === "success") this.news = res.data.news;
 		});
@@ -68,6 +65,7 @@ export default {
 		});
 	},
 	methods: {
+		marked,
 		formatDate: unix => {
 			return format(unix, "dd-MM-yyyy");
 		}
@@ -82,38 +80,14 @@ export default {
 	}
 }
 
-.card {
+.section {
+	border: 1px solid var(--light-grey-3);
+	width: 1000px;
+	max-width: 100%;
 	margin-top: 50px;
-}
-
-.sect {
-	div[class^="sect-head"],
-	div[class*=" sect-head"] {
-		padding: 12px;
-		text-transform: uppercase;
-		font-weight: bold;
-		color: var(--white);
-	}
 
-	.sect-head-features {
-		background-color: dodgerblue;
-	}
-	.sect-head-improvements {
-		background-color: seagreen;
-	}
-	.sect-head-bugs {
-		background-color: brown;
-	}
-	.sect-head-upcoming {
-		background-color: mediumpurple;
-	}
-
-	.sect-body {
-		padding: 15px 25px;
-
-		li {
-			list-style-type: disc;
-		}
+	&:last-of-type {
+		margin-bottom: 50px;
 	}
 }
 </style>

frontend/src/store/modules/modalVisibility.js

@@ -3,6 +3,7 @@ import ws from "@/ws";
 
 const state = {
 	modals: {
+		whatIsNew: false,
 		manageStation: false,
 		login: false,
 		register: false,