diff options
| -rw-r--r-- | static/base.css | 18 | ||||
| -rw-r--r-- | static/script.js | 5 | ||||
| -rw-r--r-- | templates/p.html | 32 |
3 files changed, 37 insertions, 18 deletions
diff --git a/static/base.css b/static/base.css index d2a4ada..df3d295 100644 --- a/static/base.css +++ b/static/base.css @@ -1,7 +1,7 @@ body { background-color: #000; color: #ccc; - font-family: sans-serif; + font-family: 'Cantarell', sans-serif; } a:link, a:visited { color: #08a; @@ -21,6 +21,10 @@ header, article { margin: 20px auto; } +img.aa { + opacity: 0.9; +} + object#player { position: absolute; left: -1px; @@ -32,8 +36,12 @@ section.song { padding: 15px 20px; margin-top: 10px; } -section.song .info { +section.song div.info { margin-bottom: 10px; + float: left; +} +section.song div.user { + float: right; } section.song div.thumb { float: left; @@ -47,6 +55,12 @@ section.song canvas, section.song > img { section.song > img[src$='pause.png'] { display: none; } +section.song > img { + opacity: 0.5; +} +section.song > img:hover { + opacity: 1.0; +} .clear { line-height: 0; diff --git a/static/script.js b/static/script.js index 21e01d0..1a10f88 100644 --- a/static/script.js +++ b/static/script.js @@ -76,13 +76,14 @@ function pause(yid) { if (current_id != yid) return player.pauseVideo(); - showPlay(yid) + showPlay(yid); } function stop(yid) { if (current_id != yid) return player.stopVideo(); - showPlay(yid) + showPlay(yid); + drawBar(yid); } function showPlay(yid) { diff --git a/templates/p.html b/templates/p.html index af095d1..0260871 100644 --- a/templates/p.html +++ b/templates/p.html @@ -3,29 +3,33 @@ <head> <meta charset="UTF-8"> <title>Audio Axis</title> + <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'> <link href="/static/base.css" rel="stylesheet"> </head> <body> <header> - <img src="/static/audioaxis-white.png" alt="Audio Axis"> + <img src="/static/audioaxis-white.png" alt="Audio Axis" class="aa"> </header> <article> {{range .Songs}} <section class="song"> - <div class="info"> - <a href="http://www.youtube.com/watch?v={{.Yid}}">{{.Name}}</a> - {{.User}} - </div> - <div class="thumb"> - <img src="http://i.ytimg.com/vi/{{.Yid}}/1.jpg" alt="{{.Name}}"> - </div> - <canvas id="{{.Yid}}" width="700" height="20"></canvas> - <br> - <img src="/static/player_play.png" alt="Play" onclick="play('{{.Yid}}')" id="play_{{.Yid}}"> - <img src="/static/player_pause.png" alt="Pause" onclick="pause('{{.Yid}}')" id="pause_{{.Yid}}"> - <img src="/static/player_stop.png" alt="Stop" onclick="stop('{{.Yid}}')"> - <br class="clear"> + <div class="info"> + <a href="http://www.youtube.com/watch?v={{.Yid}}">{{.Name}}</a> + </div> + <div class="user"> + {{.User}} + </div> + <br class="clear"> + <div class="thumb"> + <img src="http://i.ytimg.com/vi/{{.Yid}}/1.jpg" alt="{{.Name}}"> + </div> + <canvas id="{{.Yid}}" width="700" height="20"></canvas> + <br> + <img src="/static/player_play.png" alt="Play" onclick="play('{{.Yid}}')" id="play_{{.Yid}}"> + <img src="/static/player_pause.png" alt="Pause" onclick="pause('{{.Yid}}')" id="pause_{{.Yid}}"> + <img src="/static/player_stop.png" alt="Stop" onclick="stop('{{.Yid}}')"> + <br class="clear"> </section> {{else}} No songs found |