Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Display title and artist name on track hover.

  • Loading branch information...
commit 1d999967f91523bcd8fff3afd137f2d135d1766b 1 parent 63bc5b6
Alexis Bernard authored
View
20 app/assets/stylesheets/base.css
@@ -55,6 +55,24 @@ a:active { color: #666; }
z-index: 100;
}
+.track .details {
+ visibility: hidden;
+ background: #000;
+ opacity: 0.66;
+ font-size: 0.66em;
+ padding: 5px;
+ width: auto;
+}
+
+.track:hover .details {
+ visibility: visible;
+}
+
+.track .details .title {
+ font-weight: bold;
+ color: #EEE;
+}
+
.track .iconic { display: none }
.track.paused .play { display: block; }
@@ -97,7 +115,7 @@ a:active { color: #666; }
/* TODO: Hackish center */
width: 64px;
height: 64px;
- top: 68px;
+ top: 20px;
display: block;
position: relative;
margin: 0 auto;
View
4 app/views/favorites/_favorite.html.erb
@@ -9,6 +9,10 @@
data-title="<%= favorite.track.title %>"
data-artist="<%= favorite.track.artist %>"
style="background-image: url('<%= favorite.track.cover_url %>')">
+ <div class="details">
+ <span class="title"><%= favorite.track.title %></span><br/>
+ <span class="artist"><%= favorite.track.artist %></span>
+ </div>
<div class="primary controls">
<span class="iconic play" data-action="play" data-target="favorite_<%= favorite.id %>" title="Play"></span>
<span class="iconic pause" data-action="pause" data-target="favorite_<%= favorite.id %>" title="Pause"></span>
View
4 app/views/tracks/_track.html.erb
@@ -8,6 +8,10 @@
data-title="<%= track.title %>"
data-artist="<%= track.artist %>"
style="background-image: url('<%= track.cover_url %>')">
+ <div class="details">
+ <span class="title"><%= track.title %></span><br/>
+ <span class="artist"><%= track.artist %></span>
+ </div>
<div class="primary controls">
<span class="iconic play" data-action="play" data-target="track_<%= track.id %>" title="Play"></span>
<span class="iconic pause" data-action="pause" data-target="track_<%= track.id %>" title="Pause"></span>
Please sign in to comment.
Something went wrong with that request. Please try again.