fix(styles): footer is now sticky

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

frontend/components/MainFooter.vue

@@ -62,12 +62,15 @@
 }
 
 .footer {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 230px;
 	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);
 	background-color: #ffffff;
-	margin-top: 50px;
-	padding-bottom: 25px;
 	width: 100%;
 
 	.musareFooterLogo {

frontend/components/MainHeader.vue

@@ -2,10 +2,7 @@
 	<nav class="nav is-info">
 		<div class="nav-left">
 			<router-link class="nav-item is-brand" to="/">
-				<img
-					:src="`${this.frontendDomain}/assets/wordmark.png`"
-					alt="Musare"
-				/>
+				<img src="/assets/wordmark.png" alt="Musare" />
 			</router-link>
 		</div>
 

frontend/components/pages/About.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app">
 		<main-header />
-		<div class="container">
+		<div class="content-wrapper">
 			<div class="card is-fullwidth">
 				<header class="card-header">
 					<p class="card-header-title">

frontend/components/pages/Home.vue

@@ -2,136 +2,144 @@
 	<div>
 		<div class="app" :class="{ nightMode: nightMode }">
 			<main-header />
-			<div class="group">
-				<div class="group-title">
-					Official Stations
-				</div>
-				<router-link
-					v-for="(station, index) in stations.official"
-					:key="index"
-					class="card station-card"
-					:to="{ name: 'official', params: { id: station.name } }"
-					:class="{ isPrivate: station.privacy === 'private' }"
-				>
-					<div class="card-image">
-						<figure class="image is-square">
-							<img
-								:src="station.currentSong.thumbnail"
-								onerror="this.src='/assets/notes-transparent.png'"
-							/>
-						</figure>
-					</div>
-					<div class="card-content">
-						<div class="media">
-							<div class="media-left displayName">
-								<h5>{{ station.displayName }}</h5>
-							</div>
-						</div>
-
-						<div class="content">
-							{{ station.description }}
-						</div>
-
-						<div class="under-content">
-							<span class="official"
-								><i class="badge material-icons"
-									>verified_user</i
-								>Official</span
-							>
-							<i
-								v-if="station.privacy !== 'public'"
-								class="material-icons right-icon"
-								title="This station is not visible to other users."
-								>lock</i
-							>
-						</div>
+			<div class="content-wrapper">
+				<div class="group">
+					<div class="group-title">
+						Official Stations
 					</div>
 					<router-link
-						href="#"
-						class="absolute-a"
+						v-for="(station, index) in stations.official"
+						:key="index"
+						class="card station-card"
 						:to="{ name: 'official', params: { id: station.name } }"
-					/>
-				</router-link>
-			</div>
-			<div class="group">
-				<div class="group-title">
-					Community Stations&nbsp;
-					<a
-						v-if="$parent.loggedIn"
-						href="#"
-						@click="
-							toggleModal({
-								sector: 'home',
-								modal: 'createCommunityStation'
-							})
-						"
+						:class="{ isPrivate: station.privacy === 'private' }"
 					>
-						<i class="material-icons community-button"
-							>add_circle_outline</i
-						>
-					</a>
-				</div>
-				<router-link
-					v-for="(station, index) in stations.community"
-					:key="index"
-					:to="{ name: 'community', params: { id: station.name } }"
-					class="card station-card"
-					:class="{
-						isPrivate: station.privacy === 'private',
-						isMine: isOwner(station)
-					}"
-				>
-					<div class="card-image">
-						<figure class="image is-square">
-							<img
-								:src="station.currentSong.thumbnail"
-								onerror="this.src='/assets/notes-transparent.png'"
-							/>
-						</figure>
-					</div>
-					<div class="card-content">
-						<div class="media">
-							<div class="media-left displayName">
-								<h5>{{ station.displayName }}</h5>
-							</div>
+						<div class="card-image">
+							<figure class="image is-square">
+								<img
+									:src="station.currentSong.thumbnail"
+									onerror="this.src='/assets/notes-transparent.png'"
+								/>
+							</figure>
 						</div>
+						<div class="card-content">
+							<div class="media">
+								<div class="media-left displayName">
+									<h5>{{ station.displayName }}</h5>
+								</div>
+							</div>
+
+							<div class="content">
+								{{ station.description }}
+							</div>
 
-						<div class="content">
-							{{ station.description }}
+							<div class="under-content">
+								<span class="official"
+									><i class="badge material-icons"
+										>verified_user</i
+									>Official</span
+								>
+								<i
+									v-if="station.privacy !== 'public'"
+									class="material-icons right-icon"
+									title="This station is not visible to other users."
+									>lock</i
+								>
+							</div>
 						</div>
-						<div class="under-content">
-							<span class="hostedby"
-								>Hosted by
-								<span class="host">
-									<user-id-to-username
-										:userId="station.owner"
-										:link="true"
-									/>
-								</span>
-							</span>
-							<i
-								v-if="station.privacy !== 'public'"
-								class="material-icons right-icon"
-								title="This station is not visible to other users."
-								>lock</i
-							>
-							<i
-								v-if="isOwner(station)"
-								class="material-icons right-icon"
-								title="This is your station."
-								>home</i
+						<router-link
+							href="#"
+							class="absolute-a"
+							:to="{
+								name: 'official',
+								params: { id: station.name }
+							}"
+						/>
+					</router-link>
+				</div>
+				<div class="group">
+					<div class="group-title">
+						Community Stations&nbsp;
+						<a
+							v-if="$parent.loggedIn"
+							href="#"
+							@click="
+								toggleModal({
+									sector: 'home',
+									modal: 'createCommunityStation'
+								})
+							"
+						>
+							<i class="material-icons community-button"
+								>add_circle_outline</i
 							>
