Added station control sidebars, cleaned nav bar and move add to playlist button

Still need to make sidebar fully responsive, this will be done with the
alterations to the rest of the station. Theres also a padding issue I
know about and will fix but atm I just want to sleep.

frontend/components/Station/CommunityHeader.vue

@@ -4,37 +4,8 @@
 			<a class='nav-item logo' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
 				Musare
 			</a>
-			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.editStation()'>
-				<span class='icon'>
-					<i class='material-icons'>settings</i>
-				</span>
-			</a>
-			<a v-if='isOwner()' class='nav-item' href='#' @click='$parent.skipStation()'>
-				<span class='icon'>
-					<i class='material-icons'>skip_next</i>
-				</span>
-			</a>
-			<a v-if='!isOwner() && $parent.$parent.loggedIn && !$parent.noSong' class='nav-item' href='#' @click='$parent.voteSkipStation()'>
-				<span class='icon'>
-					<i class='material-icons'>skip_next</i>
-				</span>
-				<span class="skip-votes">{{ $parent.currentSong.skipVotes }}</span>
-			</a>
-			<a class='nav-item' href='#' v-if='isOwner() && $parent.paused' @click='$parent.resumeStation()'>
-				<span class='icon'>
-					<i class='material-icons'>play_arrow</i>
-				</span>
-			</a>
-			<a class='nav-item' href='#' v-if='isOwner() && !$parent.paused' @click='$parent.pauseStation()'>
-				<span class='icon'>
-					<i class='material-icons'>pause</i>
-				</span>
-			</a>
-			<a v-if='$parent.$parent.loggedIn && !$parent.noSong && !$parent.simpleSong' class='nav-item' href='#' @click='$parent.modals.report = !$parent.modals.report'>
-				<span class='icon'>
-					<i class='material-icons'>report</i>
-				</span>
-			</a>
+
+
 		</div>
 
 		<div class='nav-center stationDisplayName'>
@@ -48,28 +19,71 @@
 		</span>
 
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
-			<a class='nav-item' href='#' @click='$parent.toggleSidebar("songslist")' v-if='$parent.station.partyMode === true'>
+			<!-- DUPLICATE BUTTON TO HOLD FORMATTING -->
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
-					<i class='material-icons'>queue_music</i>
+					<i class='material-icons'>people</i>
 				</span>
 			</a>
-			<!--<a class='nav-item' href='#'>
+		</div>
+	</nav>
+	<div class="admin-sidebar">
+		<div class='inner-wrapper'>
+			<hr class="sidebar-top-hr">
+			<div v-if='isOwner()'>
+				<a class="sidebar-item" href='#' v-if='isOwner()' @click='$parent.editStation()'>
+					<span class='icon'>
+						<i class='material-icons'>settings</i>
+					</span>
+				</a>
+				<a v-if='isOwner()' class="sidebar-item" href='#' @click='$parent.skipStation()'>
+					<span class='icon'>
+						<i class='material-icons'>skip_next</i>
+					</span>
+				</a>
+				<a class="sidebar-item" href='#' v-if='isOwner() && $parent.paused' @click='$parent.resumeStation()'>
+					<span class='icon'>
+						<i class='material-icons'>play_arrow</i>
+					</span>
+				</a>
+				<a class="sidebar-item" href='#' v-if='isOwner() && !$parent.paused' @click='$parent.pauseStation()'>
+					<span class='icon'>
+						<i class='material-icons'>pause</i>
+					</span>
+				</a>
+				<hr>
+			</div>
+			<div v-if="$parent.$parent.loggedIn && !$parent.noSong">
+				<a v-if='!isOwner() && $parent.$parent.loggedIn && !$parent.noSong' class="sidebar-item" href='#' @click='$parent.voteSkipStation()'>
+					<span class='icon'>
+						<i class='material-icons'>skip_next</i>
+					</span>
+					<span class="skip-votes">{{ $parent.currentSong.skipVotes }}</span>
+				</a>
+				<a v-if='$parent.$parent.loggedIn && !$parent.noSong' class="sidebar-item" href='#' @click='$parent.modals.addSongToPlaylist = true'>
+					<span class='icon'>
+						<i class='material-icons'>playlist_add</i>
+					</span>
+				</a>
+				<hr>
+			</div>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("songslist")' v-if='$parent.station.partyMode === true'>
 				<span class='icon'>
