better support for chapter component in non-aesop themes

tested and pictured in Genesis theme below http://cl.ly/image/2b271e2S0g26
hyunsupul · Aug 30, 2014 · 5296352 · 5296352
1 parent 47ac546
commit 5296352
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 7 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -9,7 +9,7 @@ module.exports = function(grunt) {
         watch: {
             less: {
 				files: ['public/assets/less/*/**','admin/assets/less/*/**'],
-                tasks: ['less:adminLess']
+                tasks: ['less:publicLess']
             },
             livereload: {
                 options: { livereload: true },

diff --git a/admin/includes/available.php b/admin/includes/available.php
@@ -512,6 +512,22 @@ function aesop_shortcodes( $shortcode = null ) {
 						'desc'		=> __('Background Type','aesop-core'),
 						'tip'		=> __('Optionally set a looping video background.','aesop-core')
 					),
+					'full'			=> array(
+						'type'		=> 'select',
+						'values' 	=> array(
+							array(
+								'value' => 'on',
+								'name'	=> __('On','aesop-core')
+							),
+							array(
+								'value' => 'off',
+								'name'	=> __('Off','aesop-core')
+							)
+						),
+						'default'	=> '',
+						'desc'		=> __('Full-size Background Image','aesop-core'),
+						'tip'		=> __('If set to on, background image of the chapter will be as large as the browser.','aesop-core')
+					),
 					'img' 			=> array(
 						'type'		=> 'media_upload',
 						'default' 	=> ' ',

diff --git a/public/assets/css/components/chapter.css b/public/assets/css/components/chapter.css
diff --git a/public/assets/less/components/base.less b/public/assets/less/components/base.less
@@ -2,16 +2,27 @@
 @link-color:                #428bca;
 @body-bg:                   #fff;
 @baseContrast:              darken(@body-bg,10);
-@text-color:                #333;
+
 @accent:                    lighten(@text-color,33);
 @width:                     800px;
-@font-size-small:           14px;
-@font-size-xsmall:          12px;
+
 @caption-padding:           .25rem .75rem;
 @caption-bg:                fadeout(@body-bg,10);
+
+// type variables
+@font-size-small:           14px;
+@font-size-xsmall:          12px;
+@font-size-mega:            62px;
+@text-color:                #333;
 @font-family-sans-serif:    "Helvetica Neue", Helvetica, Arial, sans-serif;
 @aesop-flip-text:           contrast(@text-color, lighten(@text-color, 50), darken(@text-color,10), 50%);
 
+
+// responsive variables
+@mobile-large:               @width;
+@mobile-medium:              480px;
+@mobile-small:               320px;
+
 // mixins
 .transition(@transition) {
   -webkit-transition: @transition;

diff --git a/public/assets/less/components/chapter.less b/public/assets/less/components/chapter.less
@@ -1,3 +1,5 @@
+@import "base.less";
+
 .jorgen-article-cover-wrap {
     position: fixed;
 }
@@ -6,10 +8,41 @@
 
     .aesop-cover-title {
         max-width: 100%;
+        margin: 0;
+        padding-bottom: 20px;
+        bottom: 100px;
+        border-bottom: 1px solid @body-bg;
+        font-size: @font-size-mega;
+        color: #fff;
+        width: 90%;
+        left: 10%;
+        position: absolute;
+        z-index: 1;
+
+        small {
+            font-size:40px;
+        }
+    }
+
+    @media (max-width:@mobile-large){
+        .aesop-cover-title {
+            font-size:@font-size-mega - 10;
+            small { font-size:@font-size-mega - 20;}
+        }
+    }
+
+    @media(max-width:@mobile-medium) {
+        .aesop-cover-title {
+            display:block;
+            bottom:30px;
+            font-size:@font-size-mega - 30;
+            small { display:block;font-size:@font-size-mega - 42;}
+        }
     }
 }
 
+// deprecated
 .aesop-chapter-title {
     position: absolute;
-    left:-10000px
+    left:-10000px;
 }
diff --git a/public/includes/components/component-heading.php b/public/includes/components/component-heading.php
@@ -12,7 +12,8 @@ function aesop_chapter_shortcode($atts, $content = null) {
 			'title' 	=> '',
 			'subtitle' 	=> '',
 			'bgtype' 	=> 'img',
-			'img' 		=> ''
+			'img' 		=> '',
+			'full'		=> ''
 		);
 
 		$atts = apply_filters('aesop_chapter_defaults',shortcode_atts($defaults, $atts));
@@ -39,6 +40,23 @@ function aesop_chapter_shortcode($atts, $content = null) {
 
 				<?php do_action('aesop_chapter_inside_top'); //action ?>
 
+				<?php if ( 'on' == $atts['full'] ) { ?>
+				<script>
+					jQuery(document).ready(function(){
+
+						var coverSizer = function(){
+							jQuery('.aesop-article-chapter').css({'height':(jQuery(window).height())+'px'});
+						}
+
+						coverSizer();
+
+					    jQuery(window).resize(function(){
+	        				coverSizer();
+	    				});
+					});
+				</script>
+				<?php } ?>
+
 				<div class="aesop-article-chapter clearfix" <?php echo $img_style;?> >
 
 					<h2 class="aesop-cover-title" itemprop="title" >