added pictures, yellow eye controls, front page blogishness

chriserin · May 4, 2011 · 5f163af · 5f163af
1 parent 9b22dfd
commit 5f163af
Show file tree

Hide file tree

Showing 12 changed files with 238 additions and 61 deletions.
diff --git a/app/controllers/geronimo_controller.rb b/app/controllers/geronimo_controller.rb
@@ -7,11 +7,13 @@ def everything
 
   def index
     blog = Blog.latest_for_frontpage
-    @latest_front_page_blogpost = blog ? blog.blogtext : "Nothing to say"    
+    @latest_front_page_blogpost = blog ? blog.to_html : "Predators hunt you"    
     @next_show = Show.next_show
 	if(Track.where(:frontpage => true).count > 0)
 		@frontpage_audio_url = Track.where(:frontpage => true).first.recording.url
+		@tracks = Track.where(:frontpage => true).limit(4);
 	end
+	@pictures = Picture.all.shuffle
     render 'predators/home', :layout => 'simple'
   end
 

diff --git a/app/controllers/tracks_controller.rb b/app/controllers/tracks_controller.rb
@@ -13,8 +13,8 @@ def index
 
 	def frontpage
 		track = Track.find(params[:id])
-		frontpage_tracks = Track.where(:frontpage => true)
-		frontpage_tracks.first.toggle!(:frontpage) unless frontpage_tracks.count == 0
+		#frontpage_tracks = Track.where(:frontpage => true)
+		#frontpage_tracks.first.toggle!(:frontpage) unless frontpage_tracks.count == 0
 		track.toggle!(:frontpage)	
 		redirect_to :tracks
 	end

diff --git a/app/views/layouts/simple.html.erb b/app/views/layouts/simple.html.erb
@@ -4,7 +4,8 @@
   <title>Predators</title>
   <%= stylesheet_link_tag :all %>
   <%= javascript_include_tag :defaults %>
-  <%= javascript_include_tag 'jquery.jplayer.min' %>  
+  <%= javascript_include_tag 'jquery.jplayer.min' %>
+  <%= javascript_include_tag 'jquery.masonry' %>  
   <%= stylesheet_link_tag 'skin/jplayer.blue.monday', :media => 'screen' %>
   <%= csrf_meta_tag %>
 </head>

