Menu improved : next track, hide/show player, position fixed.

631208ad · Sybil · f136fa3d · 631208ad · 631208ad · 631208ad
--- a/app/assets/javascripts/.music_player.js.swo
+++ b/app/assets/javascripts/.music_player.js.swo
--- a/app/assets/javascripts/music_player.js
+++ b/app/assets/javascripts/music_player.js
 var music_info;
 var player;
+var player_display = false;

 $( ".clickable_links" ).each(function() {
  if ($(this).data().player == "youtube" ) {
@@ -22,6 +23,8 @@ function youtube_click() {

 function youtube_player() {
  player_destroy();
+  player_button();
+  next_button();
  player = new YT.Player('player_block', {
    height: '390',
    width: '640',
@@ -69,6 +72,10 @@ function soundcloud_click() {
 function player_destroy() {
  $("#on_play").removeAttr("id");
  music_info.attr("id", "on_play");
+
+  $("#player").remove();
+  $("#next").remove();
+
  if (player) {
    if ($("#player_block").length == 0) {
      $("#player_position").append("<div id=\"player_block\"></div>");
@@ -97,6 +104,8 @@ function soundcloud_listener() {

 function soundcloud_player() {
  player_destroy();
+  player_button();
+  next_button();
  var music_url = "https://www.soundcloud.com/"+music_info.data().url;
  SC.oEmbed(music_url, { auto_play: true , maxheight: 120, maxwidth: 1000 }, function(oEmbed, error) {
    if (error) { 
@@ -110,3 +119,29 @@ function soundcloud_player() {
  });
 }

+function player_button(){
+  if (player_display) {
+    $(".menu").prepend("<span><a id=\"player\">Player [Hide]</a></span>");
+  }
+  else {
+    $(".menu").prepend("<span><a id=\"player\">Player [Show]</a></span>");
+  }
+
+  $("#player").on( 'click', function(){ 
+    if ( player_display ) {
+      $("#player_position").css("display", "none");
+      $("#player").html("Player [Show]");
+      player_display = false;
+    }
+    else {
+      $("#player_position").css("display", "block");
+      $("#player").html("Player [Hide]");
+      player_display = true;
+    }
+  });
+}
+
+function next_button(){
+  $(".menu").append("<span><a id=\"next\">Next</a></span>");
+  $("#next").on( 'click', next_music);
+}
--- a/app/views/shared/._music.html.erb.swp
+++ b/app/views/shared/._music.html.erb.swp
--- a/app/assets/stylesheets/music_index.css
+++ b/app/assets/stylesheets/music_index.css
-a, .clickable_links span{
+a, .page.current, .clickable_links span{
  display: inline-block;
  font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
  overflow: hidden;
  color: rgba(255,220,180,1);
-  font-weight: 550;
  vertical-align: middle;
 }

-a
+a, .page.current
 {
  text-decoration: none;
  /* 250 220 180 1*/
@@ -18,6 +17,7 @@ a
 .cloud{
  color: rgba(0, 110, 140, 0.95);
 }
+
 .cloud:hover{
  color: rgba(255,220,180,1);
  background-color: rgba(0, 110, 140, 0.95);
@@ -32,8 +32,8 @@ a:hover{
 ul
 {
  list-style-type: none;
-  margin: 5px;
-  padding: 0px;
+  padding: 0;
+  margin: 0;
 }

 .clickable_links
@@ -57,12 +57,6 @@ ul
 .page.current{
  background-color: rgba(255,220,180,1);
  color: rgba(0, 110, 140, 0.95);
-  display: inline-block;
-  font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-weight: 550;
-  vertical-align: middle;
-  border-radius:20px;
-  padding: 2px 6px;
 }

 .clickable_links:hover{
@@ -74,22 +68,42 @@ ul
 }

 .menu {
-  background-color: rgba(0, 110, 140, 1);
  margin: auto;
-  cursor: pointer;
-  border-radius: 12px;
-  width: 60%;
+  text-align: center;
+  background-color: rgba(0, 110, 140, 1);
+}
+#white{
+  height: 73px;
 }

+#header{
+  position:fixed;
+  width: 100%;
+  background-color: white;
+  padding: 10px 0;
+  margin: 0; 
+  top: 0;
+}
+
+body, html, head{
+  padding:0;
+  margin: 0;
+}
+
+
 .menu a{
-  width: 24.55%;
+  cursor: pointer;
+  width: 15%;
  padding: 15px 0;
-  border-radius: 12px;
  display: inline-block;
  font: 20px Helvetica Neue, Helvetica, Arial, sans-serif;
  overflow: hidden;
  vertical-align: middle;
-  text-align: center;
+  border-radius: 0;
+}
+
+#player_position{
+  display: none;
 }

 .music_id
@@ -110,7 +124,7 @@ ul

 .music_sender
 {
-  width: 10%;
+  width: 12%;
 }

 .music_tags

--- a/app/views/layouts/.application.html.erb.swp
+++ b/app/views/layouts/.application.html.erb.swp
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -6,6 +6,8 @@
  <%= csrf_meta_tags %>
 </head>
 <body>
+<div id="white"></div>
+<div id="header">
  <ul>
    <li class="menu">
    <span><a href="/musics">Home</a></span> 
@@ -14,8 +16,7 @@
    <span><a href="/tags">Tags</a></span> 
    </li>
  </ul>
-  <div id="player_position">
-    <div id="player_block"></div>
+    <div id="player_position"><div id="player_block"></div></div>
  </div>
 <%= yield %>


--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
 <% @tagcloud.each do |tag,weight| %>
-  <%= link_to tag, '/musics/tags/'+tag, style: "font-size:"+(15+weight*200).to_s+"px", class: "cloud" %>
+  <%= link_to tag, '/musics/tags/'+tag, style: "font-size:"+(15+weight*100).to_s+"px", class: "cloud" %>
 <% end %>