fix(Station page): improved users sidebar, small other fixes

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

frontend/dist/assets/social/github.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-183 277 245 240" style="enable-background:new -183 277 245 240;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#4A4A4A;}
+</style>
+<g>
+	<title>background</title>
+	<rect id="canvas_background" x="-184" y="276" class="st0" width="582" height="402"/>
+</g>
+<g>
+	<title>Layer 1</title>
+	<g id="svg_86">
+		<g id="svg_66" transform="matrix(1.1862952709197998,0,0,1.1862952709197998,27.944357648753794,19.726211432238415) ">
+			<title  fill="#4a4a4a">Layer 1</title>
+			<g id="svg_81" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_82" class="st1" d="M-55.3,376.9c-33.3,0-60.4-27-60.4-60.4c0-26.7,17.3-49.3,41.3-57.3c3-0.6,4.1,1.3,4.1,2.9
+					c0,1.4-0.1,6.2-0.1,11.2c-16.8-3.7-20.3,7.1-20.3,7.1c-2.7,7-6.7,8.8-6.7,8.8c-5.5,3.7,0.4,3.7,0.4,3.7c6.1-0.4,9.3-6.2,9.3-6.2
+					c5.4-9.2,14.1-6.6,17.6-5c0.5,3.9,2.1,6.6,3.8,8.1c-13.4,1.5-27.5,6.7-27.5,29.8c0,6.6,2.4,12,6.2,16.2c-0.6,1.5-2.7,7.7,0.6,16
+					c0,0,5.1,1.6,16.6-6.2c4.8,1.3,10,2,15.1,2c5.1,0,10.3-0.7,15.1-2c11.5,7.8,16.6,6.2,16.6,6.2c3.3-8.3,1.2-14.5,0.6-16
+					c3.9-4.2,6.2-9.6,6.2-16.2c0-23.2-14.1-28.3-27.6-29.8c2.2-1.9,4.1-5.5,4.1-11.2c0-8.1-0.1-14.6-0.1-16.6c0-1.6,1.1-3.5,4.1-2.9
+					c24,8,41.3,30.6,41.3,57.3C5.1,349.8-22,376.9-55.3,376.9"/>
+			</g>
+			<g id="svg_79" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_80" class="st1" d="M-92.8,290.2c-0.1-0.3-0.6-0.4-1-0.2c-0.4,0.2-0.7,0.6-0.5,0.9c0.1,0.3,0.6,0.4,1,0.2
+					C-92.9,290.9-92.7,290.5-92.8,290.2"/>
+			</g>
+			<g id="svg_77" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_78" class="st1" d="M-90.4,287.4c-0.3-0.3-0.9-0.1-1.2,0.3c-0.4,0.4-0.5,1-0.2,1.3c0.3,0.3,0.8,0.1,1.2-0.3
+					C-90.2,288.3-90.1,287.7-90.4,287.4"/>
+			</g>
+			<g id="svg_75" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_76" class="st1" d="M-88,284c-0.4-0.3-1,0-1.3,0.5c-0.4,0.5-0.4,1.2,0,1.4c0.4,0.3,1,0,1.4-0.5
+					C-87.6,284.9-87.6,284.2-88,284"/>
+			</g>
+			<g id="svg_73" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_74" class="st1" d="M-84.7,280.6c-0.3-0.4-1-0.3-1.6,0.2c-0.5,0.5-0.7,1.2-0.3,1.5c0.3,0.4,1,0.3,1.6-0.2
+					C-84.5,281.6-84.4,281-84.7,280.6"/>
+			</g>
+			<g id="svg_71" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_72" class="st1" d="M-80.2,278.6c-0.1-0.5-0.8-0.7-1.5-0.5c-0.7,0.2-1.1,0.8-1,1.2c0.1,0.5,0.8,0.7,1.5,0.5
+					C-80.5,279.7-80.1,279.1-80.2,278.6"/>
+			</g>
+			<g id="svg_69" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_70" class="st1" d="M-75.3,278.3c0-0.5-0.6-0.9-1.3-0.9c-0.7,0-1.3,0.4-1.3,0.9c0,0.5,0.6,0.9,1.3,0.9
+					C-75.9,279.2-75.3,278.8-75.3,278.3"/>
+			</g>
+			<g id="svg_67" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
+				<path id="svg_68" class="st1" d="M-70.7,279.1c0.1-0.5-0.4-1-1.1-1.1c-0.7-0.1-1.3,0.2-1.4,0.7c-0.1,0.5,0.4,1,1.1,1.1
+					C-71.4,279.8-70.8,279.6-70.7,279.1"/>
+			</g>
+		</g>
+	</g>
+	<g id="svg_22">
+	</g>
+</g>
+</svg>

frontend/src/components/modals/EditStation.vue

@@ -170,14 +170,13 @@
 						<br />
 
 						<div id="playlists">
-							<div
-								class="playlist"
+							<playlist-item
+								:playlist="playlist"
 								v-for="(playlist, index) in playlists"
 								:key="index"
 							>
-								<playlist-item :playlist="playlist">
-									<div slot="actions">
-										<!-- <a
+								<div slot="actions">
+									<!-- <a
 										class="button is-danger"
 										href="#"
 										@click="
@@ -193,20 +192,17 @@
 										>
 										Stop playing
 									</a> -->
