Nav/footer update & more frontend configurability

README.md

@@ -85,6 +85,9 @@ Once you've installed the required tools:
    The `recaptcha.key` value can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).
    The `cookie.domain` value should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.
    The `cookie.secure` value should be `true` for SSL connections, and `false` for normal http connections.
+   The `siteSettings.logo` should be the path to the logo image, by default it is `/assets/wordmark.png`.
+   The `siteSettings.siteName` should be the name of the site.
+   The `siteSettings.socialLinks.` `github`,`twitter`,`facebook` and `github` are set to the official Musare accounts by default but can be changed. 
 
 Now you have different paths here.
 

frontend/components/MainFooter.vue

@@ -2,10 +2,10 @@
 	<footer class="footer">
 		<div class="container">
 			<div class="content has-text-centered">
-				<p>
+				<p class="socialIcons">
 					<a
 						class="icon"
-						href="https://github.com/Musare/MusareNode"
+						:href="`${this.socialLinks.github}`"
 						target="_blank"
 						title="GitHub Repository"
 					>
@@ -13,7 +13,7 @@
 					</a>
 					<a
 						class="icon"
-						href="https://twitter.com/MusareApp"
+						:href="`${this.socialLinks.twitter}`"
 						target="_blank"
 						title="Twitter Account"
 					>
@@ -21,7 +21,7 @@
 					</a>
 					<a
 						class="icon"
-						href="https://www.facebook.com/MusareMusic/"
+						:href="`${this.socialLinks.facebook}`"
 						target="_blank"
 						title="Facebook Page"
 					>
@@ -29,7 +29,7 @@
 					</a>
 					<a
 						class="icon"
-						href="https://discord.gg/Y5NxYGP"
+						:href="`${this.socialLinks.discord}`"
 						target="_blank"
 						title="Discord Server"
 					>
@@ -42,6 +42,17 @@
 						src="/assets/wordmark.png"
 						alt="Musare"
 				/></a>
+				<p class="footerLinks">
+					<router-link title="About Musare" to="/about">
+						About
+					</router-link>
+					<router-link title="The Musare Team" to="/team">
+						Team
+					</router-link>
+					<router-link title="News" to="/news">
+						News
+					</router-link>
+				</p>
 				<p>
 					© Copyright Musare 2015 - 2019
 				</p>
@@ -50,6 +61,26 @@
 	</footer>
 </template>
 
+<script>
+export default {
+	data() {
+		return {
+			socialLinks: {
+				github: "",
+				twitter: "",
+				facebook: "",
+				discord: ""
+			}
+		};
+	},
+	mounted: function() {
+		lofig.get("siteSettings.socialLinks", res => {
+			this.socialLinks = res;
+		});
+	}
+};
+</script>
+
 <style lang="scss" scoped>
 .content a:not(.button) {
 	border: 0;
@@ -66,7 +97,8 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	height: 230px;
+	height: 240px;
+	padding: 40px 20px 40px;
 	border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
 	box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.65),
 		0 6px 20px 0 rgba(3, 169, 244, 0.4);
@@ -80,17 +112,43 @@
 		margin-bottom: 15px;
 		width: 200px;
 	}
-}
 
-.icon:hover {
-	color: #90298c !important;
+	.socialIcons {
+		.icon {
+			height: 28px;
+			line-height: 28px;
+			width: 28px;
+		}
+	}
+
+	.footerLinks {
+		:not(:last-child) {
+			border-right: solid 1px #03a9f4;
+		}
+		a {
+			padding: 0 5px;
+			font-size: 18px;
+			color: #03a9f4;
+		}
+		a:hover {
+			color: #03a9f4;
+			text-decoration: underline;
+		}
+	}
 }
 
