Hide experimental changes, improved tooltips, altered queue design

frontend/components/Sidebars/SongsList.vue

@@ -27,17 +27,13 @@
 
 			<article class="media" v-for='song in $parent.songsList'>
 				<div class="media-content">
-					<div class="content">
-						<p>
-							<strong>{{ song.title }}</strong>
-							<br>
+					<div class="content" style="display: block;">
+							<strong class="songTitle">{{ song.title }}</strong>
 							<small>{{ song.artists.join(', ') }}</small>
 							<div v-if="this.$parent.$parent.type === 'community'">
-								<br>
 								<small>Requested by <b>{{this.$parent.$parent.$parent.getUsernameFromId(song.requestedBy)}} {{this.userIdMap[song.requestedBy]}}</b></small>
-								<button class="button" @click="removeFromQueue(song.songId)" v-if="isOwnerOnly() || isAdminOnly()">REMOVE</button>
+								<i class="material-icons" style="vertical-align: middle;" @click="removeFromQueue(song.songId)" v-if="isOwnerOnly() || isAdminOnly()">delete_forever</i>
 							</div>
-						</p>
 					</div>
 				</div>
 				<div class="media-right">
@@ -101,7 +97,7 @@
 		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 	}
 
-	.inner-wrapper {	
+	.inner-wrapper {
 		top: 64px;
 		position: relative;
 		overflow: auto;
@@ -132,7 +128,7 @@
 	}
 
 	.content p strong { word-break: break-word; }
-	
+
 	.content p small { word-break: break-word; }
 
 	.add-to-queue {
@@ -156,8 +152,20 @@
 	.add-to-queue.add-to-queue-disabled:focus {
 		background-color: gray;
 	}
-	
+
 	.add-to-queue:focus { background: #029ce3; }
 
 	.media-right { line-height: 64px; }
-</style>
+
+	.songTitle {
+		word-wrap: break-word;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-height: 20px;
+		max-height: 40px;
+	}
+
+</style>

frontend/components/Station/CommunityHeader.vue

@@ -99,7 +99,7 @@
 				</a>
 				<hr>
 			</div>
-			<a class="sidebar-item mobile-only" href='#' @click='$parent.toggleSidebar("songslist")' v-if='$parent.station.partyMode === true'>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("songslist")'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>

frontend/components/Station/OfficialHeader.vue

@@ -111,7 +111,7 @@
 				</a>
 				<hr>
 			</div>
-			<a class="sidebar-item mobile-only" href='#' @click='$parent.toggleSidebar("songslist")'>
+			<a class="sidebar-item" href='#' @click='$parent.toggleSidebar("songslist")'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>

frontend/components/Station/Station.vue

@@ -26,7 +26,7 @@
 			<h1 v-if='type === "community" && !station.partyMode && $parent.userId === station.owner && station.privatePlaylist'>Maybe you can add some songs to your selected private playlist and then press the skip button</h1>
 		</div>
 		<div class="columns" v-show="!noSong">
-			<div class="column is-7-desktop is-offset-1-desktop is-12-mobile">
+			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="video-container">
 					<div id="player"></div>
 				</div>
@@ -34,7 +34,7 @@
 					<div class="seeker-bar light-blue" style="width: 0%;"></div>
 				</div>
 			</div>
-			<div class="desktop-only column is-3-desktop card playlistCard">
+			<div class="desktop-only column is-3-desktop card playlistCard experimental">
 				<div class='title' v-if='type === "community"'>Queue</div>
 				<div class='title' v-else>Playlist</div>
 				<article class="media" v-if="!noSong">
@@ -82,7 +82,7 @@
 			</div>
 		</div>
 		<div class="desktop-only columns is-mobile" v-show="!noSong">
-			<div class="column is-7-desktop is-offset-1-desktop is-12-mobile">
+			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="columns is-mobile">
 					<div class="column is-12-desktop">
 						<h4 id="time-display">{{timeElapsed}} / {{formatTime(currentSong.duration)}}</h4>
@@ -113,7 +113,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="column is-3-desktop" v-if="!simpleSong">
+					<div class="column is-3-desktop experimental" v-if="!simpleSong">
 						<img class="image" :src="currentSong.thumbnail" alt="Song Thumbnail" onerror="this.src='/assets/notes-transparent.png'" />
 					</div>
 				</div>
@@ -1167,4 +1167,8 @@
 		0% { transform: rotate(0deg); }
 		100% { transform: rotate(360deg); }
 	}
+
+	.experimental {
+		display: none !important;
+	}
 </style>

frontend/components/pages/Home.vue

@@ -21,7 +21,7 @@
 					</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="station.privacy !== 'public'" title="This station is not visible to other users." style="border-right: 1px solid #4a4a4a;padding-right: 3px;">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>
@@ -53,8 +53,8 @@
 						{{ 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" v-if="station.privacy !== 'public'" title="This station is not visible to other users." style="border-right: 1px solid #4a4a4a;padding-right: 3px;">lock</i>
+ 						<i class="material-icons" v-if="isOwner(station)" title="This is your station." style="border-right: 1px solid #4a4a4a;padding-right: 3px;">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>
@@ -253,13 +253,13 @@
 		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);
 	}
 
-	.isPrivate {
+	/*.isPrivate {
 		background-color: #F8BBD0;
 	}
 
 	.isMine {
 		background-color: #29B6F6;
-	}
+	}*/
 
 	.community-button {
 		cursor: pointer;