diff --git a/app/views/predators/_blogs.html.erb b/app/views/predators/_blogs.html.erb
@@ -0,0 +1,3 @@
+<div id="blogs_wrapper">
+	<%= raw @latest_front_page_blogpost %>
+</div>
diff --git a/app/views/predators/_pictures.html.erb b/app/views/predators/_pictures.html.erb
@@ -0,0 +1,15 @@
+<div id="pictures" class="front_page_section">
+	<div id="picture_wrapper">
+	<% @pictures.each do |picture| %>
+		<%= image_tag picture.image.url %>
+	<% end %>
+	</div>
+
+	<script type="text/javascript">
+
+	$(window).load(function(){
+		$('#picture_wrapper').masonry({ columnWidth: 25, saveOptions: false, animate: true });
+	});
+
+	</script>
+</div>
diff --git a/app/views/predators/_player.html.erb b/app/views/predators/_player.html.erb
@@ -0,0 +1,30 @@
+<div id="player_wrapper">
+
+
+		<% unless @frontpage_audio_url.nil?%>
+			<%= render 'tracks/player', :audio_url => @frontpage_audio_url %>
+		<% end %>
+
+<div class="eye leftEye play_button" id="play_control">
+	<div class="eyeContainer">
+		<div class="circle eyetop"></div>
+	</div>
+	<div class="eyeContainer">
+		<div class="circle eyebottom"></div>				
+	</div>	
+	<div class="playGraphic"></div>	
+</div>
+<div id="tracks_wrapper">
+	<%= render @tracks unless @tracks.nil? %>
+</div>
+<div class="eye rightEye play_button" id="pause_control">
+	<div class="eyeContainer">
+		<div class="circle eyetop"></div>
+	</div>
+	<div class="eyeContainer">
+		<div class="circle eyebottom"></div>				
+	</div>	
+	<div class="stopGraphic"></div>	
+</div>
+
+</div>
diff --git a/app/views/predators/_poster.html.erb b/app/views/predators/_poster.html.erb
@@ -0,0 +1,42 @@
+<div id="poster">
+	<script>
+		var padding_values_initial = [1, 2, 4, 6, 8, 10, 12, 14, 17, 20];
+		var padding_values_r = padding_values_initial.slice(0).reverse();
+		var padding_values_top = padding_values_r.concat([0]).concat(padding_values_initial);
+		var padding_values_bottom = padding_values_initial.concat([22]).concat(padding_values_r);
+
+		$(function(){
+			$("#upperjaw .tooth:first").css("padding-top", padding_values_top[20] * 4)
+			for(var i = 0; i < 20; i++)
+				$("#upperjaw .tooth:first").clone().insertAfter("#upperjaw .tooth:first").css("padding-top", 4 * padding_values_top[i]);
+
+			for(var j = 0; j < 20; j++)
+				$("#lowerjaw .tooth:first").clone().insertAfter("#lowerjaw .tooth:first").css("padding-top", 4 * padding_values_bottom[j]);		
+		});
+	</script>
+	<div id="wrapper">
+		<div id="teeth">
+			<div id="upperjaw">
+				<div class="tooth">
+					<div class="root"></div>
+					<div class="tip"></div>
+				</div>			
+			</div>
+			<div id="lowerjaw">
+				<div class="tooth">
+					<div class="tip"></div>
+					<div class="root"></div>
+				</div>
+			</div>
+		</div>
+
+		<div id="title" class="curtis tk_proxima_nova size140 standard">
+			<%= render('shared/title') %>
+		</div>
+		<div>	
+			<div id="next_show">
+				<%= raw @next_show.to_html unless @next_show.nil?  %>
+			</div>		
+		</div>
+	</div>
+</div>
diff --git a/app/views/predators/home.html.erb b/app/views/predators/home.html.erb
@@ -1,45 +1,4 @@
-<script>
-
-	var padding_values_initial = [1, 2, 4, 6, 8, 10, 12, 14, 17, 20];
-	var padding_values_r = padding_values_initial.slice(0).reverse();
-	var padding_values_top = padding_values_r.concat([0]).concat(padding_values_initial);
-	var padding_values_bottom = padding_values_initial.concat([22]).concat(padding_values_r);
-
-	$(function(){
-		$("#upperjaw .tooth:first").css("padding-top", padding_values_top[20] * 4)
-		for(var i = 0; i < 20; i++)
-			$("#upperjaw .tooth:first").clone().insertAfter("#upperjaw .tooth:first").css("padding-top", 4 * padding_values_top[i]);
-
-		for(var j = 0; j < 20; j++)
-			$("#lowerjaw .tooth:first").clone().insertAfter("#lowerjaw .tooth:first").css("padding-top", 4 * padding_values_bottom[j]);
-
-	});
-</script>
-<div id="wrapper">
-	<div id="teeth">
-		<div id="upperjaw">
-			<div class="tooth">
-				<div class="root"></div>
-				<div class="tip"></div>
-			</div>			
-		</div>
-		<div id="lowerjaw">
-			<div class="tooth">
-				<div class="tip"></div>
-				<div class="root"></div>
-			</div>
-		</div>
-	</div>
-
-	<div id="title" class="curtis tk_proxima_nova size140 standard">
-		<%= render('shared/title') %>
-	</div>
-	<div>	
-		<div id="next_show">
-			<%= raw @next_show.to_html unless @next_show.nil?  %>
-		</div>		
-	</div>	
-	<% unless @frontpage_audio_url.nil?%>
-		<%= render 'tracks/player', :audio_url => @frontpage_audio_url %>
-	<% end %>
-</div>
+<%= render 'predators/player' %>
+<%= render 'predators/poster' %>
+<%= render 'predators/blogs' %>
+<%= render 'predators/pictures' %>
diff --git a/app/views/tracks/_player.html.erb b/app/views/tracks/_player.html.erb
@@ -1,5 +1,5 @@
 <%
-	visibility = 'hidden' if local_assigns[:visibility].nil?
+	visibility = 'none' if local_assigns[:visibility].nil?
 %>
 
 <script type="text/javascript">
@@ -19,7 +19,7 @@ $(document).ready(function(){
 		supplied: "<%= file_format %>"
 	});
 
