Moved nightmode toggle to footer

frontend/src/components/layout/MainFooter.vue

@@ -20,20 +20,85 @@
 					>
 					<router-link title="News" to="/news">News</router-link>
 				</div>
+				<div id="footer-nightmode-toggle">
+					<p class="is-expanded checkbox-control">
+						<label class="switch">
+							<input
+								type="checkbox"
+								id="instant-nightmode"
+								v-model="localNightmode"
+							/>
+							<span class="slider round"></span>
+						</label>
+
+						<label for="instant-nightmode">
+							<p>Nightmode</p>
+						</label>
+					</p>
+				</div>
 			</div>
 		</div>
 	</footer>
 </template>
 
 <script>
+import Toast from "toasters";
+import { mapState, mapGetters, mapActions } from "vuex";
+
 export default {
 	data() {
 		return {
-			github: "#"
+			github: "#",
+			localNightmode: null
 		};
 	},
+	computed: {
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	watch: {
+		localNightmode(newValue, oldValue) {
+			if (oldValue === null) return;
+
+			localStorage.setItem("nightmode", this.localNightmode);
+
+			if (this.loggedIn) {
+				this.socket.dispatch(
+					"users.updatePreferences",
+					{ nightmode: this.localNightmode },
+					res => {
+						if (res.status !== "success") new Toast(res.message);
+					}
+				);
+			}
+
+			this.changeNightmode(this.localNightmode);
+		}
+	},
 	async mounted() {
 		this.github = await lofig.get("siteSettings.github");
+
+		this.localNightmode = JSON.parse(localStorage.getItem("nightmode"));
+
+		this.socket.dispatch("users.getPreferences", res => {
+			if (res.status === "success")
+				this.localNightmode = res.data.preferences.nightmode;
+		});
+
+		this.socket.on("keep.event:user.preferences.updated", res => {
+			if (res.data.preferences.nightmode !== undefined)
+				this.localNightmode = res.data.preferences.nightmode;
+		});
+
+		this.frontendDomain = await lofig.get("frontendDomain");
+		this.siteSettings = await lofig.get("siteSettings");
+	},
+	methods: {
+		...mapActions("user/preferences", ["changeNightmode"])
 	}
 };
 </script>
@@ -51,14 +116,13 @@ export default {
 	position: relative;
 	bottom: 0;
 	flex-shrink: 0;
-	height: auto;
 	padding: 20px;
 	border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
 	box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.4),
 		0 6px 20px 0 rgba(3, 169, 244, 0.2);
 	background-color: var(--white);
 	width: 100%;
-	height: 160px;
+	height: 200px;
 	font-size: 16px;
 
 	.footer-content {
@@ -89,7 +153,7 @@ export default {
 	}
 
 	#footer-links {
-		order: 2;
+		order: 3;
 
 		:not(:last-child) {
 			border-right: solid 1px var(--primary-color);
@@ -115,15 +179,20 @@ export default {
 	}
 
 	#footer-copyright {
-		order: 3;
+		order: 4;
+	}
+
+	#footer-nightmode-toggle {
+		order: 2;
 	}
 }
 
 @media only screen and (min-width: 990px) {
 	.footer {
-		height: 100px;
+		height: 140px;
 
 		#footer-copyright {
+			order: 3;
 			left: 0;
 			top: 0;
 			position: absolute;
@@ -131,11 +200,16 @@ export default {
 		}
 
 		#footer-links {
+			order: 2;
 			right: 0;
 			top: 0;
 			position: absolute;
 			line-height: 50px;
 		}
+
+		#footer-nightmode-toggle {
+			order: 4;
+		}
 	}
 }
 </style>

frontend/src/components/layout/MainHeader.vue

@@ -52,28 +52,11 @@
 					>Register</a
 				>
 			</span>
-			<div class="nav-item" id="nightmode-toggle">
-				<p class="is-expanded checkbox-control">
-					<label class="switch">
-						<input
-							type="checkbox"
-							id="instant-nightmode"
-							v-model="localNightmode"
-						/>
-						<span class="slider round"></span>
-					</label>
-
-					<label for="instant-nightmode">
-						<p>Nightmode</p>
-					</label>
-				</p>
-			</div>
 		</div>
 	</nav>
 </template>
 
 <script>
-import Toast from "toasters";
 import { mapState, mapGetters, mapActions } from "vuex";
 
 export default {
@@ -84,7 +67,6 @@ export default {
 	},
 	data() {
 		return {
-			localNightmode: null,
 			isMobile: false,
 			frontendDomain: "",
 			siteSettings: {
@@ -104,46 +86,14 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	watch: {
-		localNightmode(newValue, oldValue) {
-			if (oldValue === null) return;
-
-			localStorage.setItem("nightmode", this.localNightmode);
-
-			if (this.loggedIn) {
-				this.socket.dispatch(
-					"users.updatePreferences",
-					{ nightmode: this.localNightmode },
-					res => {
-						if (res.status !== "success") new Toast(res.message);
-					}
-				);
-			}
-
-			this.changeNightmode(this.localNightmode);
-		}
-	},
 	async mounted() {
-		this.localNightmode = JSON.parse(localStorage.getItem("nightmode"));
-
-		this.socket.dispatch("users.getPreferences", res => {
-			if (res.status === "success")
-				this.localNightmode = res.data.preferences.nightmode;
-		});
-
-		this.socket.on("keep.event:user.preferences.updated", res => {
-			if (res.data.preferences.nightmode !== undefined)
-				this.localNightmode = res.data.preferences.nightmode;
-		});
-
 		this.frontendDomain = await lofig.get("frontendDomain");
 		this.siteSettings = await lofig.get("siteSettings");
 	},
 
 	methods: {
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/auth", ["logout"]),
-		...mapActions("user/preferences", ["changeNightmode"])
+		...mapActions("user/auth", ["logout"])
 	}
 };
 </script>

frontend/src/pages/Admin/index.vue

@@ -118,16 +118,20 @@
 			</ul>
 		</div>
 
-		<unverified-songs v-if="currentTab == 'unverifiedsongs'" />
-		<verified-songs v-if="currentTab == 'verifiedsongs'" />
-		<hidden-songs v-if="currentTab == 'hiddensongs'" />
-		<stations v-if="currentTab == 'stations'" />
-		<playlists v-if="currentTab == 'playlists'" />
-		<reports v-if="currentTab == 'reports'" />
-		<news v-if="currentTab == 'news'" />
-		<users v-if="currentTab == 'users'" />
-		<statistics v-if="currentTab == 'statistics'" />
-		<punishments v-if="currentTab == 'punishments'" />
+		<div class="admin-container">
+			<unverified-songs v-if="currentTab == 'unverifiedsongs'" />
+			<verified-songs v-if="currentTab == 'verifiedsongs'" />
+			<hidden-songs v-if="currentTab == 'hiddensongs'" />
+			<stations v-if="currentTab == 'stations'" />
+			<playlists v-if="currentTab == 'playlists'" />
+			<reports v-if="currentTab == 'reports'" />
+			<news v-if="currentTab == 'news'" />
+			<users v-if="currentTab == 'users'" />
+			<statistics v-if="currentTab == 'statistics'" />
+			<punishments v-if="currentTab == 'punishments'" />
+		</div>
+
+		<main-footer />
 	</div>
 </template>
 
@@ -136,10 +140,12 @@ import { mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
 import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: {
 		MainHeader,
+		MainFooter,
 		UnverifiedSongs: defineAsyncComponent(() =>
 			import("./tabs/UnverifiedSongs.vue")
 		),
@@ -240,6 +246,9 @@ export default {
 
 .main-container {
 	height: auto;
+	.admin-container {
+		flex: 1 0 auto;
+	}
 }
 
 .tabs {