vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

create org form styling

This commit is contained in:
Kyle Spearrin 2017-04-07 11:39:56 -04:00
parent 7c91066618
commit d39d49fb8f
2 changed files with 101 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/app/settings/views/settingsCreateOrganization.html
View File

@ -10,90 +10,127 @@
<li ng-repeat="e in createOrgForm.$errors">{{e}}</li> <li ng-repeat="e in createOrgForm.$errors">{{e}}</li>
</ul> </ul>
</div> </div>
<div class="row">
<div class="col-md-6">
<div class="form-group" show-errors> <div class="form-group" show-errors>
<label for="name">Organization Name</label> <label for="name">Organization Name</label>
<input type="text" id="name" name="Name" ng-model="model.name" class="form-control" <input type="text" id="name" name="Name" ng-model="model.name" class="form-control"
required api-field /> required api-field />
</div> </div>
</div>
<div class="col-md-6">
<div class="form-group" show-errors> <div class="form-group" show-errors>
<label for="billingEmail">Billing Email</label> <label for="billingEmail">Billing Email</label>
<input type="email" id="billingEmail" name="BillingEmail" ng-model="model.billingEmail" class="form-control" <input type="email" id="billingEmail" name="BillingEmail" ng-model="model.billingEmail" class="form-control"
required api-field /> required api-field />
</div> </div>
</div>
</div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" ng-model="model.ownedBusiness"> This account is owned by a business. <input type="checkbox" ng-model="model.ownedBusiness"> This account is owned by a business.
</label> </label>
</div> </div>
<div class="form-group" ng-show="model.ownedBusiness" show-errors> <div class="row" ng-show="model.ownedBusiness">
<div class="col-md-6">
<div class="form-group" show-errors>
<label for="businessName">Business Name</label> <label for="businessName">Business Name</label>
<input type="text" id="businessName" name="BusinessName" ng-model="model.businessName" class="form-control" <input type="text" id="businessName" name="BusinessName" ng-model="model.businessName" class="form-control"
api-field /> api-field />
</div> </div>
</div>
</div>
<hr /> <hr />
<h4>Choose Your Plan</h4> <h4>Choose Your Plan</h4>
<div class="form-group"> <div class="form-group">
<div class="radio" ng-show="!model.ownedBusiness"> <div class="radio" ng-show="!model.ownedBusiness">
<label> <label class="label-block">
<input type="radio" ng-model="model.plan" name="PlanType" value="free"> <input type="radio" ng-model="model.plan" name="PlanType" value="free">
Free Free
<span>Share with 1 other user.</span>
</label> </label>
<p class="help-block">Share with 1 other user.</p>
</div> </div>
<div class="radio" ng-show="!model.ownedBusiness"> <div class="radio" ng-show="!model.ownedBusiness">
<label> <label class="label-block">
<input type="radio" ng-model="model.plan" name="PlanType" value="personal"> <input type="radio" ng-model="model.plan" name="PlanType" value="personal">
Personal - ${{plans.personal.basePrice}} /month for {{plans.personal.baseUsers}} users, Personal
additional users ${{plans.personal.userPrice}} /month <span>For personal users such as families &amp; friends.</span>
<span>
{{plans.personal.basePrice | currency:'$'}} /month for {{plans.personal.baseUsers}} users,
additional users {{plans.personal.userPrice | currency:'$'}} /month
</span>
</label> </label>
<p class="help-block">For personal users such as families &amp; friends.</p>
</div> </div>
<div class="radio"> <div class="radio">
<label> <label class="label-block">
<input type="radio" ng-model="model.plan" name="PlanType" value="teams"> <input type="radio" ng-model="model.plan" name="PlanType" value="teams">
Teams - ${{plans.teams.basePrice}} /month for {{plans.teams.baseUsers}} users, Teams
additional users ${{plans.teams.userPrice}} /month <span>For businesses and other large teams.</span>
<span>
{{plans.teams.basePrice | currency:'$'}} /month for {{plans.teams.baseUsers}} users,
additional users {{plans.teams.userPrice | currency:'$'}} /month
</span>
</label> </label>
<p class="help-block">For businesses and other large teams.</p>
</div> </div>
</div> </div>
<div ng-show="model.plan !== 'free'"> <div ng-show="model.plan !== 'free'">
<hr /> <hr />
<h4>Additional Users</h4> <h4>Additional Users</h4>
<p> <p>
Your plan comes with {{plans[model.plan].baseUsers}} users. You can add additional users to your plan Your plan comes with <b>{{plans[model.plan].baseUsers}}</b> users. You can add additional users
for ${{plans[model.plan].userPrice}} /month. for {{plans[model.plan].userPrice | currency:'$'}} /month.
</p> </p>
<div class="form-group" show-errors> <div class="row">
<label for="additionalUsers">Additional Users</label> <div class="col-md-6">
<div class="form-group" show-errors style="margin: 0;">
<label for="additionalUsers" class="sr-only">Additional Users</label>
<input type="number" id="additionalUsers" name="AdditionalUsers" ng-model="model.additionalUsers" min="0" <input type="number" id="additionalUsers" name="AdditionalUsers" ng-model="model.additionalUsers" min="0"
class="form-control" api-field /> class="form-control" api-field />
</div> </div>
</div> </div>
</div>
</div>
<div ng-show="model.plan !== 'free'"> <div ng-show="model.plan !== 'free'">
<hr /> <hr />
<h4>Billing Totals</h4> <h4>Billing Totals</h4>
<div class="radio"> <div class="radio">
<label> <label class="label-block">
<input type="radio" ng-model="model.interval" name="BillingInterval" value="annually"> <input type="radio" ng-model="model.interval" name="BillingInterval" value="annually">
Bill me annually Bill me annually
<span>
Base price:
{{plans[model.plan].basePrice | currency:"$":2}} &times;12 mo. =
{{plans[model.plan].annualBasePrice | currency:"$":2}} /year
</span>
<span>
Additional users:
{{model.additionalUsers || 0}} &times;{{plans[model.plan].userPrice | currency:"$":2}}
&times;12 mo. = {{(model.additionalUsers * plans[model.plan].annualUserPrice) | currency:"$":2}} /year
</span>
<span>
<b>Total:</b>
{{((model.additionalUsers || 0) * plans[model.plan].annualUserPrice + plans[model.plan].annualBasePrice) | currency:"USD $":2}} /year
</span>
</label> </label>
<p class="help-block">
Base price: {{plans[model.plan].basePrice | currency:"$":2}} &times;12 mo. = {{plans[model.plan].annualBasePrice | currency:"$":2}} /year<br />
Additional users: {{model.additionalUsers || 0}} &times;{{plans[model.plan].userPrice | currency:"$":2}} &times;12 mo. = {{(model.additionalUsers * plans[model.plan].annualUserPrice) | currency:"$":2}} /year<br />
<b>Total:</b> {{((model.additionalUsers || 0) * plans[model.plan].annualUserPrice + plans[model.plan].annualBasePrice) | currency:"USD $":2}} /year
</p>
</div> </div>
<div class="radio" ng-show="model.plan !== 'personal'"> <div class="radio" ng-show="model.plan !== 'personal'">
<label> <label class="label-block">
<input type="radio" ng-model="model.interval" name="BillingInterval" value="monthly"> <input type="radio" ng-model="model.interval" name="BillingInterval" value="monthly">
Bill me monthly Bill me monthly
<span>
Base price:
{{plans[model.plan].monthlyBasePrice | currency:"$":2}} /month
</span>
<span>
Additional users:
{{model.additionalUsers || 0}} &times;{{plans[model.plan].monthlyUserPrice | currency:"$":2}} =
{{(model.additionalUsers * plans[model.plan].monthlyUserPrice) | currency:"$":2}} /month
</span>
<span>
<b>Total:</b>
{{((model.additionalUsers || 0) * plans[model.plan].monthlyUserPrice + plans[model.plan].monthlyBasePrice) | currency:"USD $":2}} /month
</span>
</label> </label>
<p class="help-block">
Base price: {{plans[model.plan].monthlyBasePrice | currency:"$":2}} /month<br />
Additional users: {{model.additionalUsers || 0}} &times;{{plans[model.plan].monthlyUserPrice | currency:"$":2}} = {{(model.additionalUsers * plans[model.plan].monthlyUserPrice) | currency:"$":2}} /month<br />
<b>Total:</b> {{((model.additionalUsers || 0) * plans[model.plan].monthlyUserPrice + plans[model.plan].monthlyBasePrice) | currency:"USD $":2}} /month
</p>
</div> </div>
</div> </div>
<div ng-show="model.plan !== 'free'"> <div ng-show="model.plan !== 'free'">

23
src/less/vault.less
View File

@ -171,6 +171,29 @@ form .btn .loading-icon {
} }
} }
.radio .label-block {
display: block;
border: 1px solid @table-border-color;
border-radius: 3px;
padding: 10px 10px 10px 30px;
font-weight: bold;
input[type=radio] {
margin-left: -20px;
}
span {
display: block;
color: @text-muted;
font-size: 90%;
font-weight: normal;
&:last-child {
margin-bottom: 0;
}
}
}
/* Modals */ /* Modals */
.modal-footer { .modal-footer {