-	$(".jp-audio").css("visibility", "<%= visibility %>")
+	$(".jp-audio").css("display", "<%= visibility %>")
 });
 //]]>
 </script>
@@ -50,4 +50,4 @@ $(document).ready(function(){
 				<div id="jp_playlist_1" class="jp-playlist">
 				</div>
 			</div>
-		</div>
+		</div>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -38,7 +38,16 @@ $(function(){
 		$("#micropost_content").val($("#micropost_content").val() + filename);
 		$("#picture_chooser").css("z-index", -1);
 	});	
+
+	$("#play_control").bind('click', function(){
+		$("#jquery_jplayer_1").jPlayer("play");
+	});
 
+	$("#pause_control").bind('click', function(){
+		$("#jquery_jplayer_1").jPlayer("pause");
+	});	
+
+
 	$(".play_button").bind('click', function(e){
 
 		var filename = $(this).siblings('a').attr("href").split(/\?/)[0];
@@ -65,4 +74,6 @@ $(function(){
 		$("#jquery_jplayer_1").jPlayer("play");
 		$("#jp_playlist_1").html($(this).siblings('a').text());
 	});	
+
+	$(".circle").animate({ borderTopColor: '#EAFF00', borderLeftColor: '#EAFF00', borderRightColor: '#EAFF00', borderBottomColor: '#EAFF00' }, 'slow');
 });
diff --git a/public/stylesheets/predators.css b/public/stylesheets/predators.css
@@ -378,4 +378,123 @@ nav ul li a:hover {
 div.jp-interface
 {
 	background-color: #FFF!important;
-}
+}
+
+.front_page_section
+{
+	/*height: 20px;*/
+}
+
+#pictures
+{
+	background-color: rgba(255, 50, 50, 1.0);
+}
+
+#blogs_wrapper
+{
+	background-color: #1C3C0E;
+	color: white;
+}
+
+#player_wrapper
+{
+	width: 550px;
+	margin-left: auto;
+	margin-right: auto;	
+	position: relative;
+}
+
+#pause_control
+{
+
+}
+
+#play_control
+{
+
+}
+
+.eye
+{
+	height: 108px;
+	width: 166px;
+	position: absolute;
+	background-color: rgba(0, 200, 0, .0);
+}
+
+.eyeContainer
+{
+	height: 54px;
+	width: 166px;
+	background-color: rgba(200, 0, 0, .0);
+	overflow: hidden;
+}
+
+.circle
+{
+	border-color: rgba(255, 255, 0, 0.7);
+	border-width: 90px;
+	border-radius: 108px 108px;
+	-moz-border-radius: 108px 108px;
+	-webkit-border-radius: 108px 108px;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	position: relative;
+	z-index: 10;
+}
+
+.eyetop
+{
+	left: -7px;
+	top: 0px;
+}
+
+.eyebottom
+{
+	left: -7px;
+	top: -126px;	
+}
+
+.playGraphic
+{
+	border-left-color: black;
+	border-top-color: transparent;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	left: 65px;
+	top: 20px;
+	border-right-width: 0px;
+	border-top-width: 34px;
+	border-bottom-width: 34px;
+	border-left-width: 52px;
+	z-index: 15;
+	position: absolute;
+	height: 0px;
+	width: 0px;
+	border-style: solid;	
+}
+
+.stopGraphic
+{
+	left: 53px;
+	top: 22px;
+	background-color: black;
+	height: 60px;
+	width: 60px;
+	z-index: 15;
+	position: absolute;
+}
+
+.leftEye
+{
+	margin-left: -60px;
+}
+
+.rightEye
+{
+	top: 0px;
+	right: 0px;
+	margin-right: -60px;
+}
+
diff --git a/public/stylesheets/your_band.css b/public/stylesheets/your_band.css
@@ -13,12 +13,7 @@ audio
 img 
 {
 	margin: 10px;
-	-moz-box-shadow: 0 0 20px 5px green;
-	-webkit-box-shadow: 0 0 20px 5px green;
-	box-shadow: 0 0 20px 5px green;
-}
-
-body
-{
-	background-color: red;
+	-moz-box-shadow: 0 0 20px 5px #A3DC55;
+	-webkit-box-shadow: 0 0 20px 5px #A3DC55;
+	box-shadow: 0 0 20px 5px #A3DC55;
 }