feat(Profile): implemented new playlist tab design

frontend/components/Modals/Playlists/Edit.vue

@@ -170,11 +170,13 @@ import Toast from "toasters";
 import Modal from "../Modal.vue";
 import io from "../../../io";
 import validation from "../../../validation";
+import utils from "../../../js/utils";
 
 export default {
 	components: { Modal },
 	data() {
 		return {
+			utils,
 			playlist: { songs: [] },
 			songQueryResults: [],
 			searchSongQuery: "",
@@ -231,55 +233,12 @@ export default {
 		});
 	},
 	methods: {
-		formatTime(duration) {
-			if (duration <= 0) return "0 seconds";
-
-			const hours = Math.floor(duration / (60 * 60));
-			const formatHours = () => {
-				if (hours > 0) {
-					if (hours > 1) {
-						if (hours < 10) return `0${hours} hours `;
-						return `${hours} hours `;
-					}
-					return `0${hours} hour `;
-				}
-				return "";
-			};
-
-			const minutes = Math.floor((duration - hours * 60 * 60) / 60);
-			const formatMinutes = () => {
-				if (minutes > 0) {
-					if (minutes > 1) {
-						if (minutes < 10) return `0${minutes} minutes `;
-						return `${minutes} minutes `;
-					}
-					return `0${minutes} minute `;
-				}
-				return "";
-			};
-
-			const seconds = Math.floor(
-				duration - hours * 60 * 60 - minutes * 60
-			);
-			const formatSeconds = () => {
-				if (seconds > 0) {
-					if (seconds > 1) {
-						if (seconds < 10) return `0${seconds} seconds `;
-						return `${seconds} seconds `;
-					}
-					return `0${seconds} second `;
-				}
-				return "";
-			};
-
-			return formatHours() + formatMinutes() + formatSeconds();
-		},
 		totalLength() {
 			let length = 0;
 			this.playlist.songs.forEach(song => {
 				length += song.duration;
 			});
-			return this.formatTime(length);
+			return this.utils.formatTimeLong(length);
 		},
 		searchForSongs() {
 			let query = this.searchSongQuery;

frontend/components/User/Show.vue

@@ -83,17 +83,26 @@
 			</div>
 			<div class="content playlists-tab" v-if="activeTab === 'playlists'">
 				<div
-					class="playlist"
+					class="item playlist"
 					v-for="playlist in playlists"
 					:key="playlist._id"
 				>
-					<span>{{ playlist.displayName }}</span>
-					<button
-						class="button is-primary"
-						@click="editPlaylistClick(playlist._id)"
-					>
-						Edit
-					</button>
+					<div class="left-part">
+						<p class="top-text">{{ playlist.displayName }}</p>
+						<p class="bottom-text">
+							{{ totalLength(playlist) }} •
+							{{ playlist.songs.length }}
+							{{ playlist.songs.length === 1 ? "song" : "songs" }}
+						</p>
+					</div>
+					<div class="right-part">
+						<button
+							class="button is-primary"
+							@click="editPlaylistClick(playlist._id)"
+						>
+							Edit
+						</button>
+					</div>
 				</div>
 				<button
 					class="button is-primary"
@@ -104,7 +113,7 @@
 						})
 					"
 				>
-					Make new playlist
+					Create new playlist
 				</button>
 			</div>
 		</div>
@@ -119,6 +128,7 @@ import { format, parseISO } from "date-fns";
 import MainHeader from "../MainHeader.vue";
 import MainFooter from "../MainFooter.vue";
 import io from "../../io";
+import utils from "../../js/utils";
 
 export default {
 	components: {
@@ -129,6 +139,7 @@ export default {
 	},
 	data() {
 		return {
+			utils,
 			user: {},
 			notes: "",
 			isUser: false,
@@ -258,6 +269,13 @@ export default {
 			this.editPlaylist(playlistId);
 			this.openModal({ sector: "station", modal: "editPlaylist" });
 		},
+		totalLength(playlist) {
+			let length = 0;
+			playlist.songs.forEach(song => {
+				length += song.duration;
+			});
+			return this.utils.formatTimeLong(length);
+		},
 		...mapActions("modals", ["openModal"]),
 		...mapActions("user/playlists", ["editPlaylist"])
 	}
@@ -415,8 +433,47 @@ export default {
 	}
 
 	.content {
-		outline: 1px solid black;
+		// outline: 1px solid black;
 		width: 600px;
+
+		.item {
+			width: 100%;
+			height: 72px;
+			border: 0.5px $light-grey-2 solid;
+			margin-bottom: 12px;
+			border-radius: 5px;
+			padding: 12px;
+			display: flex;
+
+			.top-text {
+				color: $dark-grey-2;
+				font-size: 20px;
+				line-height: 23px;
+				margin-bottom: 0;
+			}
+
+			.bottom-text {
+				color: $dark-grey-2;
+				font-size: 16px;
+				line-height: 19px;
+				margin-bottom: 0;
+				margin-top: 6px;
+			}
+
+			.left-part {
+				flex: 1;
+			}
+
+			.right-part {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	.playlists-tab > button {
+		width: 100%;
+		font-size: 17px;
 	}
 }
 

frontend/js/utils.js

@@ -36,5 +36,46 @@ export default {
 			return `${hours}${hours ? ":" : ""}${minutes}:${seconds}`;
 		}
 		return false;
+	},
+	formatTimeLong: duration => {
+		if (duration <= 0) return "0 seconds";
+
+		const hours = Math.floor(duration / (60 * 60));
+		const formatHours = () => {
+			if (hours > 0) {
+				if (hours > 1) {
+					if (hours < 10) return `0${hours} hours `;
+					return `${hours} hours `;
+				}
+				return `0${hours} hour `;
+			}
+			return "";
+		};
+
+		const minutes = Math.floor((duration - hours * 60 * 60) / 60);
+		const formatMinutes = () => {
+			if (minutes > 0) {
+				if (minutes > 1) {
+					if (minutes < 10) return `0${minutes} minutes `;
+					return `${minutes} minutes `;
+				}
+				return `0${minutes} minute `;
+			}
+			return "";
+		};
+
+		const seconds = Math.floor(duration - hours * 60 * 60 - minutes * 60);
+		const formatSeconds = () => {
+			if (seconds > 0) {
+				if (seconds > 1) {
+					if (seconds < 10) return `0${seconds} seconds `;
+					return `${seconds} seconds `;
+				}
+				return `0${seconds} second `;
+			}
+			return "";
+		};
+
+		return formatHours() + formatMinutes() + formatSeconds();
 	}
 };