Added some cool methods for Vue, added Station Card styles, and added vue rooms data.

frontend/build/index.html

@@ -5,9 +5,9 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>Musare</title>
 	<link rel="shortcut icon" type="image/x-icon" href="https://musare.com/favicon.ico" />
-	<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->
-	<!--<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">-->
-	<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 	<!-- Bootstrap -->
 	<link rel="stylesheet" href="./vendor/bootstrap.min.css">
 	<script src="./vendor/jquery.min.js"></script>

frontend/components/App.vue

@@ -1,22 +1,42 @@
 <template>
 	<div class="app">
-		<component-header></component-header>
-		<component-body></component-body>
-		<component-footer></component-footer>
+		<main-header></main-header>
+		<home-body v-if="home.visible"></home-body>
+		<station-body v-if="station.visible"></station-body>
+		<main-footer></main-footer>
 	</div>
 </template>
 
 <script>
-	// TODO: Implement these files
-	import ComponentHeader from './MainHeader.vue'
-	import ComponentBody from './HomeBody.vue'
-	import ComponentFooter from './MainFooter.vue'
+	import MainHeader from './MainHeader.vue'
+	import HomeBody from './HomeBody.vue'
+	import StationBody from './StationBody.vue'
+	import MainFooter from './MainFooter.vue'
 
 	export default {
 		data() {
-			return {}
+			return {
+				home: {
+					visible: true
+				},
+				station: {
+					visible: false
+				}
+			}
 		},
-		components: { ComponentHeader, ComponentBody, ComponentFooter }
+		methods: {
+			goHome() {
+				this.home.visible = true;
+				for (let i = 0; i < this.length; i++) {
+					this[i].visible = false;
+				}
+			},
+			switchView(hide, show) {
+				this[hide].visible = false;
+				this[show].visible = true;
+			}
+		},
+		components: { MainHeader, HomeBody, StationBody, MainFooter }
 	}
 </script>
 

frontend/components/HomeBody.vue

@@ -18,12 +18,132 @@
 			</div>
 		</div>
 	</div>
