#641 -- Automatically truncate long song/artist titles
This commit is contained in:
parent
2489d893fc
commit
3cb3f7bd30
|
@ -28,10 +28,10 @@ $vue_data_model = [
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
<h4 class="media-heading">
|
<h4 class="media-heading might-overflow nowplaying-title">
|
||||||
{{ np.now_playing.song.title }}
|
{{ np.now_playing.song.title }}
|
||||||
</h4>
|
</h4>
|
||||||
<div>
|
<div class="nowplaying-artist might-overflow">
|
||||||
{{ np.now_playing.song.artist }}
|
{{ np.now_playing.song.artist }}
|
||||||
</div>
|
</div>
|
||||||
<div class="nowplaying-progress" v-if="time_display">
|
<div class="nowplaying-progress" v-if="time_display">
|
||||||
|
@ -95,4 +95,4 @@ $(function() {
|
||||||
|
|
||||||
setInterval(iterateTimer, 1000);
|
setInterval(iterateTimer, 1000);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"dist/app.min.js": "dist/app-00181489b8.min.js",
|
"dist/app.min.js": "dist/app-0bd230d4a5.min.js",
|
||||||
"dist/dark.css": "dist/dark-40b72754e4.css",
|
"dist/dark.css": "dist/dark-dcee7af86c.css",
|
||||||
"dist/light.css": "dist/light-cbf9b4c9b6.css"
|
"dist/light.css": "dist/light-70c58ca500.css"
|
||||||
}
|
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -6,11 +6,7 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-shadow:
|
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 4px #000;
|
||||||
-1px -1px 0 #000,
|
|
||||||
1px -1px 0 #000,
|
|
||||||
-1px 1px 0 #000,
|
|
||||||
1px 1px 0 #000;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -46,4 +46,19 @@
|
||||||
.stations {
|
.stations {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Pulled from:
|
||||||
|
// https://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated
|
||||||
|
|
||||||
|
.might-overflow {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow : hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-overflow: clip;
|
||||||
|
white-space: normal;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue