Moved report button and desktop queue

frontend/components/Station/OfficialHeader.vue

@@ -97,6 +97,12 @@
 					<span class="skip-votes">{{$parent.currentSong.skipVotes}}</span>
 					<span class="icon-purpose">Skip current song</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>
+					<span class="icon-purpose">Report a song</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>
@@ -105,7 +111,7 @@
 				</a>
 				<hr>
 			</div>
-			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("songslist")'>
+			<a class="sidebar-item mobile-only" href='#' @click='$parent.toggleSidebar("songslist")'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>
@@ -117,13 +123,6 @@
 				</span>
 				<span class="icon-purpose">Display users in the station</span>
 			</a>
-			<hr>
-			<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>
-				<span class="icon-purpose">Report a song</span>
-			</a>
 		</div>
 	</div>
 </template>
@@ -256,6 +255,25 @@
 		@media (max-width: 998px) {
 			display: none;
 		}
+		.inner-wrapper {
+			@media (min-width: 999px) {
+				.mobile-only {
+					display: none;
+				}
+				.desktop-only {
+					display: flex;
+				}
+			}
+			@media (max-width: 998px) {
+				.mobile-only {
+					display: flex;
+				}
+				.desktop-only {
+					display: none;
+					visibility: hidden;
+				}
+			}
+		}
 	}
 
 	.show-controlBar {

frontend/components/Station/Station.vue

@@ -787,6 +787,10 @@
 
 		.playlistCard {
 			margin: 10px;
+			position: relative;
+			padding-bottom: calc(31.25% + 7px);
+			height: 0;
+			overflow-y: scroll;
 
 			.title {
 				background-color: rgb(3, 169, 244);
@@ -800,6 +804,7 @@
 
 			.media-content .content {
 				min-height: 64px;
+				max-height: 64px;
 				display: flex;
 				align-items: center;
 			}

frontend/components/pages/Home.vue

@@ -21,6 +21,8 @@
 					</div>
 
 					<div class="under-content">
+						<i class="material-icons" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock | </i>
+
 						<i class='material-icons' title="How many users there are in the station.">people</i>
 						<span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
 					</div>
@@ -51,6 +53,9 @@
 						{{ station.description }}
 					</div>
 					<div class="under-content">
+						<i class="material-icons" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock | </i>
+ 						<i class="material-icons" v-if="isOwner(station)" title="This is your station.">home | </i>
+
 						<i class='material-icons' title="How many users there are in the station.">people</i>
 						<span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
 					</div>
@@ -201,6 +206,9 @@
 		bottom: 0;
 		position: absolute;
 		margin-bottom: 10px;
+		line-height: 1;
+	    font-size: 24px;
+	    vertical-align: middle;
 
 		* {
 			z-index: 10;