+	<!-- Have to use button, because of a scope error when using it with line 26 :( -->
+	<button @click="$parent.switchView('home', 'station')">Join Station</button>
+	<!-- Will be deleted soon ^^ -->
+	<div class="group" v-for="group in groups">
+		<div class="group-title">{{group.name}}</div>
+		<div class="group-rooms">
+			<div class="rooms-room" v-for="room in group.rooms">
+				<img class="room-image" :src="room.thumbnail" />
+				<div class="room-info">
+					<div class="room-grid-left">
+						<h3>{{ room.name }}</h3>
+						<p>{{ room.description }}</p>
+					</div>
+					<div class="room-grid-right">
+						<div>{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+				groups: [
+					{
+						id: "lu08gw56571r4497wrk9",
+						name: "Official Rooms",
+						rooms: [
+							{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
+							{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
+							{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
+							{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
+						]
+					},
+					{
+						id: "g2b8v03xaedj8ht1emi",
+						name: "Trending Rooms",
+						rooms: [
+							{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
+							{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
+							{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
+							{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
+						]
+					}
+				]
+			}
+		}
+	}
+</script>
+
 <style lang="sass" scoped>
 	.g-recaptcha {
 		display: flex;
 		justify-content: center;
 		margin-top: 10px;
 	}
+
+	.group {
+		width: 100%;
+		height: 448px;
+		margin: 64px 0 64px 0;
+
+		.group-title {
+			float: left;
+			clear: none;
+			width: 100%;
+			height: 64px;
+			line-height: 48px;
+			text-align: center;
+			font-size: 48px;
+		}
+
+		.group-rooms {
+			white-space: nowrap;
+			text-align: center;
+			overflow: hidden;
+			float: left;
+			clear: none;
+			width: 100%;
+			height: 384px;
+
+			.rooms-room {
+				position: relative;
+				top: 16px;
+				display: inline-block;
+				clear: none;
+				width: 256px;
+				height: 345px;
+				margin: 0 16px 0 16px;
+				box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
+				cursor: pointer;
+
+				.room-info {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					padding: 5px;
+				}
+
+				.room-image {
+					width: 100%;
+					height: 256px;
+				}
+
+				.room-grid-left {
+					display: flex;
+					flex-direction: column;
+					width: 75%;
+					text-align: left;
+					padding-left: 10px;
+
+					h3, p {
+						margin: 0;
+						white-space: normal;
+					}
+				}
+
+				.room-grid-right {
+					display: flex;
+					flex-direction: column;
+					width: 25%;
+				}
+			}
+		}
+	}
 </style>

frontend/components/MainHeader.vue

@@ -8,7 +8,7 @@
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<a class="navbar-brand" href="#">Musare</a>
+				<a class="navbar-brand" href="#" @click="$parent.goHome()">Musare</a>
 			</div>
 			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 				<ul class="nav navbar-nav navbar-right">

frontend/components/Station.Vue

@@ -1,121 +0,0 @@
-<template>
-	<div class="app">
-		<component-header></component-header>
-		<div class="body">
-			<div class="row">
-				<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
-					<div id="player"></div>
-				</div>
-				<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
-					<div class="row">
-						<div class="col-md-8 col-sm-12 col-sm-12">
-							<h4 id="time-display"><span id="time-elapsed">2:58</span> / <span id="time-total">3:19</span></h4>
-							<h3>Stitches</h3>
-							<h4 class="thin" style="margin-left: 0">Shawn Mendes</h4>
-							<div class="row">
-								<form style="margin-top: 12px; margin-bottom: 0;" action="#" class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
-									<p style="margin-top: 0; position: relative;">
-										<input type="range" id="volume_slider" min="0" max="100" class="active">
-									</p>
-								</form>
-								<div class="col-xs-8 col-sm-5 col-md-5" style="float: right;">
-									<ul id="ratings">
-										<li id="like" class="right"><span class="flow-text">2 </span> <i id="thumbs_up" class="material-icons grey-text">thumb_up</i></li>
-										<li style="margin-right: 10px;" id="dislike" class="right"><span class="flow-text">1 </span><i id="thumbs_down" class="material-icons grey-text">thumb_down</i></li>
-									</ul>
-								</div>
-							</div>
-							<div class="seeker-bar-container white" id="preview-progress">
-								<div class="seeker-bar light-blue" style="width: 60.9869%;"></div>
-							</div>
-						</div>
-						<img alt="Not loading" class="img-responsive col-md-4 col-xs-12 col-sm-12" onerror="this.src='/notes.png'" id="song-image" style="margin-top: 10px !important" src="https://i.scdn.co/image/32031982517529900c02654c460dc9ac6c47c598" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	import ComponentHeader from './MainHeader.vue'
-	import ComponentBody from './HomepageBody.vue'
-	import ComponentFooter from './MainFooter.vue'
-
-	export default {
-		data() {
-			return {}
-		},
-		components: { ComponentHeader }
-	}
-</script>
-
-<style lang="sass">
-	.body {
-		/*width: 100%;
-        line-height: 256px;*/
-		flex: 1 0 auto;
-		padding-top: 4.5vw;
-		transition: all 0.1s;
-		margin: 0 auto;
-		max-width: 1280px;
-		width: 90%;
-		color: black;
-	}
-
-	@media only screen and (min-width: 993px) {
-		.body {
-			width: 70%;
-		}
-	}
-	@media only screen and (min-width: 601px) {
-		.body {
-			width: 85%;
-		}
-	}
-
-	.room-title {
-		left: 50%;
-		-webkit-transform: translateX(-50%);
-		transform: translateX(-50%);
-		font-size: 2.1em;
-	}
-
-	#ratings span {
-		font-size: 1.68rem;
-	}
-
-	#ratings i {
-		color: #9e9e9e !important;
-		cursor: pointer;
-		transition: 0.1s color;
-	}
-
-	#time-display {
-		margin-top: 30px;
-		float: right;
-	}
-
-	#thumbs_up:hover {
-		color: #00bfa5 !important;
-	}
-
-	#thumbs_down:hover {
-		color: #e53935 !important;
-	}
-
-	.seeker-bar-container {
-		position: relative;
-		height: 5px;
-		display: block;
-		width: 100%;
-		overflow: hidden;
-	}
-
-	.seeker-bar {
-		top: 0;
-		left: 0;
-		bottom: 0;
-		position: absolute;
-	}
-</style>

frontend/components/StationBody.Vue

@@ -0,0 +1,262 @@
+<template>
+	<div class="station">
+		<div class="row">
+			<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
+				<div id="player"></div>
+			</div>
+			<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
+				<div class="row">
+					<div class="col-md-8 col-sm-12 col-sm-12">
+						<h4 id="time-display"><span id="time-elapsed">2:58</span> / <span id="time-total">3:19</span></h4>
+						<h3>Stitches</h3>
+						<h4 class="thin" style="margin-left: 0">Shawn Mendes</h4>
+						<div class="row">
+							<form style="margin-top: 12px; margin-bottom: 0;" action="#" class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
+								<p style="margin-top: 0; position: relative;">
+									<input type="range" id="volume_slider" min="0" max="100" class="active">
+								</p>
+							</form>
+							<div class="col-xs-8 col-sm-5 col-md-5" style="float: right;">
+								<ul id="ratings">
+									<li id="like" class="right"><span class="flow-text">2 </span> <i id="thumbs_up" class="material-icons grey-text">thumb_up</i></li>
+									<li style="margin-right: 10px;" id="dislike" class="right"><span class="flow-text">1 </span><i id="thumbs_down" class="material-icons grey-text">thumb_down</i></li>
+								</ul>
+							</div>
+						</div>
+						<div class="seeker-bar-container white" id="preview-progress">
+							<div class="seeker-bar light-blue" style="width: 60.9869%;"></div>
+						</div>
+					</div>
+					<img alt="Not loading" class="img-responsive col-md-4 col-xs-12 col-sm-12" onerror="this.src='/notes.png'" id="song-image" style="margin-top: 10px !important" src="https://i.scdn.co/image/32031982517529900c02654c460dc9ac6c47c598" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="sass">
+	.station {
+		flex: 1 0 auto;
+		padding-top: 4.5vw;
+		transition: all 0.1s;
+		margin: 0 auto;
+		max-width: 1280px;
+		width: 90%;
+		color: black;
+
+		@media only screen and (min-width: 993px) {
+			width: 70%;
+		}
+
+		@media only screen and (min-width: 601px) {
+			width: 85%;
+		}
+
+		input[type=range] {
+			-webkit-appearance: none;
+			width: 100%;
+			margin: 7.3px 0;
+		}
+
+		input[type=range]:focus {
+			outline: none;
+		}
+
+		input[type=range]::-webkit-slider-runnable-track {
+			width: 100%;
+			height: 5.2px;
+			cursor: pointer;
+			box-shadow: 0;
+			background: #c2c0c2;
+			border-radius: 0;
+			border: 0;
+		}
+
+		input[type=range]::-webkit-slider-thumb {
+			box-shadow: 0;
+			border: 0;
+			height: 19px;
+			width: 19px;
+			border-radius: 15px;
+			background: #03a9f4;
+			cursor: pointer;
+			-webkit-appearance: none;
+			margin-top: -6.5px;
+		}
+
+		input[type=range]::-moz-range-track {
+			width: 100%;
+			height: 5.2px;
+			cursor: pointer;
+			box-shadow: 0;
+			background: #c2c0c2;
+			border-radius: 0;
+			border: 0;
+		}
+
+		input[type=range]::-moz-range-thumb {
+			box-shadow: 0;
+			border: 0;
+			height: 19px;
+			width: 19px;
+			border-radius: 15px;
+			background: #03a9f4;
+			cursor: pointer;
+			-webkit-appearance: none;
+			margin-top: -6.5px;
+		}
+
+		input[type=range]::-ms-track {
+			width: 100%;
+			height: 5.2px;
+			cursor: pointer;
+			box-shadow: 0;
+			background: #c2c0c2;
+			border-radius: 1.3px;
+		}
+
+		input[type=range]::-ms-fill-lower {
+			background: #c2c0c2;
+			border: 0;
+			border-radius: 0;
+			box-shadow: 0;
+		}
+
+		input[type=range]::-ms-fill-upper {
+			background: #c2c0c2;
+			border: 0;
+			border-radius: 0;
+			box-shadow: 0;
+		}
+
+		input[type=range]::-ms-thumb {
+			box-shadow: 0;
+			border: 0;
+			height: 15px;
+			width: 15px;
+			border-radius: 15px;
+			background: #03a9f4;
+			cursor: pointer;
+			-webkit-appearance: none;
+			margin-top: 1.5px;
+		}
+	}
+
+	.room-title {
+		left: 50%;
+		-webkit-transform: translateX(-50%);
+		transform: translateX(-50%);
+		font-size: 2.1em;
+	}
+
+	#ratings {
+		span {
+			font-size: 1.68rem;
+		}
+
+		i {
+			color: #9e9e9e !important;
+			cursor: pointer;
+			transition: 0.1s color;
+		}
+	}
+
+	#time-display {
+		margin-top: 30px;
+		float: right;
+	}
+
+	#thumbs_up:hover {
+		color: #87D37C !important;
+	}
+
+	#thumbs_down:hover {
+		color: #EC644B !important;
+	}
+
+	.seeker-bar-container {
+		position: relative;
+		height: 5px;
+		display: block;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.seeker-bar {
+		top: 0;
+		left: 0;
+		bottom: 0;
+		position: absolute;
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		display: block;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-weight: 400;
+		line-height: 1.1;
+	}
+
+	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+		font-weight: inherit;
+	}
+
+	h1 {
+		font-size: 4.2rem;
+		line-height: 110%;
+		margin: 2.1rem 0 1.68rem 0;
+	}
+
+	h2 {
+		font-size: 3.56rem;
+		line-height: 110%;
+		margin: 1.78rem 0 1.424rem 0;
+	}
+
+	h3 {
+		font-size: 2.92rem;
+		line-height: 110%;
+		margin: 1.46rem 0 1.168rem 0;
+	}
+
+	h4 {
+		font-size: 2.28rem;
+		line-height: 110%;
+		margin: 1.14rem 0 0.912rem 0;
+	}
+
+	h5 {
+		font-size: 1.64rem;
+		line-height: 110%;
+		margin: 0.82rem 0 0.656rem 0;
+	}
+
+	h6 {
+		font-size: 1rem;
+		line-height: 110%;
+		margin: 0.5rem 0 0.4rem 0;
+	}
+
+	.thin {
+		font-weight: 200;
+	}
+
+	.left {
+		float: left !important;
+	}
+
+	.right {
+		float: right !important;
+	}
+
+	.light-blue {
+		background-color: #03a9f4 !important;
+	}
+
+	.white {
+		background-color: #FFFFFF !important;
+	}
+</style>

