summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2019-07-14 15:57:59 +0200
committerJules Laplace <julescarbon@gmail.com>2019-07-14 15:57:59 +0200
commit6d71b12ed61d19f8b6f25dfe93c37dc57b528f91 (patch)
treed24e8a79b2ac310c85bc8d1edb9378bcde88f541
parentdde692639f095c28f386d15595fb35ea1ca73ec2 (diff)
credit card view id. more aria labelling
Diffstat
-rwxr-xr-xStoneIsland/www/css/account.css13
-rwxr-xr-xStoneIsland/www/css/index.css3
-rwxr-xr-xStoneIsland/www/index.html100
-rwxr-xr-xStoneIsland/www/js/lib/account/AccountView.js2
-rwxr-xr-xStoneIsland/www/js/lib/nav/AddressView.js4
-rwxr-xr-xStoneIsland/www/js/lib/nav/CreditCardView.js4
-rwxr-xr-xStoneIsland/www/js/lib/products/ProductView.js4
7 files changed, 70 insertions, 60 deletions
diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 28e49ca4..be82a4c7 100755
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -348,16 +348,17 @@ input.switch:checked + label:after {
font-size:14px;
letter-spacing:0.5px;
text-align:center;
- position:absolute;
- top:50%;
- left:50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
width:100%;
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
+ min-height: 48px;
color:#000;
}
-
+.billing-container a {
+ text-decoration: none;
+}
.premessage {
top:calc(50% - 20px)!important;
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index d5a404ae..fa3dae54 100755
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -20,6 +20,9 @@ body {
font-size: 14px;
padding-top: constant(safe-area-inset-top);
}
+a, a:visited {
+ color: #000;
+}
.loader {
z-index: 2;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 546cd915..04ce1246 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -30,7 +30,7 @@
</head>
<body class="loading" role="application">
-<div id="nav">
+<div id="nav" role="directory">
<div id="nav-container">
<div id="nav-row">
<!-- flex -->
@@ -107,7 +107,7 @@
<span class="latlng" role="note" aria-label="Your Latitude and Longitude">+40&deg; 58' 90.9" N&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;74&deg; 04' 46.3" W</span>
</div>
- <div id="header">
+ <div id="header" role="menubar" aria-label="Menu bar">
<span role="menu" aria-label="Show main menu" class="burger ion-android-menu"></span>
<span role="link" aria-label="Homepage. Stone Island logo" class="logo"></span>
<span role="link" aria-label="View cart" class="cart_rapper"><span class="cart"><span role="display" class="cart_count">0</span></span></span>
@@ -115,7 +115,7 @@
<!-- BLOGS ================================================ -->
- <div id="story">
+ <div id="story" role="region" aria-label="Stone Island Story">
<div class="scroll">
<h1 aria-label="Current section: Stone Island Story">STORY</h1>
<img>
@@ -130,7 +130,7 @@
</div>
</div>
- <div id="hub">
+ <div id="hub" role="region" aria-label="Stone Island Hub">
<div class="scroll">
<h1 aria-label="Current section: Stone Island Hub">HUB</h1>
<div class="content">
@@ -160,7 +160,7 @@
<div class="fade-cover"></div>
</div>
- <div id="archive">
+ <div id="archive" role="region" aria-label="Stone Island Archive">
<div class="scroll">
<div class="content">
@@ -180,10 +180,10 @@
</div>
</div>
- <div class="menu">
+ <div class="menu" role="menu">
<div class="items">
<script type="text/html" class="template">
- <div class="item">{{title}}</div>
+ <div role="button" class="item">{{title}}</div>
</script>
</div>
</div>
@@ -193,14 +193,14 @@
</div>
</div>
- <div id="privacy" class="page">
+ <div id="privacy" role="region" aria-label="Privacy Policy" class="page">
<div class="scroll">
<h1 aria-label="Current section: Privacy Policy">PRIVACY POLICY</h1>
<div class="content"></div>
</div>
</div>
- <div id="account_terms" class="page">
+ <div id="account_terms" role="region" aria-label="My Account Terms and Conditions of Use" class="page">
<div class="scroll">
<h1 aria-label="Current section: My Account terms and conditions of use">MY ACCOUNT TERMS AND CONDITIONS OF USE</h1>
<div class="content">
@@ -256,21 +256,21 @@
</div>
</div>
- <div id="terms" class="page">
+ <div id="terms" role="region" aria-label="Terms and Conditions" class="page">
<div class="scroll">
<h1 aria-label="Current section: Terms and conditions">TERMS AND CONDITIONS</h1>
<div class="content"></div>
</div>
</div>
- <div id="returns" class="page">
+ <div id="returns" role="region" aria-label="Return Policy" class="page">
<div class="scroll">
<h1 aria-label="Current section: Return policy">RETURN POLICY</h1>
<div class="content"></div>
</div>
</div>
- <div id="care" class="page">
+ <div id="care" role="region" aria-label="Customer Care" class="page">
<div class="scroll">
<h1 aria-label="Current section: Customer care">CUSTOMER CARE</h1>
<div class="content"></div>
@@ -280,7 +280,7 @@
<!-- STORE ================================================ -->
- <div id="collection">
+ <div id="collection" role="region" aria-label="Store">
<div class="scroll">
<h1 aria-label="Current section: Store loading...">LOADING...</h1>
<div class="loader"></div>
@@ -294,7 +294,7 @@
</div>
</div>
- <div id="search">
+ <div id="search" role="region" aria-label="Search">
<div class="scroll">
<h1 aria-label="Current section: Search">SEARCH</h1>
<div class="form">
@@ -303,7 +303,7 @@
</div>
</div>
- <div id="product">
+ <div id="product" role="region" aria-label="Product view">
<div class="scroll">
<div class="loader"></div>
<div id="gallery" class="gallery" role="carousel">
@@ -344,7 +344,7 @@
</div>
</div>
- <div id="closed">
+ <div id="closed" role="region" aria-label="The store is closed">
<div class="closed_store_msg">
<h3>
LOADING THE STORE, PLEASE WAIT
@@ -361,7 +361,7 @@
<!-- ACCOUNT ================================================ -->
- <div id="login">
+ <div id="login" role="region" aria-label="Log In">
<div class="scroll">
<h1 aria-label="Current section: Log In">LOGIN</h1>
<div class="form">
@@ -390,7 +390,7 @@
</div>
</div>
- <div id="logout">
+ <div id="logout" role="region" aria-label="You are now logged out">
<div class="scroll">
<h1 aria-label="Current section: You are now Logged Out">LOGOUT</h1>
<div class="container">
@@ -403,7 +403,7 @@
</div>
</div>
- <div id="signup">
+ <div id="signup" role="region" aria-label="New User. Create an account">
<div class="scroll">
<h1 aria-label="Current section: New User. Create an account">NEW USER</h1>
<div class="form">
@@ -486,7 +486,7 @@
</div>
</div>
- <div id="profile">
+ <div id="profile" role="region" aria-label="My Profile">
<div class="scroll">
<h1 aria-label="Current section: My Profile">MY PROFILE</h1>
<div class="form">
@@ -559,7 +559,7 @@
</div>
</div>
- <div id="shipping">
+ <div id="shipping" role="region" aria-label="Address Book">
<div class="scroll">
<h1 aria-label="Current section: Your address book">ADDRESS BOOK</h1>
<div class="form">
@@ -583,7 +583,7 @@
</div>
</div>
- <div id="payment">
+ <div id="payment" role="region" aria-label="My Card">
<div class="scroll">
<h1 aria-label="Current section: My Card">MY CARD</h1>
<div class="form">
@@ -608,7 +608,7 @@
</div>
</div>
- <div id="settings">
+ <div id="settings" role="region" aria-label="Notifications">
<div class="scroll">
<h1 aria-label="Current section: Notifications">NOTIFICATIONS</h1>
<div class="form">
@@ -638,7 +638,7 @@
</div>
</div>
- <div id="orders">
+ <div id="orders" role="region" aria-label="My Orders">
<div class="scroll">
<h1 aria-label="Current section: My orders">MY ORDERS</h1>
<div id="order_list">
@@ -718,7 +718,7 @@
<!-- CART ================================================ -->
- <div id="cart">
+ <div id="cart" role="region" aria-label="Your Cart">
<h1 role="presentation">
<span class="full_msg" role="heading" aria-label="Current section: Your cart">
YOUR CART / <span class="itemcount"></span>
@@ -731,10 +731,10 @@
<div class="steps">
<span class="summary_step">SUMMARY</span>
<span class="shipping_step">SHIPPING</span>
- <span class="payment_step">BILLING</span>
+ <span class="payment_step">PAYMENT</span>
</div>
- <div id="cart_summary">
+ <div id="cart_summary" role="region" aria-label="Cart Summary">
<div class="scroll">
<div class="summary-container container">
<div class="container-row">
@@ -742,7 +742,7 @@
<div class="rows">
<script type="text/html" class="template">
<div class="cart_item_image">
- <img src="{{image}}">
+ <a href="#/store/{{sku}}"><img src="{{image}}"></a>
</div>
<div class="cart_item_info">
<span class="sku">{{sku}}</span>
@@ -789,7 +789,7 @@
</div>
</div>
- <div id="cart_shipping">
+ <div id="cart_shipping" role="region" aria-label="Cart Shipping">
<div class="scroll">
<div class="form">
<div class="dropdown-wrapper">
@@ -847,9 +847,11 @@
information will always remain private
</span>
</div>
- <div class="privacy-msg">
- Consult our <u>PRIVACY POLICY</u> for further information.
- </div>
+ <a href="#/page/privacy">
+ <div class="privacy-msg">
+ Consult our <u>PRIVACY POLICY</u> for further information.
+ </div>
+ </a>
</div>
</div>
@@ -857,7 +859,7 @@
</div>
</div>
- <div id="cart_payment">
+ <div id="cart_payment" role="region" aria-label="Cart Payment">
<div class="scroll">
<div class="form">
@@ -940,18 +942,18 @@
information will always remain private
</span>
</div>
- <div class="privacy-msg">
- Consult our <u>PRIVACY POLICY</u> for further information.
- </div>
+ <a class='privacy-link'> href="#/page/privacy">
+ <div class="privacy-msg">
+ Consult our <u>PRIVACY POLICY</u> for further information.
+ </div>
+ </a>
</div>
</div>
- <br><br><br><br>
-
</div>
</div>
</div>
- <div id="cart_confirm">
+ <div id="cart_confirm" role="region" aria-label="Confirm your order">
<div class="scroll">
<h1 aria-label="Current section: Confirm your cart">CONFIRM</h1>
@@ -1034,7 +1036,7 @@
</div>
- <div id="footer">
+ <div id="footer" role="menubar" aria-label="Footer">
<!-- 'Cancel' i think needs to go BACK in the navigation.. rather than jumping to the home screen -->
<div role="button" class="cancel">CANCEL</div>
<div role="button" class="ok">OK</div>
@@ -1044,7 +1046,7 @@
<div class="loader"></div>
</div>
- <div class="modal" id="consent_modal">
+ <div class="modal" id="consent_modal" role="modal" aria-label="Please accept the new terms">
YOUR MY ACCOUNT
<br><br>
We have improved the My Account Terms and Conditions of Use.
@@ -1086,19 +1088,19 @@
<!-- Forms -->
<script type="text/html" id="creditcard_template">
- <label for="creditcard_id">Credit Card Number</label>
- <input type="number" name="Number" aria-placeholder="CREDIT CARD NUMBER" required>
+ <label for="creditcard_id_{{_id}}">Credit Card Number</label>
+ <input type="number" id="creditcard_id_{{_id}}" name="Number" aria-placeholder="CREDIT CARD NUMBER" required>
<span class='err'></span>
<div class="half-input">
- <label for="cc_expiration_month">EXPIRATION MONTH</label>
- <label for="cc_expiration_year">EXPIRATION YEAR</label>
+ <label for="cc_expiration_month_{{_id}}">EXPIRATION MONTH</label>
+ <label for="cc_expiration_year_{{_id}}">EXPIRATION YEAR</label>
</div>
<div class="half-input">
<div class="select-wrapper">
<span></span>
- <select name="ExpirationMonth" id="cc_expiration_month">
+ <select name="ExpirationMonth" id="cc_expiration_month_{{_id}}">
<option value="NONE">EXPIRATION MONTH</option>
<option value="01">01</option>
<option value="02">02</option>
@@ -1116,7 +1118,7 @@
</div>
<div class="select-wrapper">
<span></span>
- <select name="ExpirationYear" id="cc_expiration_year">
+ <select name="ExpirationYear" id="cc_expiration_year_{{_id}}">
<option value="NONE">EXPIRATION YEAR</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
@@ -1133,8 +1135,8 @@
</select>
</div>
</div>
- <label for="cc_cvv">Security Code</label>
- <input type="number" id="cc_cvv" name="Cvv" aria-placeholder="SECURITY CODE" required>
+ <label for="cc_cvv_{{_id}}">Security Code</label>
+ <input type="number" id="cc_cvv_{{_id}}" name="Cvv" aria-placeholder="SECURITY CODE" required>
<span class='err'></span>
</script>
diff --git a/StoneIsland/www/js/lib/account/AccountView.js b/StoneIsland/www/js/lib/account/AccountView.js
index 8ac7c193..af035f6a 100755
--- a/StoneIsland/www/js/lib/account/AccountView.js
+++ b/StoneIsland/www/js/lib/account/AccountView.js
@@ -74,7 +74,7 @@ var AccountView = View.extend({
},
populateCreditCards: function(data, cb){
- console.log("populate ccs:", data.CreditCards)
+ // console.log("populate ccs:", data.CreditCards)
this.ccs = data.CreditCards
this.ccLookup = {}
if (! data.CreditCards || ! data.CreditCards.length) {
diff --git a/StoneIsland/www/js/lib/nav/AddressView.js b/StoneIsland/www/js/lib/nav/AddressView.js
index 66b80f65..fd0fa59d 100755
--- a/StoneIsland/www/js/lib/nav/AddressView.js
+++ b/StoneIsland/www/js/lib/nav/AddressView.js
@@ -1,5 +1,5 @@
-var AddressID = Math.round(Date.now() % 1000)
+var AddressViewID = Math.round(Date.now() % 1000)
var AddressView = SerializableView.extend({
@@ -16,7 +16,7 @@ var AddressView = SerializableView.extend({
this.parent = opt.parent
this.checkPhone = 'checkPhone' in opt ? opt.checkPhone : true
this.setElement( this.parent.$(".address") )
- this.$el.html(this.template.replace(/{{_id}}/g, AddressID++))
+ this.$el.html(this.template.replace(/{{_id}}/g, AddressViewID++))
},
populate: function(data){
diff --git a/StoneIsland/www/js/lib/nav/CreditCardView.js b/StoneIsland/www/js/lib/nav/CreditCardView.js
index 63784618..af53d964 100755
--- a/StoneIsland/www/js/lib/nav/CreditCardView.js
+++ b/StoneIsland/www/js/lib/nav/CreditCardView.js
@@ -1,4 +1,6 @@
+var CreditCardViewID = Math.round(Date.now() % 1000)
+
var CreditCardView = SerializableView.extend({
template: $("#creditcard_template").html(),
@@ -13,7 +15,7 @@ var CreditCardView = SerializableView.extend({
initialize: function(opt){
this.parent = opt.parent
this.setElement( this.parent.$(".cc") )
- this.$el.html(this.template)
+ this.$el.html(this.template.replace(/{{_id}}/g, CreditCardViewID++))
this.$number = this.$("[name=Number]")
this.$number.validateCreditCard(this.updateCard.bind(this), this.cardOptions)
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 3bcf5ee4..c47dfddd 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -434,7 +434,9 @@ var ProductView = ScrollableView.extend({
},
share: function(){
- window.plugins.socialsharing.share( this.item['ModelNames'], null, null, "http://deeplink.me/www.stoneisland.com/store/" + this.code)
+ if (window.plugins && 'socialsharing' in window.plugins) {
+ window.plugins.socialsharing.share( this.item['ModelNames'], null, null, "http://deeplink.me/www.stoneisland.com/store/" + this.code)
+ }
},
})
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-17 01:00:09 +0000