diff options
| -rwxr-xr-x | StoneIsland/www/css/account.css | 28 | ||||
| -rwxr-xr-x | StoneIsland/www/css/nav.css | 6 | ||||
| -rwxr-xr-x | StoneIsland/www/index.html | 93 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/nav/AddressView.js | 9 |
4 files changed, 78 insertions, 58 deletions
diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css index fd5283e0..4f9903e1 100755 --- a/StoneIsland/www/css/account.css +++ b/StoneIsland/www/css/account.css @@ -163,7 +163,10 @@ input[type=text], input[type=password], input[type=number], input[type=email] { .half-input { margin: 0px auto; - display: block; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; margin-top: 4px; width: calc(100vw - 10px); overflow: auto; @@ -310,10 +313,12 @@ input.switch:checked + label:after { .container-fill { min-height:80px; + display: flex; flex: 1; align-items: center; justify-content: center; position:relative; + flex-direction: column; } .container-fill-condensed { @@ -331,14 +336,14 @@ input.switch:checked + label:after { width:calc(100vw - 10px); box-sizing:border-box; margin:10px auto 0; - position:relative + position:relative; } .container-row .container-message-condensed { margin: 2px auto!important } .container-fill .container-message { - font-size:16px; + font-size:14px; letter-spacing:0.5px; text-align:center; position:absolute; @@ -457,10 +462,6 @@ input.switch:checked + label:after { } .privacy-msg { - left: 50%; - display: inline-block; - position: relative; - transform: translateX(-50%); padding-top: 15px; padding-bottom: 80px; } @@ -490,18 +491,23 @@ input.switch:checked + label:after { display: block; } .half-input .select-wrapper { + display: flex; + align-items: center; + justify-content: center; width: 50%; border: 0; margin-top: 0px; float: left; box-sizing: border-box; border: 1px solid #696969; +} +.half-input .select-wrapper:nth-child(2) { border-left: 0px; } .half-input .select-wrapper span { - top: 8px; color: #aaa; + top: 0; } .select-wrapper [type=date] { opacity: 0; @@ -537,10 +543,14 @@ input.switch:checked + label:after { text-align: center; color: #696969; border: 1px solid; - padding-top: 9px; + border-left: 0; font-size: 14px; height: 48px; box-sizing: border-box; + width: 50%; + display: flex; + justify-content: center; + align-items: center; } .container-row .half-input input { diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css index 75684d2a..5c7b8a09 100755 --- a/StoneIsland/www/css/nav.css +++ b/StoneIsland/www/css/nav.css @@ -309,7 +309,7 @@ padding-bottom:0px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; - -webkit-transform: translateZ(0) translateX(249px); + -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } #curtain.visible { @@ -317,10 +317,6 @@ padding-bottom:0px; opacity: 1; z-index: 2; } -.nav #curtain { - -webkit-transform: translateZ(0) translateX(249px); - transform: translateZ(0) translateX(249px); -} #curtain.white { background: rgba(255,255,255,0.8); } diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index e57f7a39..9cb3780f 100755 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -526,39 +526,38 @@ <label for="profile_confirm_password">New Password (7 characters or more)</label> <input type="password" id="profile_confirm_password" name="NewPassword" aria-placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required tabindex="7"> <span class='err'></span> - </div> + </div> - <div class="container-fill container-fill-condensed"> - <div class="container-message container-message-condensed"> - <span class="msg msg-condensed"> - </span> - </div> + <div class="container-fill container-fill-condensed"> + <div class="container-message container-message-condensed"> + <span class="msg msg-condensed"> + </span> </div> - <div class="container-row"> - <div class="checkbox-container"> - <div class="checkbox-row"> - <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-data-profiling-profile" aria-labelledby="yoox-letter-checkbox" name="YooxLetter" value="true" required tabindex="7"> - <label for="checkbox-data-profiling-profile"></label> - </div> - <label class="checkbox-caption" for="checkbox-data-profiling-profile" id="yoox-letter-checkbox"> - I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION FOR MARKETING PURPOSES. - </label> - </div> - <div class="checkbox-row"> - <div class="checkbox-toggle"> - <input type="checkbox" id="checkbox-shopping-data-profiling-profile" aria-labelledby="yoox-data-profiling-checkbox" name="DataProfiling" value="true" required tabindex="8"> - <label for="checkbox-shopping-data-profiling-profile"></label> - </div> - <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile" id="yoox-data-profiling-checkbox"> - I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION TO CUSTOMIZE MY SHOPPING EXPERIENCE BASED ON MY INTERESTS AND HABITS. - </label> + </div> + <div class="container-row"> + <div class="checkbox-container"> + <div class="checkbox-row"> + <div class="checkbox-toggle"> + <input type="checkbox" id="checkbox-data-profiling-profile" aria-labelledby="yoox-letter-checkbox" name="YooxLetter" value="true" required tabindex="7"> + <label for="checkbox-data-profiling-profile"></label> </div> - <div class="privacy-msg"> - Personal data will be electronically processed by SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP in order to complete your request. Please note that you are responsible for third party data that you disclose to SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP. - <br> - Consult our <a href="#/page/privacy">PRIVACY POLICY</a> for further information. + <label class="checkbox-caption" for="checkbox-data-profiling-profile" id="yoox-letter-checkbox"> + I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION FOR MARKETING PURPOSES. + </label> + </div> + <div class="checkbox-row"> + <div class="checkbox-toggle"> + <input type="checkbox" id="checkbox-shopping-data-profiling-profile" aria-labelledby="yoox-data-profiling-checkbox" name="DataProfiling" value="true" required tabindex="8"> + <label for="checkbox-shopping-data-profiling-profile"></label> </div> + <label class="checkbox-caption" for="checkbox-shopping-data-profiling-profile" id="yoox-data-profiling-checkbox"> + I AGREE TO STONE ISLAND - SPORTSWEAR COMPANY COLLECTING AND PROCESSING MY PERSONAL INFORMATION TO CUSTOMIZE MY SHOPPING EXPERIENCE BASED ON MY INTERESTS AND HABITS. + </label> + </div> + <div class="privacy-msg"> + Personal data will be electronically processed by SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP in order to complete your request. Please note that you are responsible for third party data that you disclose to SPORTSWEAR COMPANY and YOOX NET-A-PORTER GROUP. + <br> + Consult our <a href="#/page/privacy">PRIVACY POLICY</a> for further information. </div> </div> </div> @@ -566,7 +565,6 @@ </div> </div> </div> - <div id="shipping"> <div class="scroll"> @@ -583,7 +581,7 @@ information will always remain private </span> </div> - <div class="privacy-msg"> + <div rel="link" class="privacy-msg"> Consult our <u>PRIVACY POLICY</u> for further information. </div> </div> @@ -608,7 +606,7 @@ information will always remain private </span> </div> - <div class="privacy-msg"> + <div rel="link" class="privacy-msg"> Consult our <u>PRIVACY POLICY</u> for further information. </div> </div> @@ -1092,10 +1090,14 @@ <span class='err'></span> <div class="half-input"> + <label for="cc_expiration_month">EXPIRATION MONTH</label> + <label for="cc_expiration_year">EXPIRATION YEAR</label> + </div> + <div class="half-input"> <div class="select-wrapper"> - <span>EXPIRATION MONTH</span> - <select name="ExpirationMonth"> + <span></span> + <select name="ExpirationMonth" id="cc_expiration_month"> <option value="NONE">EXPIRATION MONTH</option> <option value="01">01</option> <option value="02">02</option> @@ -1112,10 +1114,9 @@ </select> </div> <div class="select-wrapper"> - <span>EXPIRATION YEAR</span> - <select name="ExpirationYear"> + <span></span> + <select name="ExpirationYear" id="cc_expiration_year"> <option value="NONE">EXPIRATION YEAR</option> - <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> @@ -1154,17 +1155,27 @@ <span class="err"></span> <div class="half-input"> - <input type="text" name="City" aria-placeholder="City"> + <label for="address_city">City</label> + <label for="address_state">State</label> + </div> + + <div class="half-input"> + <input type="text" id="address_city" name="City" aria-placeholder="City"> <div class="select-wrapper"> - <span>STATE</span> - <select name="Province"> + <span></span> + <select id="address_state" name="Province"> {{PROVINCES}} </select> </div> </div> <div class="half-input"> - <input type="text" name="ZipCode" aria-placeholder="ZIP" required> + <label for="address_zip">Zip</label> + <label>Country</label> + </div> + + <div class="half-input"> + <input type="text" id="address_zip" name="ZipCode" aria-placeholder="ZIP" required> <div class="country-wrapper-static"> <span class="country-label">UNITED STATES</span> <!-- diff --git a/StoneIsland/www/js/lib/nav/AddressView.js b/StoneIsland/www/js/lib/nav/AddressView.js index 51511204..02163d51 100755 --- a/StoneIsland/www/js/lib/nav/AddressView.js +++ b/StoneIsland/www/js/lib/nav/AddressView.js @@ -34,12 +34,15 @@ var AddressView = SerializableView.extend({ "Address1": "Please enter your street address.", "City": "Please enter your city.", "ZipCode": "Please enter your zip code.", + "Phone": "Please enter your phone number.", }, validate_fields: function(data, errors){ if (this.disabled) { return } if (this.checkPhone) { - var phone_number = data.Phone ? data.Phone.replace(/[^0-9]/g, "").replace(/^[01]+/) : "" + var phone_number = data.Phone ? String(data.Phone).replace(/[^0-9]/g, "").replace(/^[01]+/, '') : "" + data.Phone = phone_number + this.$('[name=Phone]').val(phone_number) var phone_length = phone_number.length if (phone_length === 0 || ! data.Phone) { errors.push([ "Phone", "Please enter your phone number." ]) @@ -50,10 +53,10 @@ var AddressView = SerializableView.extend({ else if (phone_length > 10) { errors.push([ "Phone", "International phone numbers are not accepted." ]) } - else if (data.Phone[0] === '+') { + else if (phone_number.charAt(0) === '+') { errors.push([ "Phone", "Please enter a valid 10 digit US/Canada phone number. International phone numbers are not accepted." ]) } - else if (phone_number[0] === '1') { + else if (phone_number.charAt(0) === '1') { errors.push([ "Phone", "Please enter a valid 10 digit US/Canada phone number. International phone numbers are not accepted." ]) } } |