-.nightMode {
+@media only screen and (min-width: 992px) {
 	.footer {
-		background-color: rgb(51, 51, 51);
-		.content {
-			color: #e6e6e6;
+		height: 180px;
+		.socialIcons {
+			left: 0;
+			top: 35px;
+			position: absolute;
+		}
+		.footerLinks {
+			right: 0;
+			top: 35px;
+			position: absolute;
 		}
 	}
 }

frontend/components/MainHeader.vue

@@ -2,7 +2,10 @@
 	<nav class="nav is-info">
 		<div class="nav-left">
 			<router-link class="nav-item is-brand" to="/">
-				<img src="/assets/wordmark.png" alt="Musare" />
+				<img
+					:src="`${this.siteSettings.logo}`"
+					:alt="`${this.siteSettings.siteName}`"
+				/>
 			</router-link>
 		</div>
 
@@ -24,15 +27,6 @@
 			>
 				<strong>Admin</strong>
 			</router-link>
-			<router-link class="nav-item is-tab" to="/team">
-				Team
-			</router-link>
-			<router-link class="nav-item is-tab" to="/about">
-				About
-			</router-link>
-			<router-link class="nav-item is-tab" to="/news">
-				News
-			</router-link>
 			<span v-if="$parent.$parent.loggedIn" class="grouped">
 				<router-link
 					class="nav-item is-tab"
@@ -88,13 +82,20 @@ export default {
 	data() {
 		return {
 			isMobile: false,
-			frontendDomain: ""
+			frontendDomain: "",
+			siteSettings: {
+				logo: "",
+				siteName: ""
+			}
 		};
 	},
 	mounted: function() {
 		lofig.get("frontendDomain", res => {
 			this.frontendDomain = res;
 		});
+		lofig.get("siteSettings", res => {
+			this.siteSettings = res;
+		});
 	},
 	computed: mapState("modals", {
 		modals: state => state.modals.header
@@ -109,6 +110,7 @@ export default {
 .nav {
 	background-color: #03a9f4;
 	height: 64px;
+	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 
 	.nav-menu.is-active {
 		.nav-item {
@@ -120,6 +122,11 @@ export default {
 		}
 	}
 
+	a.nav-item.is-tab:hover {
+		border-bottom: none;
+		border-top: solid 1px #ffffff;
+	}
+
 	.nav-toggle {
 		height: 64px;
 
@@ -158,46 +165,4 @@ export default {
 	display: flex;
 	text-decoration: none;
 }
-.nightMode {
-	.nav {
-		background-color: #012332;
-		height: 64px;
-
-		.nav-menu.is-active {
-			.nav-item {
-				color: #333;
-
-				&:hover {
-					color: #333;
-				}
-			}
-		}
-
-		.nav-toggle {
-			height: 64px;
-
-			&.is-active span {
-				background-color: #333;
-			}
-		}
-
-		.is-brand {
-			font-size: 2.1rem !important;
-			line-height: 64px !important;
-			padding: 0 20px;
-		}
-
-		.nav-item {
-			font-size: 15px;
-			color: hsl(0, 0%, 100%);
-
-			&:hover {
-				color: hsl(0, 0%, 100%);
-			}
-		}
-		.admin strong {
-			color: #03a9f4;
-		}
-	}
-}
 </style>

frontend/components/Station/CommunityHeader.vue

@@ -8,8 +8,8 @@
 					:to="{ path: '/' }"
 				>
 					<img
-						:src="`${this.frontendDomain}/assets/wordmark.png`"
-						alt="Musare"
+						:src="`${this.siteSettings.logo}`"
+						:alt="`${this.siteSettings.siteName}`"
 					/>
 				</router-link>
 			</div>
@@ -33,15 +33,6 @@
 				>
 					<strong>Admin</strong>
 				</router-link>
-				<router-link class="nav-item is-tab" to="/team">
-					Team
-				</router-link>
-				<router-link class="nav-item is-tab" to="/about">
-					About
-				</router-link>
-				<router-link class="nav-item is-tab" to="/news">
-					News
-				</router-link>
 				<span v-if="$parent.$parent.loggedIn" class="grouped">
 					<router-link
 						class="nav-item is-tab"
@@ -214,13 +205,20 @@ export default {
 			title: this.$route.params.id,
 			isMobile: false,
 			controlBar: true,
-			frontendDomain: ""
+			frontendDomain: "",
+			siteSettings: {
+				logo: "",
+				siteName: ""
+			}
 		};
 	},
 	mounted: function() {
 		lofig.get("frontendDomain", res => {
 			this.frontendDomain = res;
 		});
+		lofig.get("siteSettings", res => {
+			this.siteSettings = res;
+		});
 	},
 	methods: {
 		isOwner: function() {
@@ -255,6 +253,7 @@ export default {
 .nav {
 	background-color: #03a9f4;
 	line-height: 64px;
+	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 
 	.is-brand {
 		font-size: 2.1rem !important;
@@ -290,6 +289,11 @@ a.nav-item {
 	}
 }
 
+a.nav-item.is-tab:hover {
+	border-bottom: none;
+	border-top: solid 1px #ffffff;
+}
+
 .admin strong {
 	color: #9d42b1;
 }

frontend/components/Station/OfficialHeader.vue

@@ -4,8 +4,8 @@
 			<div class="nav-left">
 				<router-link class="nav-item is-brand" to="/">
 					<img
-						:src="`${this.frontendDomain}/assets/wordmark.png`"
-						alt="Musare"
+						:src="`${this.siteSettings.logo}`"
+						:alt="`${this.siteSettings.siteName}`"
 					/>
 				</router-link>
 			</div>
@@ -29,15 +29,6 @@
 				>
 					<strong>Admin</strong>
 				</router-link>
-				<router-link class="nav-item is-tab" to="/team">
-					Team
-				</router-link>
-				<router-link class="nav-item is-tab" to="/about">
-					About
-				</router-link>
-				<router-link class="nav-item is-tab" to="/news">
-					News
-				</router-link>
 				<span v-if="$parent.$parent.loggedIn" class="grouped">
 					<router-link
 						class="nav-item is-tab"
@@ -235,13 +226,20 @@ export default {
 			title: this.$route.params.id,
 			isMobile: false,
 			controlBar: false,
-			frontendDomain: ""
+			frontendDomain: "",
+			siteSettings: {
+				logo: "",
+				siteName: ""
+			}
 		};
 	},
 	mounted: function() {
 		lofig.get("frontendDomain", res => {
 			this.frontendDomain = res;
 		});
+		lofig.get("siteSettings", res => {
+			this.siteSettings = res;
+		});
 	},
 	methods: {
 		isOwner: function() {
@@ -275,6 +273,7 @@ export default {
 .nav {
 	background-color: #03a9f4;
 	line-height: 64px;
+	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 
 	.is-brand {
 		font-size: 2.1rem !important;
@@ -310,6 +309,11 @@ a.nav-item {
 	}
 }
 
+a.nav-item.is-tab:hover {
+	border-bottom: none;
+	border-top: solid 1px #ffffff;
+}
+
 .admin strong {
 	color: #9d42b1;
 }

frontend/dist/config/template.json

@@ -7,6 +7,16 @@
 	"frontendPort": "",
   	"cookie": {
 		"domain": "",
-		"secure": false
+		"secure": true
+	},
+	"siteSettings": {
+		"logo": "/assets/wordmark.png",
+		"siteName": "Musare",
+		"socialLinks": {
+			"github": "https://github.com/Musare/MusareNode",
+			"twitter": "https://twitter.com/MusareApp",
+			"facebook": "https://www.facebook.com/MusareMusic/",
+			"discord": "https://discord.gg/Y5NxYGP"
+		}
 	}
 }