-						</div>
+						</a>
 					</div>
 					<router-link
-						href="#"
-						class="absolute-a"
+						v-for="(station, index) in stations.community"
+						:key="index"
 						:to="{
 							name: 'community',
 							params: { id: station.name }
 						}"
-					/>
-				</router-link>
+						class="card station-card"
+						:class="{
+							isPrivate: station.privacy === 'private',
+							isMine: isOwner(station)
+						}"
+					>
+						<div class="card-image">
+							<figure class="image is-square">
+								<img
+									:src="station.currentSong.thumbnail"
+									onerror="this.src='/assets/notes-transparent.png'"
+								/>
+							</figure>
+						</div>
+						<div class="card-content">
+							<div class="media">
+								<div class="media-left displayName">
+									<h5>{{ station.displayName }}</h5>
+								</div>
+							</div>
+
+							<div class="content">
+								{{ station.description }}
+							</div>
+							<div class="under-content">
+								<span class="hostedby"
+									>Hosted by
+									<span class="host">
+										<user-id-to-username
+											:userId="station.owner"
+											:link="true"
+										/>
+									</span>
+								</span>
+								<i
+									v-if="station.privacy !== 'public'"
+									class="material-icons right-icon"
+									title="This station is not visible to other users."
+									>lock</i
+								>
+								<i
+									v-if="isOwner(station)"
+									class="material-icons right-icon"
+									title="This is your station."
+									>home</i
+								>
+							</div>
+						</div>
+						<router-link
+							href="#"
+							class="absolute-a"
+							:to="{
+								name: 'community',
+								params: { id: station.name }
+							}"
+						/>
+					</router-link>
+				</div>
 			</div>
 			<main-footer />
 		</div>
@@ -451,7 +459,6 @@ html {
 .group {
 	text-align: center;
 	width: 100%;
-	margin: 64px 0 0 0;
 
 	.group-title {
 		float: left;

frontend/components/pages/Team.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app">
 		<main-header />
-		<div class="container">
+		<div class="content-wrapper">
 			<h3 class="center">
 				Our Team
 			</h3>

frontend/components/pages/Terms.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app">
 		<main-header />
-		<div class="container">
+		<div class="content-wrapper">
 			<h1>MUSARE TERMS OF SERVICE</h1>
 			<h4>Last Updated: January 25, 2016</h4>
 

frontend/dist/index.css

@@ -2,6 +2,15 @@ body {
 	background-color: rgb(245, 245, 245);
 }
 
+.app {
+	min-height: 100vh;
+	position: relative;
+}
+
+.content-wrapper {
+	padding: 60px 0 calc(230px + 60px) 0;
+}
+
 .card {
 	background-color: white;
 	/*padding: 20px;*/

frontend/package.json

@@ -7,7 +7,7 @@
 	"repository": "https://github.com/Musare/MusareNode",
 	"scripts": {
 		"lint": "npx eslint . --ext .js,.vue",
-		"dev": "webpack-dev-server --open --config webpack.dev.js",
+		"dev": "webpack-dev-server --config webpack.dev.js",
 		"build": "webpack --config webpack.prod.js"
 	},
 	"devDependencies": {

frontend/store/modules/user.js

@@ -13,7 +13,7 @@ const modules = {
 		state: {
 			userIdMap: {},
 			userIdRequested: {},
-			waitingForUserIdCallbacks: {}
+			pendingUserIdCallbacks: {}
 		},
 		getters: {},
 		actions: {
@@ -121,14 +121,12 @@ const modules = {
 												username: res.data
 											});
 
-											state.waitingForUserIdCallbacks[
+											state.pendingUserIdCallbacks[
 												`Z${userId}`
-											].forEach(callback => {
-												callback(res.data);
-											});
+											].forEach(cb => cb(res.data));
 
 											commit(
-												"clearWaitingCallbacks",
+												"clearPendingCallbacks",
 												userId
 											);
 
@@ -138,7 +136,7 @@ const modules = {
 								);
 							});
 						} else {
-							commit("waitForUsername", {
+							commit("pendingUsername", {
 								userId,
 								callback: username => {
 									return resolve(username);
@@ -156,16 +154,16 @@ const modules = {
 			},
 			requestingUserId(state, userId) {
 				state.userIdRequested[`Z${userId}`] = true;
-				if (!state.waitingForUserIdCallbacks[`Z${userId}`])
-					state.waitingForUserIdCallbacks[`Z${userId}`] = [];
+				if (!state.pendingUserIdCallbacks[`Z${userId}`])
+					state.pendingUserIdCallbacks[`Z${userId}`] = [];
 			},
-			waitForUsername(state, data) {
-				state.waitingForUserIdCallbacks[`Z${data.userId}`].push(
+			pendingUsername(state, data) {
+				state.pendingUserIdCallbacks[`Z${data.userId}`].push(
 					data.callback
 				);
 			},
-			clearWaitingCallbacks(state, userId) {
-				state.waitingForUserIdCallbacks[`Z${userId}`] = [];
+			clearPendingCallbacks(state, userId) {
+				state.pendingUserIdCallbacks[`Z${userId}`] = [];
 			}
 		}
 	},

frontend/webpack.dev.js

@@ -14,7 +14,7 @@ module.exports = merge(common, {
 		port: config.get("frontendPort"),
 		public: config.get("frontendDomain"),
 		proxy: {
-			"/sockjs-node": "http://localhost:"+config.get("frontendPort")
+			"/sockjs-node": `http://localhost:${config.get("frontendPort")}`
 		}
 	}
 });