-					<i class='material-icons'>chat</i>
+					<i class='material-icons'>queue_music</i>
 				</span>
-			</a>-->
-			<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
+			</a>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
 					<i class='material-icons'>people</i>
 				</span>
 			</a>
-			<a class='nav-item' href='#' @click='$parent.toggleSidebar("playlist")' v-if='$parent.$parent.loggedIn'>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("playlist")' v-if='$parent.$parent.loggedIn'>
 				<span class='icon'>
 					<i class='material-icons'>library_music</i>
 				</span>
 			</a>
 		</div>
-	</nav>
+	</div>
 </template>
 
 <script>
@@ -140,4 +154,49 @@
 		background: #03a9f4;
     	border: 0;
 	}
+
+	.admin-sidebar {
+		position: fixed;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		width: 64px;
+		height: 100vh;
+		background-color: #03a9f4;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	.inner-wrapper {
+		top: 64px;
+		position: relative;
+	}
+
+	.admin-sidebar .material-icons {
+		width: 100%;
+		font-size: 2rem;
+	}
+	.admin-sidebar .sidebar-item {
+		font-size: 2rem;
+		height: 50px;
+		color: white;
+		-webkit-box-align: center;
+		-ms-flex-align: center;
+		align-items: center;
+		display: -webkit-box;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-box-flex: 0;
+		-ms-flex-positive: 0;
+		flex-grow: 0;
+		-ms-flex-negative: 0;
+		flex-shrink: 0;
+		-webkit-box-pack: center;
+		-ms-flex-pack: center;
+		justify-content: center;
+		width: 100%;
+
+	}
+	.admin-sidebar .sidebar-top-hr {
+		margin: 0 0 20px 0;
+	}
 </style>

frontend/components/Station/OfficialHeader.vue

@@ -4,42 +4,6 @@
 			<a class='nav-item logo' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
 				Musare
 			</a>
-			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.editStation()'>
-				<span class='icon'>
-					<i class='material-icons'>settings</i>
-				</span>
-			</a>
-			<a class='nav-item' href='#' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue' v-if='$parent.type === "official" && $parent.$parent.loggedIn'>
-				<span class='icon'>
-					<i class='material-icons'>queue_music</i>
-				</span>
-			</a>
-			<a v-if='isOwner()' class='nav-item' href='#' @click='$parent.skipStation()'>
-				<span class='icon'>
-					<i class='material-icons'>skip_next</i>
-				</span>
-			</a>
-			<a v-if='!isOwner() && $parent.$parent.loggedIn && !$parent.noSong' class='nav-item' href='#' @click='$parent.voteSkipStation()'>
-				<span class='icon'>
-					<i class='material-icons'>skip_next</i>
-				</span>
-				<span class="skip-votes">{{$parent.currentSong.skipVotes}}</span>
-			</a>
-			<a class='nav-item' href='#' v-if='isOwner() && $parent.paused' @click='$parent.resumeStation()'>
-				<span class='icon'>
-					<i class='material-icons'>play_arrow</i>
-				</span>
-			</a>
-			<a class='nav-item' href='#' v-if='isOwner() && !$parent.paused' @click='$parent.pauseStation()'>
-				<span class='icon'>
-					<i class='material-icons'>pause</i>
-				</span>
-			</a>
-			<a v-if='$parent.$parent.loggedIn && !$parent.noSong && !$parent.simpleSong' class='nav-item' href='#' @click='$parent.modals.report = !$parent.modals.report'>
-				<span class='icon'>
-					<i class='material-icons'>report</i>
-				</span>
-			</a>
 		</div>
 
 		<div class='nav-center stationDisplayName'>
@@ -53,23 +17,76 @@
 		</span>
 
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
+			<!-- DUPLICATE BUTTON TO HOLD FORMATTING -->
 			<a class='nav-item' href='#' @click='$parent.toggleSidebar("songslist")'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>
 			</a>
-			<!--<a class='nav-item' href='#'>
+		</div>
+	</nav>
+	<div class="admin-sidebar">
+		<div class='inner-wrapper'>
+			<hr class="sidebar-top-hr">
+			<div v-if='isOwner()'>
+				<a class="sidebar-item" href='#' v-if='isOwner()' @click='$parent.editStation()'>
+					<span class='icon'>
+						<i class='material-icons'>settings</i>
+					</span>
+				</a>
+				<a v-if='isOwner()' class="sidebar-item" href='#' @click='$parent.skipStation()'>
+					<span class='icon'>
+						<i class='material-icons'>skip_next</i>
+					</span>
+				</a>
+				<a class="sidebar-item" href='#' v-if='isOwner() && !$parent.paused' @click='$parent.pauseStation()'>
+					<span class='icon'>
+						<i class='material-icons'>pause</i>
+					</span>
+				</a>
+				<a class="sidebar-item" href='#' v-if='isOwner() && $parent.paused' @click='$parent.resumeStation()'>
+					<span class='icon'>
+						<i class='material-icons'>play_arrow</i>
+					</span>
+				</a>
+				<hr>
+			</div>
+			<div v-if="$parent.$parent.loggedIn">
+				<a class="sidebar-item" href='#' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue' v-if='$parent.type === "official" && $parent.$parent.loggedIn'>
+					<span class='icon'>
+						<i class='material-icons'>queue</i>
+					</span>
+				</a>
+				<a v-if='!isOwner() && $parent.$parent.loggedIn && !$parent.noSong' class="sidebar-item" href='#' @click='$parent.voteSkipStation()'>
+					<span class='icon'>
+						<i class='material-icons'>skip_next</i>
+					</span>
+					<span class="skip-votes">{{$parent.currentSong.skipVotes}}</span>
+				</a>
+				<a v-if='$parent.$parent.loggedIn && !$parent.noSong && !$parent.simpleSong' class="sidebar-item" href='#' @click='$parent.modals.report = !$parent.modals.report'>
+					<span class='icon'>
+						<i class='material-icons'>report</i>
+					</span>
+				</a>
+				<a v-if='$parent.$parent.loggedIn && !$parent.noSong' class="sidebar-item" href='#' @click='$parent.modals.addSongToPlaylist = true'>
+					<span class='icon'>
+						<i class='material-icons'>playlist_add</i>
+					</span>
+				</a>
+				<hr>
+			</div>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("songslist")'>
 				<span class='icon'>
-					<i class='material-icons'>chat</i>
+					<i class='material-icons'>queue_music</i>
 				</span>
-			</a>-->
-			<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
+			</a>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
 					<i class='material-icons'>people</i>
 				</span>
 			</a>
 		</div>
-	</nav>
+	</div>
 </template>
 
 <script>
@@ -140,4 +157,49 @@
 		background: #03a9f4;
     	border: 0;
 	}
+
+	.admin-sidebar {
+		position: fixed;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		width: 64px;
+		height: 100vh;
+		background-color: #03a9f4;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	.inner-wrapper {
+		top: 64px;
+		position: relative;
+	}
+
+	.admin-sidebar .material-icons {
+		width: 100%;
+		font-size: 2rem;
+	}
+	.admin-sidebar .sidebar-item {
+		font-size: 2rem;
+		height: 50px;
+		color: white;
+		-webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+		width: 100%;
+
+	}
+	.admin-sidebar .sidebar-top-hr {
+		margin: 0 0 20px 0;
+	}
 </style>

frontend/components/Station/Station.vue

@@ -37,11 +37,6 @@
 		<div class="columns is-mobile" v-show="!noSong">
 			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="columns is-mobile">
-					<div class="column is-1-desktop add-to-playlist">
-						<span class="icon is-large" @click='modals.addSongToPlaylist = true'>
-							<i class="material-icons">playlist_add</i>
-						</span>
-					</div>
 					<div class="column is-11-desktop" v-bind:class="{'is-7-desktop': !simpleSong}">
 						<h4 id="time-display">{{timeElapsed}} / {{formatTime(currentSong.duration)}}</h4>
 						<h3>{{currentSong.title}}</h3>