diff --git a/app/assets/javascripts/.music_player.js.swo b/app/assets/javascripts/.music_player.js.swo new file mode 100644 index 0000000000000000000000000000000000000000..0c298efffb640fc2337f7b56d73c4b0909f1b01f Binary files /dev/null and b/app/assets/javascripts/.music_player.js.swo differ diff --git a/app/assets/javascripts/music_player.js b/app/assets/javascripts/music_player.js index 8d1ade0b60b5fcbba277f6c0499ce8325e916ab3..161d7d03b4dde823c832307a52a58e7c58c19dd6 100644 --- a/app/assets/javascripts/music_player.js +++ b/app/assets/javascripts/music_player.js @@ -1,5 +1,6 @@ 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); +} diff --git a/app/views/shared/._music.html.erb.swp b/app/assets/stylesheets/.music_index.css.swp similarity index 76% rename from app/views/shared/._music.html.erb.swp rename to app/assets/stylesheets/.music_index.css.swp index 7de8c0b5ec70c19b8cf878edc212195df87c3eff..0fb5045a9f2ae050c1d03772a132e72caf7d677f 100644 Binary files a/app/views/shared/._music.html.erb.swp and b/app/assets/stylesheets/.music_index.css.swp differ diff --git a/app/assets/stylesheets/music_index.css b/app/assets/stylesheets/music_index.css index 7176ecafaf107db19a833ee87a5296fc1e4f1ccd..ecc5763a187b160d476f90e8f2a4aeab953a8ad4 100644 --- a/app/assets/stylesheets/music_index.css +++ b/app/assets/stylesheets/music_index.css @@ -1,13 +1,12 @@ -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 diff --git a/app/views/layouts/.application.html.erb.swp b/app/views/layouts/.application.html.erb.swp index 1caf2a10765c22112bcad1804794860ce23a4401..be86fcde058000883890e6b2866bfe0a62704611 100644 Binary files a/app/views/layouts/.application.html.erb.swp and b/app/views/layouts/.application.html.erb.swp differ diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index fd88f04778b516c13526227c8343b567fcd482d1..10b5eac256ea6c2f6f48170bd2b7003e19e4fea7 100644 --- 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 %> diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb index f2321bff5f5e5baf86e5d36cccf42c8ebbfb1694..5e2650603f02bfd845b9db4d49cf5d84ab2314d0 100644 --- a/app/views/tags/index.html.erb +++ b/app/views/tags/index.html.erb @@ -1,4 +1,4 @@ <% @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 %>