Skip to content

Instantly share code, notes, and snippets.

@ezos86
Created September 30, 2015 16:48
Show Gist options
  • Save ezos86/4f3afd5c3544800ec9ee to your computer and use it in GitHub Desktop.
Save ezos86/4f3afd5c3544800ec9ee to your computer and use it in GitHub Desktop.
//Grid System Setup
.price-row{
@for $i from 1 through 12 {
.col-#{$i} {
width: 100% / 12 * $i;
float: left;
box-sizing: border-box;
}
}
margin:0 auto;
width: 1024px;
clear: both;
margin-top:40px;
}
.price-column{
//background-color:#e6e6e6;
}
.price-column-container{
background-color:#ffffff;
margin:10px;
border:1px solid #ccc;
min-height:600px;
}
.price-column-title-box{
text-transform:uppercase;
text-align:center;
font-size:24px;
padding:10px;
border-bottom:1px solid #ccc;
}
.price-column-dollar-sign{
font-size:24px;
vertical-align:super;
font-weight:600
}
.price-column-price-text{
font-size:72px;
font-weight:300;
margin: 0 auto;
text-align:center;
line-height:80px;
}
.price-column-sub-text{
font-size:14px;
text-transform:uppercase;
line-height:0;
text-align:center;
}
.price-column-feature-list{
list-style:none;
margin-left:0;
padding:0 20px;
}
.price-column-feature-list > li{
margin: 20px 0;
}
.price-column-button{
text-align:center;
margin:30px 0;
}
.btnBase{
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.4285;
margin: 0 2px;
padding: 6px 12px;
text-decoration: none;
text-transform: uppercase;
}
.priceButton{
background-color:#f78c26;
color:#fff;
}
{{name}} {{vm.name}} {{plan.plans[0].name}}
<div ng-repeat="price in plan.plans">
<ul>
<li>{{price.name}}</li>
</ul>
</div>
{{plan.plans}}
<div class="price-table">
<div class="price-column" ng-class="planCol()" ng-repeat="pricePlan in plan.plans">
<div class="price-container" ng-class="pricePlan.popular ? 'popular-plan' : 'popular-disabled'">
<div class="priceColumnBanner">
<span>Most Poular</span>
</div>
<div class="priceColumnFeatureInfo">
<div class="price-title-box">
{{pricePlan.name}}
</div>
<div class="priceAmount">
<p class="price-plan-text"><span class="price-plan-dollar-sign">$</span>{{pricePlan.price}}<span class="price-plan-sub-text">month</span></p>
<p class="price-plan-sub-text">PER USER</p>
</div>
<div class="price-table-button">
<p class="price-table-current-plan" ng-if="pricePlan.active">Your Current Plan</p>
<button class="btnBase priceButton" ng-if="!pricePlan.active">
Select Plan
</button><br>
<span class="price-column-trial-text" ng-if="pricePlan.trial">Your trial ends in {{pricePlan.trial_days}} days</span>
</div>
</div>
<ul class="price-column-feature-list">
<li ng-repeat="feature in pricePlan.features">{{feature}}</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- <div class="price-table">
<div class="price-row" ng-repeat="pricePlan in plan.plans">
<div class="price-container">
<div class="priceColumnFeatureInfo">
<div class="price-title-box">
{{pricePlan.name}}
</div>
<div class="priceAmount">
<p class="price-plan-text"><span class="price-plan-dollar-sign">$</span>{{pricePlan.price}}<span class="price-plan-sub-text">month</span></p>
<p class="price-plan-sub-text">PER USER</p>
</div>
<div class="price-column-button">
<p class="price-column-current-plan" ng-if="pricePlan.active">Your Current Plan</p>
<button class="btnBase priceButton" ng-if="!pricePlan.active">
Select Plan
</button><br>
<span class="price-column-trial-text" ng-if="pricePlan.trial">Your trial ends in {{pricePlan.trial_days}} days</span>
</div>
</div>
<ul class="price-column-feature-list">
<li ng-repeat="feature in pricePlan.features">{{feature}}</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div> -->
<!-- <div class="price-table">
<div class="price-column price-row" ng-repeat="pricePlan in plan.plans">
<div class="price-row-container">
<div class="priceColumnFeatureInfo">
<div class="price-row-title-box">
{{pricePlan.name}}
</div>
<div class="price-column-price">
<p class="price-column-price-text"><span class="price-column-dollar-sign">$</span>{{pricePlan.price}}<span class="price-column-sub-text">month</span></p>
<p class="price-column-sub-text">PER USER</p>
</div>
</div>
<ul class="price-column-feature-list">
<li ng-repeat="feature in pricePlan.features">{{feature}}</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
-->
<hr>
<div style="display:block;">
<h1> Modal</h1>
</div>
<div class="priceTableModal">
<span class="priceTableModal-close">&#x2715;</span>
<div class="price-column price-row">
<span class="price-plan-confirm-text">Please Confirm your selection</span>
<div class="price-container">
<div class="priceColumnFeatureInfo">
<div class="price-title-box">
{{plan.plans[0].name}}
</div>
<div class="priceAmount">
<p class="price-plan-text"><span class="price-plan-dollar-sign">$</span>{{plan.plans[0].price}}<span class="price-plan-sub-text">month</span></p>
<p class="price-plan-sub-text">PER USER</p>
</div>
</div>
<ul class="price-column-feature-list">
<li ng-repeat="feature in plan.plans[0].features">{{feature}}</li>
</ul>
<div class="clear"></div>
</div>
<div class="modalCta">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio sunt, error eius temporibus, voluptate illo consectetur dicta mollitia perferendis dolores repellendus numquam? Rem dolor autem earum vitae numquam natus similique.</p>
<button class="btnBase priceButton" ng-if="!pricePlan.active">Upgrade Plan</button>
</div>
</div>
</div>
var globes;
(function () {
"use strict";
var app = angular.module('networkDirectives', []);
app.factory('getPricing', function getPricing($http, $q){
var service = {
plans: [],
getPlans: getPlans
};
return service;
function getPlans(){
var def = $q.defer();
$http.get('price-plan.json')
.success(function(data){
service.plans = data;
def.resolve(data);
})
.error(function(){
def.reject('Failed to get Pricing');
});
return def.promise;
}
});
app.controller('prices', function($scope, getPricing){
var vm = this;
vm.plans = [];
vm.getPlans = function() {
getPricing.getPlans()
.then(function(plans) {
vm.plans = plans;
globes = plans;
},
function(data) {
console.log('pricing retrieval failed.')
});
};
vm.getPlans();
console.log(vm.plans);
$scope.plans = vm.plans;
$scope.planCol = function(){
var num = vm.plans.length;
if(num > 4){
return 'price-row';
} else {
var cols = 12/num;
return 'col-' + cols;
}
}
});
app.directive('priceplan', function ($q, $http) {
return {
restrict: 'EA',
scope: {},
controller: "prices as plan",
templateUrl: 'pricePlan.directive.html'
};
});
})();
<!DOCTYPE html>
<html ng-app="networkDirectives">
<head>
<meta charset="UTF-8">
<title>price is right</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="pricePlan.directive.js"></script>
<link rel="stylesheet" href="price-plan.css">
</head>
<body>
H1llo world
<priceplan></priceplan>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);
* {
font-family: Lato, Helvetica;
}
.price-table {
margin: 0 auto;
width: 1024px;
clear: both;
margin-top: 40px;
}
.price-table .col-1 {
width: 8.33333%;
float: left;
box-sizing: border-box;
}
.price-table .col-2 {
width: 16.66667%;
float: left;
box-sizing: border-box;
}
.price-table .col-3 {
width: 25%;
float: left;
box-sizing: border-box;
}
.price-table .col-4 {
width: 33.33333%;
float: left;
box-sizing: border-box;
}
.price-table .col-5 {
width: 41.66667%;
float: left;
box-sizing: border-box;
}
.price-table .col-6 {
width: 50%;
float: left;
box-sizing: border-box;
}
.price-table .col-7 {
width: 58.33333%;
float: left;
box-sizing: border-box;
}
.price-table .col-8 {
width: 66.66667%;
float: left;
box-sizing: border-box;
}
.price-table .col-9 {
width: 75%;
float: left;
box-sizing: border-box;
}
.price-table .col-10 {
width: 83.33333%;
float: left;
box-sizing: border-box;
}
.price-table .col-11 {
width: 91.66667%;
float: left;
box-sizing: border-box;
}
.price-table .col-12 {
width: 100%;
float: left;
box-sizing: border-box;
}
.price-container {
background-color: #ffffff;
margin: 10px;
border: 1px solid #ccc;
min-height: 600px;
}
.price-title-box {
text-transform: uppercase;
text-align: center;
font-size: 24px;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.price-plan-dollar-sign {
font-size: 24px;
vertical-align: super;
font-weight: 600;
}
.price-plan-text {
font-size: 72px;
font-weight: 300;
margin: 0 auto;
text-align: center;
line-height: 80px;
}
.price-plan-sub-text {
font-size: 16px;
text-transform: uppercase;
line-height: 0;
text-align: center;
}
.price-column-text {
font-size: 14px;
text-transform: uppercase;
line-height: 0;
text-align: center;
}
.price-column-feature-list {
list-style: none;
float:left;
margin-left: 0;
padding: 0 20px;
}
.price-column-feature-list > li {
margin: 20px 0;
}
.price-table-button {
text-align: center;
margin: 30px 0;
height: 40px;
}
.btnBase {
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.4285;
margin: 0 2px;
padding: 6px 12px;
text-decoration: none;
text-transform: uppercase;
}
.priceButton {
background-color: #f78c26;
color: #fff;
}
.priceColumnBanner{
text-align:center;
display:block;
padding: 5px 0;
border-bottom: 1px solid #ccc;
}
.popular-plan{
margin-top: -20px;
padding-bottom: 30px;
}
.popular-disabled > .priceColumnBanner{
display:none;
}
.price-table-current-plan{
padding: 5px 0;
}
.price-column-trial-text{
color:#777777;
font-size: 12px;
text-transform: uppercase;
}
/*PRICE ROWS*/
.price-row .priceColumnFeatureInfo{
width: 20%;
min-width:200px;
float: left;
margin-right: 20px;
border-right: 1px solid #ccc;
padding-bottom:20px;
}
.price-row .price-container {
background-color: #ffffff;
margin: 10px;
border: 1px solid #ccc;
min-height: initial;
}
.price-row .popular-plan{
padding-bottom:0;
}
.price-row .price-title-box{
text-transform: uppercase;
text-align: center;
font-size: 18px;
padding: 20px;
border:none;
}
/* font-size: 24px;
padding: 10px;
border-bottom: 1px solid #ccc;*/
.priceColumnFeatureInfo::after{
clear:both;
}
.clear{
clear:both !important;
}
/*Price Table Modal*/
.priceTableModal{
width:50%;
min-width:500px;
margin:0 auto;
border:1px solid #cccccc;
box-sizing: border-box;
padding: 30px;
}
.priceTableModal .price-container{
margin: 10px 0;
}
.price-plan-confirm-text{
font-size: 24px;
}
.priceTableModal-close{
float:right;
font-size:24px;
}
.modalCta{
text-align: center;
margin-bottom: 20px;
}
[
{
"name": "Plan A",
"price": 35,
"popular": 1,
"features": [
"Accounts Recievable or Payable",
"Send ACH Payments or Recieve them",
"Sync with Quickbooks"
],
"trial": 0,
"trial_days": 24,
"active":0,
"trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
},
{
"name": "Plan B",
"price": 49,
"popular": 0,
"features": [
"Accounts Recievable or Payable",
"Send ACH Payments or Recieve them",
"Sync with Quickbooks"
],
"trial": 1,
"trial_days": 32,
"active":0,
"trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
},
{
"name": "Plan C",
"price": 79,
"popular": 0,
"features": [
"Accounts Recievable or Payable",
"Send ACH Payments or Recieve them",
"Sync with Quickbooks"
],
"trial": 0,
"trial_days": 0,
"active":1,
"trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
},
{
"name": "Plan C",
"price": 79,
"popular": 0,
"features": [
"Accounts Recievable or Payable",
"Send ACH Payments or Recieve them",
"Sync with Quickbooks"
],
"trial": 0,
"trial_days": 0,
"active":1,
"trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
},
{
"name": "Plan C",
"price": 79,
"popular": 0,
"features": [
"Accounts Recievable or Payable",
"Send ACH Payments or Recieve them",
"Sync with Quickbooks"
],
"trial": 0,
"trial_days": 0,
"active":1,
"trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
}
]
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8090);
console.log('Server available at http://localhost:8080');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment