mirror of
https://github.com/ascribe/wp-theme
synced 2024-12-22 09:13:38 +01:00
Merge pull request #13 from ascribe/feature/cta-subtemplate
CTA subtemplate & component
This commit is contained in:
commit
ca721a841c
@ -2182,21 +2182,43 @@ header + .chevron-divider {
|
||||
line-height: 31px;
|
||||
}
|
||||
}
|
||||
.sign-up {
|
||||
padding: 240px 0 210px;
|
||||
.cta {
|
||||
padding: 20px 0;
|
||||
min-height: 300px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 55% 50%;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sign-up a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.sign-up {
|
||||
background-position: 55% 50%;
|
||||
padding: 180px 0 140px;
|
||||
@media screen and (min-width: 600px) {
|
||||
.cta {
|
||||
padding: 40px 0;
|
||||
min-height: 520px;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
.cta .cta__container {
|
||||
padding: 0 4%;
|
||||
margin: auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
.cta .cta__title {
|
||||
color: #fff;
|
||||
margin: 0 0 48px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.cta .cta__button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.galleries-marketplaces {
|
||||
padding: 145px 0 130px;
|
||||
text-align: center;
|
||||
|
||||
2
assets/css/ascribe.min.css
vendored
2
assets/css/ascribe.min.css
vendored
File diff suppressed because one or more lines are too long
@ -887,21 +887,53 @@ header + .chevron-divider {
|
||||
}
|
||||
}
|
||||
}
|
||||
.sign-up {
|
||||
padding: 240px 0 210px;
|
||||
|
||||
|
||||
//
|
||||
// Component: CTA section
|
||||
//
|
||||
.cta {
|
||||
// TODO: this padding value should come from more general component like .section or global variable
|
||||
padding: 20px 0;
|
||||
min-height: 300px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 55% 50%;
|
||||
|
||||
a {
|
||||
// centering from the future
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (min-width: @phoneWidth) {
|
||||
padding: 40px 0;
|
||||
min-height: 520px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
// TODO: this should be the generic layout container for everything
|
||||
.cta__container {
|
||||
padding: 0 4%;
|
||||
margin: auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.cta__title {
|
||||
color: #fff;
|
||||
margin: 0 0 48px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta__button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media screen and (max-width: @phoneWidth) {
|
||||
background-position: 55% 50%;
|
||||
padding: 180px 0 140px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.galleries-marketplaces {
|
||||
padding: 145px 0 130px;
|
||||
text-align: center;
|
||||
|
||||
@ -55,8 +55,8 @@ class Subtemplate {
|
||||
case 'bluebox':
|
||||
$result .= $this->blueBox($subtemplateTitle);
|
||||
break;
|
||||
case 'createaccount':
|
||||
$result .= $this->createAccount($subtemplateTitle);
|
||||
case 'calltoaction':
|
||||
$result .= $this->callToAction($subtemplateTitle);
|
||||
break;
|
||||
case 'galleries':
|
||||
$result .= $this->galleries($subtemplateTitle);
|
||||
@ -76,9 +76,6 @@ class Subtemplate {
|
||||
case 'team':
|
||||
$result .= $this->team($subtemplateTitle);
|
||||
break;
|
||||
case 'pricing':
|
||||
$result .= $this->pricing($subtemplateTitle);
|
||||
break;
|
||||
|
||||
case 'teamGeneral':
|
||||
$result .= $this->teamGeneral($subtemplateTitle);
|
||||
@ -298,17 +295,22 @@ class Subtemplate {
|
||||
|
||||
return $result;
|
||||
}
|
||||
public function createAccount($subtemplateTitle) {
|
||||
$buttonText = get_sub_field('create_free_account_text');
|
||||
$signUpLink = get_field('sign_up_link','option');
|
||||
public function callToAction($subtemplateTitle) {
|
||||
|
||||
if ($subtemplateTitle) {
|
||||
$ctaTitle = "<h1 class='cta__title'>$subtemplateTitle</h1>";
|
||||
}
|
||||
$ctaText = get_sub_field('cta_button_text');
|
||||
$ctaLink = get_sub_field('cta_button_link');
|
||||
$backgroundImg = get_sub_field('image')['url'];
|
||||
|
||||
|
||||
$result = "<section class='subtemplate sign-up' style='background-image: url({$backgroundImg})'>
|
||||
<div class='centered-content'>
|
||||
<a href='{$signUpLink}' class='button blue-overPic'>{$buttonText}</a>
|
||||
</div>
|
||||
</section>";
|
||||
$result = "<section class='subtemplate cta' style='background-image: url({$backgroundImg})'>
|
||||
<div class='cta__container'>
|
||||
{$ctaTitle}
|
||||
<a href='{$ctaLink}' class='cta__button button blue-overPic'>{$ctaText}</a>
|
||||
</div>
|
||||
</section>";
|
||||
|
||||
return $result;
|
||||
}
|
||||
@ -983,26 +985,6 @@ class Subtemplate {
|
||||
|
||||
return $result;
|
||||
}
|
||||
public function pricing($subtemplateTitle) {
|
||||
|
||||
$bgImg = get_sub_field('background_image')['url'];
|
||||
$rightPricing = get_sub_field('right_pricing_text');
|
||||
$leftPricing = get_sub_field('left_pricing_text');
|
||||
$contactPage = get_field('contact_page','option');
|
||||
|
||||
$result = "<section class='subtemplate pricing' style='background-image:url({$bgImg})'>
|
||||
<div class='centered-pricing'>
|
||||
<h1>{$subtemplateTitle}</h1>
|
||||
<div class='column-container'>
|
||||
<div class='pricing-detail'><div>{$leftPricing}</div></div>
|
||||
<div class='pricing-detail'><div>{$rightPricing}</div></div>
|
||||
</div>
|
||||
<a href='{$contactPage}'>Contact us to discuss custom pricing</a>
|
||||
</div>
|
||||
</section>";
|
||||
|
||||
return $result;
|
||||
}
|
||||
|
||||
public function mainEventPage($subtemplateTitle) {
|
||||
$today = date('Ymd');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user