Browse Source

Fixed verified song icon being hidden when title overflow cropped

Owen Diffey 3 years ago
parent
commit
3cfb985154
1 changed files with 22 additions and 16 deletions
  1. 22 16
      frontend/src/components/SongItem.vue

+ 22 - 16
frontend/src/components/SongItem.vue

@@ -4,16 +4,18 @@
 			<song-thumbnail :class="{ large: largeThumbnail }" :song="song" />
 			<song-thumbnail :class="{ large: largeThumbnail }" :song="song" />
 			<div class="song-info">
 			<div class="song-info">
 				<h6 v-if="header">{{ header }}</h6>
 				<h6 v-if="header">{{ header }}</h6>
-				<h4
-					class="item-title"
-					:style="
-						song.artists && song.artists.length < 1
-							? { fontSize: '16px' }
-							: null
-					"
-					:title="song.title"
-				>
-					{{ song.title }}
+				<div class="song-title">
+					<h4
+						class="item-title"
+						:style="
+							song.artists && song.artists.length < 1
+								? { fontSize: '16px' }
+								: null
+						"
+						:title="song.title"
+					>
+						{{ song.title }}
+					</h4>
 					<i
 					<i
 						v-if="song.status === 'verified'"
 						v-if="song.status === 'verified'"
 						class="material-icons verified-song"
 						class="material-icons verified-song"
@@ -22,7 +24,7 @@
 					>
 					>
 						check_circle
 						check_circle
 					</i>
 					</i>
-				</h4>
+				</div>
 				<h5
 				<h5
 					class="item-description"
 					class="item-description"
 					v-if="song.artists"
 					v-if="song.artists"
@@ -265,11 +267,15 @@ export default {
 			font-family: Karla, Arial, sans-serif;
 			font-family: Karla, Arial, sans-serif;
 		}
 		}
 
 
-		h6 {
-			color: var(--primary-color) !important;
-			font-weight: bold;
-			font-size: 17px;
-			margin-bottom: 5px;
+		.song-title {
+			display: flex;
+			flex-direction: row;
+			h6 {
+				color: var(--primary-color) !important;
+				font-weight: bold;
+				font-size: 17px;
+				margin-bottom: 5px;
+			}
 		}
 		}
 
 
 		.song-request-time {
 		.song-request-time {