-										<a
-											class="button is-success"
-											href="#"
-											@click="
-												selectPlaylist(playlist._id)
-											"
-											><i
-												class="material-icons icon-with-button"
-												>play_arrow</i
-											>Play in queue
-										</a>
-									</div>
-								</playlist-item>
-							</div>
+									<a
+										class="button is-success"
+										href="#"
+										@click="selectPlaylist(playlist._id)"
+										><i
+											class="material-icons icon-with-button"
+											>play_arrow</i
+										>Play in queue
+									</a>
+								</div>
+							</playlist-item>
 						</div>
 					</div>
 				</div>
@@ -416,7 +412,7 @@ import validation from "../../validation";
 
 export default {
 	components: { Modal, PlaylistItem },
-	props: { store: { type: Object, default: () => {} } },
+	props: { store: { type: String, default: "" } },
 	data() {
 		return {
 			genreInputValue: "",

frontend/src/components/ui/PlaylistItem.vue

@@ -50,7 +50,8 @@ export default {
 .playlist {
 	width: 100%;
 	height: 72px;
-	margin-bottom: 12px;
+	margin-bottom: 10px;
+	border: 0.5px $light-grey-2 solid;
 	border-radius: 5px;
 	display: flex;
 

frontend/src/pages/Settings/tabs/Profile.vue

@@ -115,10 +115,7 @@ export default {
 	}),
 	mounted() {
 		lofig.get("frontendDomain").then(frontendDomain => {
-			this.frontendDomain = frontendDomain;
-			this.notesUri = encodeURI(
-				`${this.frontendDomain}/assets/notes.png`
-			);
+			this.notesUri = encodeURI(`${frontendDomain}/assets/notes.png`);
 		});
 
 		io.getSocket(socket => {

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -28,7 +28,9 @@
 			</ul>
 		</aside>
 
-		<div v-else class="has-text-centered">No Playlists found</div>
+		<p v-else class="nothing-here">
+			No Playlists found
+		</p>
 
 		<a
 			class="button create-playlist"
@@ -152,6 +154,10 @@ export default {
 	padding: 10px;
 	border-radius: 0 0 5px 5px;
 
+	.nothing-here {
+		margin-bottom: 10px;
+	}
+
 	.icons-group {
 		display: flex;
 		align-items: center;
@@ -171,9 +177,6 @@ export default {
 
 .menu-list li {
 	align-items: center;
-	.playlist {
-		border: 0.5px $light-grey-2 solid;
-	}
 }
 
 .create-playlist {

frontend/src/pages/Station/components/Sidebar/Users.vue

@@ -3,12 +3,25 @@
 		<h5 class="has-text-centered">Total users: {{ userCount }}</h5>
 		<aside class="menu">
 			<ul class="menu-list">
-				<li v-for="(username, index) in users" :key="index">
+				<li v-for="(user, index) in users" :key="index">
 					<router-link
-						:to="{ name: 'profile', params: { username } }"
+						:to="{
+							name: 'profile',
+							params: { username: user.username }
+						}"
 						target="_blank"
 					>
-						{{ username }}
+						<img
+							:src="
+								user.avatar.url &&
+								user.avatar.type === 'gravatar'
+									? `${user.avatar.url}?d=${notesUri}&s=250`
+									: '/assets/notes.png'
+							"
+							onerror="this.src='/assets/notes.png'; this.onerror=''"
+						/>
+
+						{{ user.username }}
 					</router-link>
 				</li>
 			</ul>
@@ -20,10 +33,20 @@
 import { mapState } from "vuex";
 
 export default {
+	data() {
+		return {
+			notesUri: ""
+		};
+	},
 	computed: mapState({
 		users: state => state.station.users,
 		userCount: state => state.station.userCount
-	})
+	}),
+	mounted() {
+		lofig.get("frontendDomain").then(frontendDomain => {
+			this.notesUri = encodeURI(`${frontendDomain}/assets/notes.png`);
+		});
+	}
 };
 </script>
 
@@ -48,8 +71,36 @@ export default {
 	padding: 10px;
 	border-radius: 0 0 5px 5px;
 
-	.menu-list li a:hover {
-		color: #000 !important;
+	li {
+		margin-top: 10px;
+
+		a {
+			display: flex;
+			align-items: center;
+			padding: 5px 10px;
+			border: 0.5px $light-grey-2 solid;
+			border-radius: 5px;
+			cursor: pointer;
+			color: #000 !important;
+
+			&:hover {
+				background-color: #eee;
+			}
+
+			img {
+				background-color: #fff;
+				width: 35px;
+				height: 35px;
+				border-radius: 100%;
+				border: 2px solid $light-grey;
+				margin-right: 10px;
+			}
+		}
+	}
+
+	h5 {
+		font-size: 20px;
+		margin: 5px;
 	}
 }
 </style>

frontend/src/pages/Station/components/Sidebar/index.vue

@@ -24,9 +24,9 @@
 				My Playlists
 			</button>
 		</div>
-		<queue class="tab" v-if="tab === 'queue'" />
-		<users class="tab" v-if="tab === 'users'" />
-		<my-playlists class="tab" v-if="tab === 'my-playlists'" />
+		<queue class="tab" v-show="tab === 'queue'" />
+		<users class="tab" v-show="tab === 'users'" />
+		<my-playlists class="tab" v-show="tab === 'my-playlists'" />
 	</div>
 </template>
 

frontend/src/pages/Station/index.vue

@@ -1669,7 +1669,7 @@ export default {
 
 		#lower-row {
 			margin-top: 20px;
-			height: 90%;
+			height: calc(100% - 75px); // accounts for footer
 
 			.player-container.nothing-here {
 				border: 1px solid $light-grey-2;
@@ -1677,6 +1677,7 @@ export default {
 			}
 
 			.player-container {
+				height: inherit;
 				width: 1400px;
 				background-color: #fff;
 				display: flex;