diff --git a/assets/css/common.css.sass b/assets/css/common.css.sass index a68150e..eeac9df 100644 --- a/assets/css/common.css.sass +++ b/assets/css/common.css.sass @@ -2,4 +2,10 @@ @include box-sizing(border-box) body - font: 1em "Myriad Pro", sans-serif + font: 1em "Helvetica Neue", sans-serif + margin: 0 + +#app + max-width: 320px + margin: 0 auto + padding-bottom: 4.25em diff --git a/assets/css/controls.css.sass b/assets/css/controls.css.sass index 004d68a..49011b4 100644 --- a/assets/css/controls.css.sass +++ b/assets/css/controls.css.sass @@ -1,11 +1,17 @@ -#controls button - @extend .icon - font-size: 2em - width: 2em - padding: 0.5em +#transport + position: fixed + bottom: 0 + width: 20em + background: rgba(255, 255, 255, 0.9) text-align: center - border: none - border-radius: 0.25em - background: #ddd - &:hover - background: #aaa + button + @extend .icon + font-size: 2em + width: 23% + padding: 0.5em + text-align: center + border: none + background: none + color: black + &:hover, &:focus + text-shadow: 0 0 10px rgba(255, 255, 255, 1) diff --git a/assets/css/includes/colours.css.sass b/assets/css/includes/colours.css.sass new file mode 100644 index 0000000..293ad4d --- /dev/null +++ b/assets/css/includes/colours.css.sass @@ -0,0 +1 @@ +$highlight: #1E7BD9 diff --git a/assets/css/includes/fonts.css.sass b/assets/css/includes/fonts.css.sass index 24f9362..f9474e2 100644 --- a/assets/css/includes/fonts.css.sass +++ b/assets/css/includes/fonts.css.sass @@ -5,6 +5,7 @@ font-weight: normal font-style: normal + .icon font-family: 'icomoon' speak: none @@ -24,71 +25,83 @@ -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale -[class*="icon-"] +[class^="icon-"], [class*=" icon-"] @extend .icon .icon-music:before content: "\e600" -.icon-volume-off:before - content: "\e601" - -.icon-volume-down:before +.icon-fast-backward:before content: "\e602" -.icon-volume-up:before - content: "\e603" - -.icon-headphones:before +.icon-play:before content: "\e604" -.icon-step-backward:before +.icon-pause:before content: "\e605" -.icon-fast-backward:before +.icon-stop:before content: "\e606" -.icon-backward:before +.icon-fast-forward:before content: "\e607" -.icon-play:before - content: "\e608" - -.icon-pause:before +.icon-eject:before content: "\e609" -.icon-stop:before +.icon-chevron-left:before content: "\e60a" -.icon-forward:before +.icon-chevron-right:before content: "\e60b" -.icon-fast-forward:before +.icon-heart:before content: "\e60c" -.icon-step-forward:before +.icon-star:before content: "\e60d" -.icon-eject:before +.icon-star-empty:before content: "\e60e" -.icon-plus:before +.icon-ok:before content: "\e60f" -.icon-minus:before +.icon-remove:before content: "\e610" -.icon-cog:before +.icon-plus:before content: "\e611" -.icon-star:before +.icon-minus:before content: "\e612" -.icon-star-empty:before +.icon-chevron-up:before content: "\e613" -.icon-ok:before +.icon-chevron-down:before content: "\e614" -.icon-remove:before +.icon-cog:before content: "\e615" + +.icon-info:before + content: "\e616" + +.icon-rocket:before + content: "\e617" + +.icon-headphones:before + content: "\e601" + +.icon-volume-off:before + content: "\e603" + +.icon-volume-down:before + content: "\e608" + +.icon-volume-up:before + content: "\e618" + +.icon-play-sign:before + content: "\e619" diff --git a/assets/css/mpd-client.css.sass b/assets/css/mpd-client.css.sass index 23b1760..a38c4fc 100644 --- a/assets/css/mpd-client.css.sass +++ b/assets/css/mpd-client.css.sass @@ -1,6 +1,7 @@ @import 'bourbon/bourbon' @import 'includes/fonts' +@import 'includes/colours' @import 'common' @import 'controls' @import 'queue' diff --git a/assets/css/queue.css.sass b/assets/css/queue.css.sass index 523889e..ebdb84c 100644 --- a/assets/css/queue.css.sass +++ b/assets/css/queue.css.sass @@ -1,2 +1,34 @@ -#queue .playing - font-weight: bold +#queue + ol + list-style: none + margin: 0 + padding: 0 + counter-reset: index + p + margin: 0 + .artist + font-size: 0.8em + .title + font-weight: bold + li + position: relative + padding: 10px + border-bottom: 1px solid #ddd + counter-increment: index + &:before + float: left + padding: 0.5em 1em 0.5em 0 + content: counter(index,decimal-leading-zero) + &.playing + .title + color: $highlight + &:before + font-weight: bold + &:after + @extend .icon + position: absolute + font-size: 1.25em + right: 10px + top: 10px + padding: 0.3em + content: "playing" diff --git a/assets/fonts/icomoon.eot b/assets/fonts/icomoon.eot old mode 100644 new mode 100755 index 0753398..77e0443 Binary files a/assets/fonts/icomoon.eot and b/assets/fonts/icomoon.eot differ diff --git a/assets/fonts/icomoon.svg b/assets/fonts/icomoon.svg old mode 100644 new mode 100755 index a849486..60d7a85 --- a/assets/fonts/icomoon.svg +++ b/assets/fonts/icomoon.svg @@ -7,51 +7,55 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/icomoon.ttf b/assets/fonts/icomoon.ttf old mode 100644 new mode 100755 index e9aef57..f9577b5 Binary files a/assets/fonts/icomoon.ttf and b/assets/fonts/icomoon.ttf differ diff --git a/assets/fonts/icomoon.woff b/assets/fonts/icomoon.woff old mode 100644 new mode 100755 index 4469118..ebc1d1c Binary files a/assets/fonts/icomoon.woff and b/assets/fonts/icomoon.woff differ diff --git a/public/views/queue.ejs b/public/views/queue.ejs index af6d8d3..f647cd7 100644 --- a/public/views/queue.ejs +++ b/public/views/queue.ejs @@ -1,8 +1,8 @@ -

Queue

-
    +
      <% list(queueSongs, function(song) { %>
    1. > - <%= song.attr('artist') %> - <%= song.attr('title') %> +

      <%= song.attr('title') %>

      +

      <%= song.attr('artist') %>

      2. <% }) %> -
+ diff --git a/views/index.erb b/views/index.erb index 2dc207e..51a8d61 100644 --- a/views/index.erb +++ b/views/index.erb @@ -2,17 +2,17 @@ MPD Client + <%= stylesheet_tag 'mpd-client' %> + <%= javascript_tag 'mpd-client' %> - -

MPD Client

- -
- -
- - <%= javascript_tag 'mpd-client' %> +
+
+
+
+
+