updates

square-circle-triangle · May 16, 2012 · e52b824 · e52b824
1 parent c35b405
commit e52b824
Show file tree

Hide file tree

Showing 5 changed files with 273 additions and 78 deletions.
diff --git a/templates/blocks_retail_ticketing/css/style.css b/templates/blocks_retail_ticketing/css/style.css
@@ -176,7 +176,6 @@ form label.error {
 	bottom: 10%;
 	left: 0;
 	right: 0;
-	background-color: #dfdfdf;
 	background: -webkit-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(222,222,222,1) 100%);
 }
 
@@ -198,29 +197,29 @@ form label.error {
 	overflow: hidden;
 }
 
-.landscape .content_wrap.has_2_children { width: 200%; }
-.landscape .content_wrap.has_3_children { width: 300%; }
-.landscape .content_wrap.has_4_children { width: 400%; }
-.landscape .content_wrap.has_5_children { width: 500%; }
-.landscape .content_wrap.has_6_children { width: 600%; }
-.landscape .content_wrap.has_7_children { width: 700%; }
-.landscape .content_wrap.has_8_children { width: 800%; }
-.landscape .content_wrap.has_9_children { width: 900%; }
-.landscape .content_wrap.has_10_children { width: 1000%; }
+.landscape .content_wrap.flex.has_2_children { width: 200%; }
+.landscape .content_wrap.flex.has_3_children { width: 300%; }
+.landscape .content_wrap.flex.has_4_children { width: 400%; }
+.landscape .content_wrap.flex.has_5_children { width: 500%; }
+.landscape .content_wrap.flex.has_6_children { width: 600%; }
+.landscape .content_wrap.flex.has_7_children { width: 700%; }
+.landscape .content_wrap.flex.has_8_children { width: 800%; }
+.landscape .content_wrap.flex.has_9_children { width: 900%; }
+.landscape .content_wrap.flex.has_10_children { width: 1000%; }
 
-.landscape .content_wrap.float_children > div {
+.landscape .content_wrap.flex.float_children > div {
 	float: left;
 }
 
-.landscape .has_2_children > div  { width: 50%; }
-.landscape .has_3_children > div  { width: 33.33334%; }
-.landscape .has_4_children > div  { width: 25%; }
-.landscape .has_5_children > div  { width: 20%; }
-.landscape .has_6_children > div  { width: 16.66667%; }
-.landscape .has_7_children > div  { width: 14.28571%; }
-.landscape .has_8_children > div  { width: 12.5%; }
-.landscape .has_9_children > div  { width: 11.11111%; }
-.landscape .has_10_children > div { width: 10%; }
+.landscape .flex.has_2_children > div  { width: 50%; }
+.landscape .flex.has_3_children > div  { width: 33.33334%; }
+.landscape .flex.has_4_children > div  { width: 25%; }
+.landscape .flex.has_5_children > div  { width: 20%; }
+.landscape .flex.has_6_children > div  { width: 16.66667%; }
+.landscape .flex.has_7_children > div  { width: 14.28571%; }
+.landscape .flex.has_8_children > div  { width: 12.5%; }
+.landscape .flex.has_9_children > div  { width: 11.11111%; }
+.landscape .flex.has_10_children > div { width: 10%; }
 
 .portrait .content_wrap.has_2_children { height: 200%; }
 .portrait .content_wrap.has_3_children { height: 300%; }
@@ -232,7 +231,18 @@ form label.error {
 .portrait .content_wrap.has_9_children { height: 900%; }
 .portrait .content_wrap.has_10_children { height: 1000%; }
 
-.portrait .content_wrap.float_children > div {
+.landscape .content_wrap.v_scroll_only.has_2_children { height: 200%; }
+.landscape .content_wrap.v_scroll_only.has_3_children { height: 300%; }
+.landscape .content_wrap.v_scroll_only.has_4_children { height: 400%; }
+.landscape .content_wrap.v_scroll_only.has_5_children { height: 500%; }
+.landscape .content_wrap.v_scroll_only.has_6_children { height: 600%; }
+.landscape .content_wrap.v_scroll_only.has_7_children { height: 700%; }
+.landscape .content_wrap.v_scroll_only.has_8_children { height: 800%; }
+.landscape .content_wrap.v_scroll_only.has_9_children { height: 900%; }
+.landscape .content_wrap.v_scroll_only.has_10_children { height: 1000%; }
+
+.landscape .content_wrap.v_scroll_only.float_children > div {
+	float: none;
 }
 
 .portrait .has_2_children > div  { height: 50%; }
@@ -246,34 +256,45 @@ form label.error {
 .portrait .has_10_children > div { height: 10%; }
 
 
+.landscape .v_scroll_only.has_2_children > div  { height: 50%; }
+.landscape .v_scroll_only.has_3_children > div  { height: 33.33334%; }
+.landscape .v_scroll_only.has_4_children > div  { height: 25%; }
+.landscape .v_scroll_only.has_5_children > div  { height: 20%; }
+.landscape .v_scroll_only.has_6_children > div  { height: 16.66667%; }
+.landscape .v_scroll_only.has_7_children > div  { height: 14.28571%; }
+.landscape .v_scroll_only.has_8_children > div  { height: 12.5%; }
+.landscape .v_scroll_only.has_9_children > div  { height: 11.11111%; }
+.landscape .v_scroll_only.has_10_children > div { height: 10%; }
+
+
 /*
 	$TEXT STYLES
 */
 
 .white_gradient_text {
 /*	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(196,196,196,1) 100%);*/
-	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(150,150,150,1) 100%);
-	-webkit-text-fill-color: transparent;
-	-webkit-background-clip: text;
-	-webkit-text-stroke: 1px rgba(255,255,255,1);
+/*	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(150,150,150,1) 100%);*/
+/*	-webkit-text-fill-color: transparent;*/
+/*	-webkit-background-clip: text;*/
+	-webkit-text-stroke: 0px rgba(255,255,255,1);
 }
 
 .COLOR_gradient_text {
 /*	font-size: 50px;*/
 	font-weight: bold;
-	background: -webkit-linear-gradient(top, rgba(44,150,253,1) 0%,rgba(7,113,216,1) 100%);
-	-webkit-text-fill-color: transparent;
-	-webkit-background-clip: text;
-	-webkit-text-stroke: 1px rgba(7,113,216,1);
+/*	background: -webkit-linear-gradient(top, rgba(44,150,253,1) 0%,rgba(7,113,216,1) 100%);*/
+/*	-webkit-text-fill-color: transparent;*/
+/*	-webkit-background-clip: text;*/
+	-webkit-text-stroke: 0px rgba(7,113,216,1);
 }
 
 .inset_shadow_text {
 /*	font-size: 50px;*/
-	font-weight: bold;
-	-webkit-background-clip: text;
-	background-color: #121212;
-	-webkit-text-fill-color: transparent;
-	text-shadow: -1px 1px 2px rgba(255,255,255,.2);
+/*	font-weight: bold;*/
+/*	-webkit-background-clip: text;*/
+/*	background-color: #121212;*/
+/*	-webkit-text-fill-color: transparent;*/
+/*	text-shadow: -1px 1px 2px rgba(255,255,255,.2);*/
 }
 
 .small_grey {

diff --git a/templates/blocks_retail_ticketing/js/script.js b/templates/blocks_retail_ticketing/js/script.js
@@ -472,7 +472,7 @@ app.marquee = (function(){
 			.css({
 				left: _footerWidth+'px',
 				fontSize   : Math.round(_footerHeight*.6)+'px',
-				lineHeight : Math.round(_footerHeight*1.1)+'px'
+				lineHeight : Math.round(_footerHeight*1)+'px'
 			})
 			.show();
 

diff --git a/templates/blocks_retail_ticketing/price_list_text_only.page b/templates/blocks_retail_ticketing/price_list_text_only.page
@@ -28,29 +28,87 @@
 
 	<style>
 		<%
-			color_r = @page.site.extra_attributes.find_by_name("BrandColor R").value.to_i
-			color_g = @page.site.extra_attributes.find_by_name("BrandColor G").value.to_i
-			color_b = @page.site.extra_attributes.find_by_name("BrandColor B").value.to_i
-			color_rgb = "#{color_r},#{color_g},#{color_b}"
+			# get values from site attributes
 
-			color_r_darker = (color_r * 0.7).round
-			color_g_darker = (color_g * 0.7).round
-			color_b_darker = (color_b * 0.7).round
-			color_rgb_darker = "#{color_r_darker},#{color_g_darker},#{color_b_darker}"
+			brand_color_rgb   = @page.site.extra_attributes.find_by_name("BrandColor").value
+			heading_color_rgb = @page.site.extra_attributes.find_by_name("HeadingColor").value
+			text_color_rgb    = @page.site.extra_attributes.find_by_name("TextColor").value
+			content_bg_rgb    = @page.site.extra_attributes.find_by_name("BackgroundColor").value
 
+
+			# create darker shade of brand color for gradient
+
+			brand_color_values = brand_color_rgb.split(',')
+
+			brand_color_r = brand_color_values[0].to_i
+			brand_color_g = brand_color_values[1].to_i
+			brand_color_b = brand_color_values[2].to_i
+
+			brand_color_r_darker = (brand_color_r * 0.7).round
+			brand_color_g_darker = (brand_color_g * 0.7).round
+			brand_color_b_darker = (brand_color_b * 0.7).round
+
+			brand_color_rgb_darker = "#{brand_color_r_darker},#{brand_color_g_darker},#{brand_color_b_darker}"
+
+
+			# create darker shade of content background color for gradient
+
+			content_bg_values = content_bg_rgb.split(',')
+
+			content_bg_r = content_bg_values[0].to_i
+			content_bg_g = content_bg_values[1].to_i
+			content_bg_b = content_bg_values[2].to_i
+
+			content_bg_r_darker = (content_bg_r * 0.9).round
+			content_bg_g_darker = (content_bg_g * 0.9).round
+			content_bg_b_darker = (content_bg_b * 0.9).round
+
+			content_bg_rgb_darker = "#{content_bg_r_darker},#{content_bg_g_darker},#{content_bg_b_darker}"
+
+
+			# create darker shade of main text color to sit on brand color
+
+			heading_color_values = heading_color_rgb.split(',')
+
+			heading_color_r = heading_color_values[0].to_i
+			heading_color_g = heading_color_values[1].to_i
+			heading_color_b = heading_color_values[2].to_i
+
+			heading_color_r_darker = (heading_color_r * 0.9).round
+			heading_color_g_darker = (heading_color_g * 0.9).round
+			heading_color_b_darker = (heading_color_b * 0.9).round
+
+			heading_color_rgb_darker = "#{heading_color_r_darker},#{heading_color_g_darker},#{heading_color_b_darker}"
 		%>
 		.COLOR {
-			color: rgba(<%= color_rgb %>,1);
+			color: rgba(<%= brand_color_rgb %>,1);
 		}
 
 		.COLOR_BG {
-			background-color: rgba(<%= color_rgb %>,1);
+			background-color: rgba(<%= brand_color_rgb %>,1);
 		}
 
 		.COLOR_gradient_text {
-			background: -webkit-linear-gradient(top, rgba(<%= color_rgb %>,1) 0%,rgba(<%= color_rgb_darker %>,1) 100%);
-			-webkit-text-stroke: 1px rgba(<%= color_rgb_darker %>,1);
-			-webkit-background-clip: text;
+/*			background: -webkit-linear-gradient(top, rgba(<%= brand_color_rgb %>,1) 0%,rgba(<%= brand_color_rgb_darker %>,1) 100%);*/
+			color: rgba(<%= brand_color_rgb %>,1);
+			-webkit-text-stroke: 0px rgba(<%= brand_color_rgb_darker %>,1);
+/*			-webkit-background-clip: text;*/
+		}
+
+		.white_gradient_text {
+/*			background: -webkit-linear-gradient(top, rgba(<%= heading_color_rgb %>,1) 25%,rgba(<%= heading_color_rgb_darker %>,1) 100%);*/
+			color: rgba(<%= heading_color_rgb %>,1);
+			-webkit-text-stroke: 0px rgba(<%= heading_color_rgb_darker %>,1);
+/*			-webkit-background-clip: text;*/
+		}
+
+		.marquee {
+			color: rgba(<%= heading_color_rgb %>,1);
+		}
+
+		#main {
+			color: rgba(<%= text_color_rgb %>,1);
+			background: -webkit-linear-gradient(top, rgba(<%= content_bg_rgb %>,1) 0%,rgba(<%= content_bg_rgb_darker %>,1) 100%);
 		}
 	</style>
 </head>
@@ -64,7 +122,7 @@
 		</header>
 
 		<div id="main" role="main">	
-			<section class="content_wrap">
+			<section class="content_wrap v_scroll_only">
 
 
 				<% render :region => 'price_list', :max_repeats => 20 do %>

diff --git a/templates/blocks_retail_ticketing/product_listing.page b/templates/blocks_retail_ticketing/product_listing.page
@@ -28,29 +28,87 @@
 
 	<style>
 		<%
-			color_r = @page.site.extra_attributes.find_by_name("BrandColor R").value.to_i
-			color_g = @page.site.extra_attributes.find_by_name("BrandColor G").value.to_i
-			color_b = @page.site.extra_attributes.find_by_name("BrandColor B").value.to_i
-			color_rgb = "#{color_r},#{color_g},#{color_b}"
+			# get values from site attributes
 
-			color_r_darker = (color_r * 0.7).round
-			color_g_darker = (color_g * 0.7).round
-			color_b_darker = (color_b * 0.7).round
-			color_rgb_darker = "#{color_r_darker},#{color_g_darker},#{color_b_darker}"
+			brand_color_rgb   = @page.site.extra_attributes.find_by_name("BrandColor").value
+			heading_color_rgb = @page.site.extra_attributes.find_by_name("HeadingColor").value
+			text_color_rgb    = @page.site.extra_attributes.find_by_name("TextColor").value
+			content_bg_rgb    = @page.site.extra_attributes.find_by_name("BackgroundColor").value
 
+
+			# create darker shade of brand color for gradient
+
+			brand_color_values = brand_color_rgb.split(',')
+
+			brand_color_r = brand_color_values[0].to_i
+			brand_color_g = brand_color_values[1].to_i
+			brand_color_b = brand_color_values[2].to_i
+
+			brand_color_r_darker = (brand_color_r * 0.7).round
+			brand_color_g_darker = (brand_color_g * 0.7).round
+			brand_color_b_darker = (brand_color_b * 0.7).round
+
+			brand_color_rgb_darker = "#{brand_color_r_darker},#{brand_color_g_darker},#{brand_color_b_darker}"
+
+
+			# create darker shade of content background color for gradient
+
+			content_bg_values = content_bg_rgb.split(',')
+
+			content_bg_r = content_bg_values[0].to_i
+			content_bg_g = content_bg_values[1].to_i
+			content_bg_b = content_bg_values[2].to_i
+
+			content_bg_r_darker = (content_bg_r * 0.9).round
+			content_bg_g_darker = (content_bg_g * 0.9).round
+			content_bg_b_darker = (content_bg_b * 0.9).round
+
+			content_bg_rgb_darker = "#{content_bg_r_darker},#{content_bg_g_darker},#{content_bg_b_darker}"
+
+
+			# create darker shade of main text color to sit on brand color
+
+			heading_color_values = heading_color_rgb.split(',')
+
+			heading_color_r = heading_color_values[0].to_i
+			heading_color_g = heading_color_values[1].to_i
+			heading_color_b = heading_color_values[2].to_i
+
+			heading_color_r_darker = (heading_color_r * 0.9).round
+			heading_color_g_darker = (heading_color_g * 0.9).round
+			heading_color_b_darker = (heading_color_b * 0.9).round
+
+			heading_color_rgb_darker = "#{heading_color_r_darker},#{heading_color_g_darker},#{heading_color_b_darker}"
 		%>
 		.COLOR {
-			color: rgba(<%= color_rgb %>,1);
+			color: rgba(<%= brand_color_rgb %>,1);
 		}
 
 		.COLOR_BG {
-			background-color: rgba(<%= color_rgb %>,1);
+			background-color: rgba(<%= brand_color_rgb %>,1);
 		}
-		
+
 		.COLOR_gradient_text {
-			background: -webkit-linear-gradient(top, rgba(<%= color_rgb %>,1) 0%,rgba(<%= color_rgb_darker %>,1) 100%);
-			-webkit-text-stroke: 1px rgba(<%= color_rgb_darker %>,1);
-			-webkit-background-clip: text;
+/*			background: -webkit-linear-gradient(top, rgba(<%= brand_color_rgb %>,1) 0%,rgba(<%= brand_color_rgb_darker %>,1) 100%);*/
+			color: rgba(<%= brand_color_rgb %>,1);
+			-webkit-text-stroke: 0px rgba(<%= brand_color_rgb_darker %>,1);
+/*			-webkit-background-clip: text;*/
+		}
+
+		.white_gradient_text {
+/*			background: -webkit-linear-gradient(top, rgba(<%= heading_color_rgb %>,1) 25%,rgba(<%= heading_color_rgb_darker %>,1) 100%);*/
+			color: rgba(<%= heading_color_rgb %>,1);
+			-webkit-text-stroke: 0px rgba(<%= heading_color_rgb_darker %>,1);
+/*			-webkit-background-clip: text;*/
+		}
+
+		.marquee {
+			color: rgba(<%= heading_color_rgb %>,1);
+		}
+
+		#main {
+			color: rgba(<%= text_color_rgb %>,1);
+			background: -webkit-linear-gradient(top, rgba(<%= content_bg_rgb %>,1) 0%,rgba(<%= content_bg_rgb_darker %>,1) 100%);
 		}
 	</style>
 </head>
@@ -64,7 +122,7 @@
 		</header>
 
 		<div id="main" role="main">	
-			<section class="content_wrap">
+			<section class="content_wrap flex">
 
 
 				<% render :region => 'repeating_region', :max_repeats => 15 do %>