pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
commit 134c354adbfcad9ad50ae98d890fff0f5f0a04c5 parent f23d83d840947eb39569b7a0b1a98ca87867caa2 Author: Jul <jul@9o.is> Date: Wed, 25 Jun 2014 10:55:46 -0400 added incomplete purchase limit wizard page Diffstat:
| M | src/main/scala/inc/pyc/config/Site.scala | | | 3 | +++ |
| M | src/main/webapp/less/custom.less | | | 5 | +++++ |
| A | src/main/webapp/less/other/angular-wizard.less | | | 180 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | src/main/webapp/less/pages/purchase_limit.less | | | 18 | ++++++++++++++++++ |
| M | src/main/webapp/less/styles.less | | | 9 | +++++++++ |
| A | src/main/webapp/settings/purchase_limit.html | | | 56 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | src/main/webapp/templates-hidden/parts/id-verification-form.html | | | 65 | ++++++----------------------------------------------------------- |
| A | src/main/webapp/templates-hidden/parts/phone-verification-form.html | | | 39 | +++++++++++++++++++++++++++++++++++++++ |
8 files changed, 316 insertions(+), 59 deletions(-)
diff --git a/src/main/scala/inc/pyc/config/Site.scala b/src/main/scala/inc/pyc/config/Site.scala @@ -67,6 +67,8 @@ object Site extends Locs { Templates("settings" :: page :: Nil) openOr xml.NodeSeq.Empty })) + + val purchaseLimit = MenuLoc(Menu.i("Purchase Limit") / "settings" / "purchase_limit" >> SettingsGroup >> RequireLoggedIn) val account = MenuLoc(Menu.i("Account") / "settings" / "account" >> SettingsGroup >> RequireLoggedIn) val editProfile = MenuLoc(Menu("EditProfile", "Profile") / "settings" / "profile" >> SettingsGroup >> RequireLoggedIn) @@ -91,6 +93,7 @@ object Site extends Locs { settings.menu, password.menu, idVerification.menu, + purchaseLimit.menu, emailResetToken.menu, Menu.i("Error") / "error" >> Hidden, Menu.i("404") / "404" >> Hidden, diff --git a/src/main/webapp/less/custom.less b/src/main/webapp/less/custom.less @@ -149,6 +149,11 @@ padding-bottom: 20px; } +.padding-20-sides { + padding-left: 20px; + padding-right: 20px; +} + .margin-10 { margin: 10px !important; } diff --git a/src/main/webapp/less/other/angular-wizard.less b/src/main/webapp/less/other/angular-wizard.less @@ -0,0 +1,179 @@ +.steps-indicator { + /* ---- steps quantity ---- */ + + @color-default: #E6E6E6; + @color-current: #808080; + @color-done: #339933; + @color-editing: #FF0000; + + position: absolute; + right: 0; + bottom: 0; + left: 0; + margin: 0; + padding: 0; + height: 30px; + list-style: none; + + + + &:before { + background-color: @color-default; + content: ''; + position: absolute; + height: 1px; + } + + &.steps-2:before { + left: ~'calc(100% / 2 / 2)'; + right: ~'calc(100% / 2 / 2)'; + } + + &.steps-3:before { + left: ~'calc(100% / 3 / 2)'; + right: ~'calc(100% / 3 / 2)'; + } + + &.steps-4:before { + left: ~'calc(100% / 4 / 2)'; + right: ~'calc(100% / 4 / 2)'; + } + + &.steps-5:before { + left: ~'calc(100% / 5 / 2)'; + right: ~'calc(100% / 5 / 2)'; + } + + &.steps-6:before { + left: ~'calc(100% / 6 / 2)'; + right: ~'calc(100% / 6 / 2)'; + } + + &.steps-7:before { + left: ~'calc(100% / 7 / 2)'; + right: ~'calc(100% / 7 / 2)'; + } + + &.steps-8:before { + left: ~'calc(100% / 8 / 2)'; + right: ~'calc(100% / 8 / 2)'; + } + + &.steps-9:before { + left: ~'calc(100% / 9 / 2)'; + right: ~'calc(100% / 9 / 2)'; + } + + &.steps-10:before { + left: ~'calc(100% / 10 / 2)'; + right: ~'calc(100% / 10 / 2)'; + } + + /* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */ + * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + + li { + position: relative; + float: left; + margin: 0; + padding: 0; + padding-top: 10px; + text-align: center; + line-height: 15px; + + a { + color: @color-current; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + transition: 0.25s; + cursor: pointer; + + &:before { + position: absolute; + top: -7px; + left: ~'calc(50% - 7px)'; + width: 14px; + height: 14px; + border-radius: 100%; + background-color: @color-default; + content: ''; + transition: 0.25s; + } + + &:hover { + color: darken(@color-current, 20%); + } + } + } + + &.steps-2 li { + width: ~'calc(100% / 2)'; + } + + &.steps-3 li { + width: ~'calc(100% / 3)'; + } + + &.steps-4 li { + width: ~'calc(100% / 4)'; + } + + &.steps-5 li { + width: ~'calc(100% / 5)'; + } + + &.steps-6 li { + width: ~'calc(100% / 6)'; + } + + &.steps-7 li { + width: ~'calc(100% / 7)'; + } + + &.steps-8 li { + width: ~'calc(100% / 8)'; + } + + &.steps-9 li { + width: ~'calc(100% / 9)'; + } + + &.steps-10 li { + width: ~'calc(100% / 10)'; + } + + &.steps-11 li { + width: ~'calc(100% / 11)'; + } + + li.default { + pointer-events: none; + + a:hover { + color: @color-current; + } + } + + li.current, + li.editing { + pointer-events: none; + } + + li.current a:before { + background-color: @color-current; + } + + li.done a:before { + background-color: @color-done; + } + + li.editing a:before { + background-color: @color-editing; + } +} +\ No newline at end of file diff --git a/src/main/webapp/less/pages/purchase_limit.less b/src/main/webapp/less/pages/purchase_limit.less @@ -0,0 +1,17 @@ +#wizard-purchase-limit { + + .steps-indicator { + bottom: auto; // remove from bottom + padding-top: 25px; + } + + > .steps { + padding-top: 50px; + + > .step { + > .main-message { + text-align: center; + } + } + } +} +\ No newline at end of file diff --git a/src/main/webapp/less/styles.less b/src/main/webapp/less/styles.less @@ -137,6 +137,14 @@ @import "@{SmartAdminPath}/main-custom.less"; /********************************************************* + * The Other Parts + ******************************************************* + */ +@OtherPath: "./other"; + +@import "@{OtherPath}/angular-wizard.less"; + +/********************************************************* * My Website Pages ******************************************************* */ @@ -145,6 +153,7 @@ @import "@{PagesPath}/about.less"; @import "@{PagesPath}/index.less"; @import "@{PagesPath}/locations.less"; +@import "@{PagesPath}/purchase_limit.less"; /********************************************************* * Overrides diff --git a/src/main/webapp/settings/purchase_limit.html b/src/main/webapp/settings/purchase_limit.html @@ -0,0 +1,55 @@ +<div data-lift="surround?with=settings-wrap&at=content"> + <div class="row margin-top-10"> + <wizard id="wizard-purchase-limit" on-finish="finishedWizard()" ng-cloak> + + <wz-step title="$500"> + <div class="main-message"> + <div class="jumbotron"> + <h1>As a regular user, your limit is $500</h1> + + <div class="padding-20"> + <button type="submit" wz-next class="btn btn-primary btn-lg"> + Verify To Raise The Limit + </button> + </div> + </div> + </div> + </wz-step> + + <wz-step title="$1,000"> + <div class="main-message padding-20"> + <h1>$1,000: Verify Zip Code and Phone Number</h1> + </div> + + <div class="row"> + <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3"> + <span data-lift="embed?what=/templates-hidden/parts/phone-verification-form"></span> + </div> + </div> + + </wz-step> + + <wz-step title="$3,000"> + <div class="main-message padding-10"> + <h1>$3,000: Verify Identity</h1> + </div> + + <div class="row"> + <div class="col-xs-12 col-sm-6 col-sm-offset-3"> + <span data-lift="embed?what=/templates-hidden/parts/id-verification-form"></span> + </div> + </div> + + </wz-step> + + <wz-step title="Unlimited"> + <div class="main-message"> + + </div> + <p>Even more steps!!</p> + <input type="submit" wz-next value="Finish now" /> + </wz-step> + + </wizard> + </div> +</div> +\ No newline at end of file diff --git a/src/main/webapp/templates-hidden/parts/id-verification-form.html b/src/main/webapp/templates-hidden/parts/id-verification-form.html @@ -1,73 +1,20 @@ -<div data-lift="IdVerification" ng-controller="IdVerificationCtrl" ng-cloak> - - <h2 class="text-primary"><b>Status: {{model.idverification}}</b></h2> - +<div data-lift="IdVerification" ng-controller="IdVerificationCtrl" ng-cloak> <form name="form" class="smart-form client-form" ng-submit="save()" ng-upload="complete(content)" novalidate> <fieldset> - <section > - <label>Name: {{model.fname}} {{model.lname}}</label> - </section> - - <div class="row"> - <section class="col col-6"> - <label>Date of Birth</label> - <label class="input" ng-class="{{ stateSuccessError('dob') }}"> - <i class="icon-append fa fa-calendar-o"></i> - <input name="dob" ng-model="model.dob" ui-mask="99 / 99 / 9999" placeholder="xx / xx / xxxx" type="text" required> - <b class="tooltip tooltip-top-left">Please provide your date of birth.</b> - </label> - </section> - <section class="col col-6"> - <label>Last 4 digits of SSN</label> - <label class="input" ng-class="{{ stateSuccessError('ssn') }}"> - <i class="icon-append fa fa-asterisk"></i> - <input name="ssn" ng-model="model.ssn" ui-mask="9999" placeholder="xxxx" type="text" required> - <b class="tooltip tooltip-top-left">Please provide the last 4 digits of your social security number.</b> - </label> - </section> - </div> - - <section> - <label>Address <small> as shown in your ID</small></label> - <label class="input" ng-class="{{ stateSuccessError('address') }}"> - <input name="address" ng-model="model.address" type="text" required> - <b class="tooltip tooltip-top-left">Please provide the address as shown in your identification.</b> - </label> - </section> - - <div class="row"> - <section class="col col-6"> - <label>City</label> - <label class="input" ng-class="{{ stateSuccessError('city') }}"> - <input name="city" ng-model="model.city" type="text" required> - <b class="tooltip tooltip-top-left">Please provide the city as shown in your identification.</b> - </label> - </section> - <section class="col col-6" ng-class="{{ stateSuccessError('state') }}"> - <label>State</label> - <label data-lift="Selector.states" class="select"> - <select name="state" ng-model="model.state" required></select> - <i></i> - <b class="tooltip tooltip-top-left">Please provide the U.S. state as shown in your identification.</b> - </label> - </section> - </div> - - <h6>Identification Files: </h6> - <section> + <label>Government issued photo ID</label> <label class="input input-file" ng-class="{{ stateSuccessError('idfile') }}"> <div class="button"> - <input name="idfile" type="file" ng-file-select multiple required> + <input name="idfile" type="file" ng-file-select required> Browse </div> <input type="text" readonly=""></input> <b class="tooltip tooltip-top-left">Click browse and upload your identification document.</b> <small class="help-block"> - Must include at least 2 files: + Identification should be either: <ul class="list-unstyled"> - <li>1. A government issued photo ID (Driver's License, Passport)</li> - <li>2. A document as proof of address (Utility bill, cell phone bill or auto/renters insurance)</li> + <li>- Driver's License</li> + <li>- Passport</li> </ul> </small> </label> diff --git a/src/main/webapp/templates-hidden/parts/phone-verification-form.html b/src/main/webapp/templates-hidden/parts/phone-verification-form.html @@ -0,0 +1,38 @@ +<div data-lift="PhoneVerification" ng-controller="PhoneVerificationCtrl" ng-cloak> + <form name="form" class="smart-form client-form padding-20-sides" ng-submit="save()" novalidate> + <fieldset> + <section> + <label>Zip Code</label> + <label class="input" ng-class="{{ stateSuccessError('postal') }}"> + <input name="postal" ng-model="model.postal" ui-mask="99999" placeholder="xxxxx" type="text" class="input" required> + <span ng-show="form.postal.$invalid && form.postal.$dirty" class="text-danger small"> + Invalid postal code + </span> + </label> + </section> + + <section> + <label>Phone Number <small>with text messaging</small></label> + <label class="input" ng-class="{{ stateSuccessError('phone') }}"> + <i class="icon-append fa fa-phone"></i> + <input name="phone" ng-model="model.phone" ui-mask="(999) 999-9999" placeholder="(xxx) xxx-xxxx" type="text" required> + <span ng-show="form.phone.$invalid && form.phone.$dirty" class="text-danger small"> + Invalid phone number + </span> + </label> + </section> + + <section> + <label class="input" ng-class="{{ stateSuccessError('smscode') }}"> + <label>SMS Code</label> + <input name="smscode" ng-model="model.smscode" ui-mask="999-999" placeholder="xxx-xxx" type="text" required> + </label> + </section> + + </fieldset> + <footer> + <button type="submit" class="btn btn-primary">Send SMS Code</button> + <button wz-next type="submit" class="btn btn-primary">Verify Number</button> + </footer> + </form> +</div> +\ No newline at end of file