frontend/scss/Main.scss

@@ -1,169 +0,0 @@
-* { box-sizing: border-box; font-family: Roboto, sans-serif; }
-
-html {
-	width: 100%;
-	height: 100%;
-	body {
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		padding: 0;
-	}
-}
-
-ul {
-	list-style: none;
-	margin: 0;
-	display: block;
-}
-
-input[type=range] {
-	-webkit-appearance: none;
-	width: 100%;
-	margin: 7.3px 0;
-}
-input[type=range]:focus {
-	outline: none;
-}
-input[type=range]::-webkit-slider-runnable-track {
-	width: 100%;
-	height: 5.2px;
-	cursor: pointer;
-	box-shadow: 0;
-	background: #c2c0c2;
-	border-radius: 0;
-	border: 0;
-}
-input[type=range]::-webkit-slider-thumb {
-	box-shadow: 0;
-	border: 0;
-	height: 19px;
-	width: 19px;
-	border-radius: 15px;
-	background: #03a9f4;
-	cursor: pointer;
-	-webkit-appearance: none;
-	margin-top: -6.5px;
-}
-input[type=range]::-moz-range-track {
-	width: 100%;
-	height: 5.2px;
-	cursor: pointer;
-	box-shadow: 0;
-	background: #c2c0c2;
-	border-radius: 0;
-	border: 0;
-}
-input[type=range]::-moz-range-thumb {
-	box-shadow: 0;
-	border: 0;
-	height: 19px;
-	width: 19px;
-	border-radius: 15px;
-	background: #03a9f4;
-	cursor: pointer;
-	-webkit-appearance: none;
-	margin-top: -6.5px;
-}
-
-input[type=range]::-ms-track {
-	width: 100%;
-	height: 5.2px;
-	cursor: pointer;
-	box-shadow: 0;
-	background: #c2c0c2;
-	border-radius: 1.3px;
-}
-input[type=range]::-ms-fill-lower {
-	background: #c2c0c2;
-	border: 0;
-	border-radius: 0;
-	box-shadow: 0;
-}
-input[type=range]::-ms-fill-upper {
-	background: #c2c0c2;
-	border: 0;
-	border-radius: 0;
-	box-shadow: 0;
-}
-input[type=range]::-ms-thumb {
-	box-shadow: 0;
-	border: 0;
-	height: 15px;
-	width: 15px;
-	border-radius: 15px;
-	background: #03a9f4;
-	cursor: pointer;
-	-webkit-appearance: none;
-	margin-top: 1.5px;
-}
-
-body {
-	background-color: #f5f5f5;
-}
-
-
-h1, h2, h3, h4, h5, h6 {
-	font-weight: 400;
-	line-height: 1.1;
-}
-
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
-	font-weight: inherit;
-}
-
-h1 {
-	font-size: 4.2rem;
-	line-height: 110%;
-	margin: 2.1rem 0 1.68rem 0;
-}
-
-h2 {
-	font-size: 3.56rem;
-	line-height: 110%;
-	margin: 1.78rem 0 1.424rem 0;
-}
-
-h3 {
-	font-size: 2.92rem;
-	line-height: 110%;
-	margin: 1.46rem 0 1.168rem 0;
-}
-
-h4 {
-	font-size: 2.28rem;
-	line-height: 110%;
-	margin: 1.14rem 0 0.912rem 0;
-}
-
-h5 {
-	font-size: 1.64rem;
-	line-height: 110%;
-	margin: 0.82rem 0 0.656rem 0;
-}
-
-h6 {
-	font-size: 1rem;
-	line-height: 110%;
-	margin: 0.5rem 0 0.4rem 0;
-}
-
-.thin {
-	font-weight: 200;
-}
-
-.left {
-	float: left !important;
-}
-
-.right {
-	float: right !important;
-}
-
-.light-blue {
-	background-color: #03a9f4 !important;
-}
-
-.white {
-	background-color: #FFFFFF !important;
-}