hide sound preview title if too long

mrutherford92 · Feb 8, 2022 · 7ce5fc8 · 7ce5fc8
1 parent 095d53d
commit 7ce5fc8
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/examples/demos/onsets/src/components/FreesoundResult.vue b/examples/demos/onsets/src/components/FreesoundResult.vue
@@ -5,11 +5,13 @@
 			<b-icon v-show="playing" icon="pause"></b-icon>
 		</b-button>
 		<div id="middle-section">
-			<div id="titleLink">
-				<b-link :href="soundResource.url" target="_blank">
-					{{soundResource.name}}
-					<sup><b-icon icon="box-arrow-up-right"></b-icon></sup>
-				</b-link>
+			<div id="title-container">
+				<div id="titleLink">
+					<b-link :href="soundResource.url" target="_blank">
+						{{soundResource.name}}
+					</b-link>
+				</div>
+				<sup><b-icon icon="box-arrow-up-right"></b-icon></sup>
 			</div>
 			<div id="playbar-container">
 				<b-form-input type="range" id="playbar" :max="seekMax" 
@@ -108,15 +110,23 @@ export default {
 	}
 }
 
+#title-container {
+	white-space: nowrap;
+	width: 100%;
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 #titleLink {
+	display: inline-block;
 	font-size: 0.75rem;
 	min-width: 0;
-}
-
-#titleLink > a {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	width: 90%;
+	color: $primary;
 }
 
 #middle-section {