Browse Source

Fixed current/next up long title overflowing

Owen Diffey 3 years ago
parent
commit
9518cfb033
2 changed files with 15 additions and 12 deletions
  1. 1 10
      frontend/src/components/SongItem.vue
  2. 14 2
      frontend/src/pages/Station/index.vue

+ 1 - 10
frontend/src/components/SongItem.vue

@@ -5,7 +5,7 @@
 		v-if="song"
 	>
 		<div class="thumbnail-and-info">
-			<song-thumbnail :class="{ large: largeThumbnail }" :song="song" />
+			<song-thumbnail :song="song" />
 			<div class="song-info">
 				<h6 v-if="header">{{ header }}</h6>
 				<div class="song-title">
@@ -172,10 +172,6 @@ export default {
 			type: Boolean,
 			default: true
 		},
-		largeThumbnail: {
-			type: Boolean,
-			default: false
-		},
 		disabledActions: {
 			type: Array,
 			default: () => []
@@ -286,11 +282,6 @@ export default {
 		width: 65px;
 		height: 65px;
 		margin: -7.5px;
-		&.large {
-			min-width: 130px;
-			width: 130px;
-			height: 130px;
-		}
 	}
 
 	.song-info {

+ 14 - 2
frontend/src/pages/Station/index.vue

@@ -530,7 +530,6 @@
 								<song-item
 									:song="currentSong"
 									:duration="false"
-									:large-thumbnail="true"
 									:requested-by="
 										station.type === 'community' &&
 											station.partyMode === true
@@ -549,7 +548,6 @@
 								<song-item
 									:song="nextSong"
 									:duration="false"
-									:large-thumbnail="true"
 									:requested-by="
 										station.type === 'community' &&
 											station.partyMode === true
@@ -1862,6 +1860,20 @@ export default {
 	width: 100%;
 	height: 100%;
 }
+
+#currently-playing-container,
+#next-up-container {
+	.song-item {
+		.song-info {
+			width: calc(100% - 80px);
+		}
+		.thumbnail {
+			min-width: 130px;
+			width: 130px;
+			height: 130px;
+		}
+	}
+}
 </style>
 
 <style lang="scss" scoped>