Work on for-teams and pro improvements.

master
Nick Sergeant 2015-10-03 12:27:54 -04:00
parent b9d45d906c
commit c4def5555f
9 changed files with 233 additions and 186 deletions

File diff suppressed because one or more lines are too long

7
media/css/style.css.map Normal file

File diff suppressed because one or more lines are too long

View File

@ -1989,9 +1989,9 @@ body.pro {
div.payment-loading { div.payment-loading {
background: rgba(#F2F2F2, .6); background: rgba(#F2F2F2, .6);
display: none; display: none;
height: 287px; height: 410px;
position: absolute; position: absolute;
top: 261px; top: 278px;
width: 100%; width: 100%;
span { span {
@ -2006,6 +2006,10 @@ body.pro {
width: 120px; width: 120px;
@include border-radius; @include border-radius;
} }
&.-teams {
height: 523px;
top: 449px;
}
} }
div.stripe { div.stripe {
color: #C2C2C2; color: #C2C2C2;
@ -2030,6 +2034,19 @@ body.pro {
} }
} }
} }
div.login-first {
background: #FFF;
border: 3px solid #3299B7;
color: #666;
display: block;
font-size: 18px;
font-weight: bold;
margin: 0 auto 10px auto;
padding: 20px;
text-align: center;
width: 400px;
@include border-radius;
}
} }
body.search { body.search {
div.empty-snipts { div.empty-snipts {

View File

@ -98,7 +98,6 @@
var $form = $('form#pro-signup'); var $form = $('form#pro-signup');
var $submit = $('button[type="submit"]', $form); var $submit = $('button[type="submit"]', $form);
var $name = $('input#name');
var $cardNumber = $('input#number'); var $cardNumber = $('input#number');
var $expMonth = $('select#exp-month'); var $expMonth = $('select#exp-month');
var $expYear = $('select#exp-year'); var $expYear = $('select#exp-year');
@ -137,7 +136,6 @@
$('.payment-loading').show(); $('.payment-loading').show();
Stripe.createToken({ Stripe.createToken({
name: $name.val(),
number: $cardNumber.val(), number: $cardNumber.val(),
cvc: $cvc.val(), cvc: $cvc.val(),
exp_month: $expMonth.val(), exp_month: $expMonth.val(),

View File

@ -40,102 +40,111 @@
<li>Plans from $49/month, all with a 7-day free trial.</li> <li>Plans from $49/month, all with a 7-day free trial.</li>
</ul> </ul>
</div> </div>
<div class="control-group"> {% if not request.user.is_authenticated %}
<label class="control-label" for="name">Team username:</label> <div class="login-first">
<div class="controls"> <span>
<input maxlength="30" required type="text" class="input-xlarge" name="name" id="name" /> To create a team, <a href="/signup/?next=/for-teams/">sign up</a> or <a href="/login/?next=/for-teams/">log in</a>.
<p class="sub" style="margin-top: 3px; color: #999999;"> </span>
Maximum of 30 characters.
</p>
</div> </div>
</div> {% else %}
<div class="control-group"> <div class="payment-loading -teams"><span>Please wait&hellip;</span></div>
<label class="control-label" for="name">Team email:</label> <div class="payment-errors alert alert-error"></div>
<div class="controls"> <div class="control-group">
<input required type="text" class="input-xlarge" name="email" id="email" /> <label class="control-label" for="team-name">Team name:</label>
<p class="sub" style="margin-top: 3px; color: #999999;"> <div class="controls">
For billing and your team's Gravatar. Will remain private. <input maxlength="30" required type="text" class="input-xlarge" name="team-name" id="team-name" />
</p> <p class="sub" style="margin-top: 3px; color: #999999;">
Maximum of 30 characters.
</p>
</div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="email">Team email:</label>
<label class="control-label" for="name">Payment plan:</label> <div class="controls">
<div class="controls"> <input required type="text" class="input-xlarge" name="email" id="email" />
<select name="plan" type="text" class="input-xlarge" id="plan"> <p class="sub" style="margin-top: 3px; color: #999999;">
<option value="snipt-teams-25-monthly">25 users - $49/month</option> For billing and your team's Gravatar. Will remain private.
<option value="snipt-teams-25-yearly">25 users - $588/year</option> </p>
<option value="snipt-teams-100-monthly">100 users - $149/month</option> </div>
<option value="snipt-teams-100-yearly">100 users - $1,788/year</option>
<option value="snipt-teams-250-monthly">250 users - $299/month</option>
<option value="snipt-teams-250-yearly">250 users - $3,588/year</option>
<option value="snipt-teams-unlimited-monthly">Unlimited users - $499/month</option>
<option value="snipt-teams-unlimited-yearly">Unlimited users - $5,988/year</option>
</select>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="plan">Payment plan:</label>
<label class="control-label" for="name">Name on card:</label> <div class="controls">
<div class="controls"> <select name="plan" type="text" class="input-xlarge" id="plan">
<input type="text" class="input-xlarge" id="name" /> <option value="snipt-teams-25-monthly">25 users - $49/month</option>
<option value="snipt-teams-25-yearly">25 users - $588/year</option>
<option value="snipt-teams-100-monthly">100 users - $149/month</option>
<option value="snipt-teams-100-yearly">100 users - $1,788/year</option>
<option value="snipt-teams-250-monthly">250 users - $299/month</option>
<option value="snipt-teams-250-yearly">250 users - $3,588/year</option>
<option value="snipt-teams-unlimited-monthly">Unlimited users - $499/month</option>
<option value="snipt-teams-unlimited-yearly">Unlimited users - $5,988/year</option>
</select>
</div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="number">Card number:</label>
<label class="control-label" for="number">Card number:</label> <div class="controls cards">
<div class="controls cards"> <input type="text" class="input-xlarge" id="number" />
<input type="text" class="input-xlarge" id="number" /> <img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" />
<img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" /> <img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" /> <img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" /> <img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" /> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="exp-month">Expiration date:</label>
<label class="control-label" for="exp-month">Expiration date:</label> <div class="controls">
<div class="controls"> <select id="exp-month" class="span2 exp-month">
<select id="exp-month" class="span2 exp-month"> <option value="">----</option>
<option value="">----</option> <option value="01">01 - January</option>
<option value="01">01 - January</option> <option value="02">02 - February</option>
<option value="02">02 - February</option> <option value="03">03 - March</option>
<option value="03">03 - March</option> <option value="04">04 - April</option>
<option value="04">04 - April</option> <option value="05">05 - May</option>
<option value="05">05 - May</option> <option value="06">06 - June</option>
<option value="06">06 - June</option> <option value="07">07 - July</option>
<option value="07">07 - July</option> <option value="08">08 - August</option>
<option value="08">08 - August</option> <option value="09">09 - September</option>
<option value="09">09 - September</option> <option value="10">10 - October</option>
<option value="10">10 - October</option> <option value="11">11 - November</option>
<option value="11">11 - November</option> <option value="12">12 - December</option>
<option value="12">12 - December</option> </select>
</select> <select id="exp-year" class="span2">
<select id="exp-year" class="span2"> <option value="">----</option>
<option value="">----</option> <option value="2015">2015</option>
<option value="2014">2014</option> <option value="2016">2016</option>
<option value="2015">2015</option> <option value="2017">2017</option>
<option value="2016">2016</option> <option value="2018">2018</option>
<option value="2017">2017</option> <option value="2019">2019</option>
<option value="2018">2018</option> <option value="2020">2020</option>
<option value="2019">2019</option> <option value="2021">2021</option>
<option value="2020">2020</option> <option value="2022">2022</option>
<option value="2021">2021</option> <option value="2023">2023</option>
<option value="2022">2022</option> <option value="2024">2024</option>
<option value="2022">2023</option> <option value="2025">2025</option>
<option value="2022">2024</option> </select>
</select> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="cvc">Security code (CVC):</label>
<label class="control-label" for="cvc">Security code (CVC):</label> <div class="controls">
<div class="controls"> <input type="text" class="input-min span1" id="cvc">
<input type="text" class="input-min span1" id="cvc"> </div>
</div> </div>
</div>
<div class="control-group">
<div class="form-actions"> <div class="form-actions">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-success">Start free trial and create team &raquo;</button> <button type="submit" class="btn btn-success">Create team &raquo;</button>
<div class="security">
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
</div>
<div class="stripe" style="margin-left: 125px;">
Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security.
</div>
</div> </div>
</fieldset> {% endif %}
</form> </fieldset>
</form>
{% endblock %} {% endblock %}
{% block analytics %} {% block analytics %}

View File

@ -47,7 +47,7 @@ def for_teams_complete(request):
error_message or error_message or
'Your card was declined.') 'Your card was declined.')
team = Team(name=request.POST['name'], team = Team(name=request.POST['team-name'],
email=request.POST['email'], email=request.POST['email'],
owner=request.user) owner=request.user)
team.stripe_id = customer.id team.stripe_id = customer.id

View File

@ -106,25 +106,31 @@
</li> </li>
{% block add-snipt %}{% endblock %} {% block add-snipt %}{% endblock %}
{% endif %} {% endif %}
<li class="teams-nav"> {% if not request.user.is_authenticated %}
<a href="#" class="teams-nav {% if '/for-teams/' in request.path %}active{% endif %}">Teams</a> <li>
<ul> <a href="/for-teams/" class="{% if '/for-teams/' in request.path %}active{% endif %}">Teams</a>
{% for team in request.user.profile.teams %} </li>
<li> {% else %}
<a href="/{{ team.user.username }}/"> <li class="teams-nav">
<i class="icon-user icon-white"></i> <a href="#" class="teams-nav {% if '/for-teams/' in request.path %}active{% endif %}">Teams</a>
{{ team.user.username }} <ul>
</a> {% for team in request.user.profile.teams|dictsort:'name' %}
</li> <li>
{% endfor %} <a href="/{{ team.user.username }}/">
<li> <i class="icon-user icon-white"></i>
<a href="/for-teams/"> {{ team.name }}
<i class="icon-plus icon-white"></i> </a>
Create new team </li>
</a> {% endfor %}
</li> <li>
</ul> <a href="/for-teams/">
</li> <i class="icon-plus icon-white"></i>
Create new team
</a>
</li>
</ul>
</li>
{% endif %}
</ul> </ul>
</nav> </nav>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}

View File

@ -40,86 +40,95 @@
Group discounts available. Email <a href="mailto:support@snipt.net">support@snipt.net</a> for details. Group discounts available. Email <a href="mailto:support@snipt.net">support@snipt.net</a> for details.
</p> </p>
</div> </div>
<div class="payment-loading"><span>Please wait&hellip;</span></div> {% if not request.user.is_authenticated %}
<div class="payment-errors alert alert-error"></div> <div class="login-first">
<div class="control-group"> <span>
<label class="control-label" for="name">Payment plan:</label> To go <span class="pro">Pro</span>, <a href="/signup/?next=/pro/">sign up</a> or <a href="/login/?next=/pro/">log in</a>.
<div class="controls"> </span>
<select name="plan" type="text" class="input-medium" id="plan">
<option value="snipt-pro-monthly">$5/month</option>
<option value="snipt-pro-yearly">$60/year</option>
</select>
</div> </div>
</div> {% elif request.user.profile.is_pro %}
<div class="control-group"> <div class="login-first">
<label class="control-label" for="name">Name on card:</label> <span>
<div class="controls"> You're already a <span class="pro">Pro</span>.
<input type="text" class="input-xlarge" id="name" /> <a style="display: block; margin-top: 15px;" href="/account/billing/">View details &raquo;</a>
</span>
</div> </div>
</div> {% else %}
<div class="control-group"> <div class="payment-loading"><span>Please wait&hellip;</span></div>
<label class="control-label" for="number">Card number:</label> <div class="payment-errors alert alert-error"></div>
<div class="controls cards"> <div class="control-group">
<input type="text" class="input-xlarge" id="number" /> <label class="control-label" for="name">Payment plan:</label>
<img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" /> <div class="controls">
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" /> <select name="plan" type="text" class="input-medium" id="plan">
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" /> <option value="snipt-pro-monthly">$5/month</option>
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" /> <option value="snipt-pro-yearly">$60/year</option>
</select>
</div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="number">Card number:</label>
<label class="control-label" for="exp-month">Expiration date:</label> <div class="controls cards">
<div class="controls"> <input type="text" class="input-xlarge" id="number" />
<select id="exp-month" class="span2 exp-month"> <img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" />
<option value="">----</option> <img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
<option value="01">01 - January</option> <img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
<option value="02">02 - February</option> <img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
<option value="03">03 - March</option> </div>
<option value="04">04 - April</option>
<option value="05">05 - May</option>
<option value="06">06 - June</option>
<option value="07">07 - July</option>
<option value="08">08 - August</option>
<option value="09">09 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<select id="exp-year" class="span2">
<option value="">----</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2022">2023</option>
<option value="2022">2024</option>
</select>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="exp-month">Expiration date:</label>
<label class="control-label" for="cvc">Security code (CVC):</label> <div class="controls">
<div class="controls"> <select id="exp-month" class="span2 exp-month">
<input type="text" class="input-min span1" id="cvc"> <option value="">----</option>
<option value="01">01 - January</option>
<option value="02">02 - February</option>
<option value="03">03 - March</option>
<option value="04">04 - April</option>
<option value="05">05 - May</option>
<option value="06">06 - June</option>
<option value="07">07 - July</option>
<option value="08">08 - August</option>
<option value="09">09 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<select id="exp-year" class="span2">
<option value="">----</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
</div>
</div> </div>
</div> <div class="control-group">
<div class="form-actions"> <label class="control-label" for="cvc">Security code (CVC):</label>
{% csrf_token %} <div class="controls">
<button type="submit" class="btn btn-success">Subscribe &raquo;</button> <input type="text" class="input-min span1" id="cvc">
<div class="security"> </div>
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
</div> </div>
<div class="stripe"> <div class="form-actions">
Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security. {% csrf_token %}
<button type="submit" class="btn btn-success">Subscribe &raquo;</button>
<div class="security">
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
</div>
<div class="stripe">
Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security.
</div>
</div> </div>
</div> <div class="form-actions" style="color: #A2A2A2;">
<div class="form-actions" style="color: #A2A2A2;"> Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>.
Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>. </div>
</div> {% endif %}
</fieldset> </fieldset>
</form> </form>
{% endblock %} {% endblock %}

View File

@ -82,11 +82,8 @@ def login_redirect(request):
return HttpResponseRedirect('/') return HttpResponseRedirect('/')
@login_required
@render_to('pro.html') @render_to('pro.html')
def pro(request): def pro(request):
if request.user.profile.is_pro:
return HttpResponseRedirect('/' + request.user.username + '/')
return {} return {}