diff options
| -rwxr-xr-x | StoneIsland/www/css/nav.css | 30 | ||||
| -rwxr-xr-x | StoneIsland/www/css/products.css | 24 | ||||
| -rwxr-xr-x | StoneIsland/www/index.html | 7 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/blogs/HubView.js | 1 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/blogs/StoryView.js | 2 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/etc/accessibility.js | 5 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/nav/AddressView.js | 2 | ||||
| -rwxr-xr-x | StoneIsland/www/js/lib/products/GalleryView.js | 9 |
8 files changed, 48 insertions, 32 deletions
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css index b7002f20..885ee500 100755 --- a/StoneIsland/www/css/nav.css +++ b/StoneIsland/www/css/nav.css @@ -198,7 +198,7 @@ padding-bottom:0px; display: block; position: absolute; top: 0; left: 0; width: 100%; - height: 42px; + height: 48px; border-bottom: 1px solid black; } #header .logo { @@ -207,30 +207,30 @@ padding-bottom:0px; background-position: center center; position: absolute; background-size: contain; - width: 100px; height: 40px; - left: 50%; top: -4px; + width: 100px; height: 48px; + left: 50%; top: -3px; margin-left: -50px; top:0px; } #header .burger { display: inline-block; font-size: 24px; - padding: 9px 10px 5px; + padding: 12px 13px 7px; } #header .cart_rapper { display: inline-block; position: relative; float: right; - width: 40px; height: 40px; + width: 48px; height: 48px; } #header .cart { position: relative; float: right; width: 18px; - top: 15px; + top: 5px; height: 18px; - margin-right: 18px; + margin-right: 0px; background: #fff; background-image:url(../img/cart-box.png); background-size:100%; @@ -274,7 +274,7 @@ padding-bottom:0px; #footer div { width: 50%; text-align: center; - padding: 10px 0; + padding: 12px 0; color: #000; float: left; font-size:14px; @@ -462,20 +462,20 @@ padding-bottom:0px; #cart, #profile, #shipping, #payment, #settings, #orders { position: absolute; - top: 43px; - height: -webkit-calc(100% - 43px - 39px); - height: calc(100% - 43px - 39px); + top: 49px; + height: -webkit-calc(100% - 49px - 39px); + height: calc(100% - 49px - 39px); width: 100%; overflow: hidden; } #collection.single { - height: -webkit-calc(100% - 43px); - height: calc(100% - 43px); + height: -webkit-calc(100% - 49px); + height: calc(100% - 49px); } #story, #hub, #archive, .page, #closed { /* these things do not have a footer */ - height: -webkit-calc(100% - 43px); - height: calc(100% - 43px); + height: -webkit-calc(100% - 49px); + height: calc(100% - 49px); } h1 { diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css index 59bb403f..1a7d5ba2 100755 --- a/StoneIsland/www/css/products.css +++ b/StoneIsland/www/css/products.css @@ -136,14 +136,14 @@ } .product .style { - padding:4px 9px; + padding: 0; border:1px solid black; float:left } .product .share { float:right; - padding:4px 9px; + padding: 12px 12px; border:1px solid black; } @@ -152,17 +152,21 @@ font-size:14px; } -.product .size { - padding-right:16px; +.product span { position:relative; - box-sizing:border-box + box-sizing:border-box; + display: inline-block; + padding: 12px; +} +.product span.size { + border-right: 1px solid #444; } .product .price { display:table-cell; font-size:14px; text-align:right; - vertical-align:bottom + vertical-align:bottom; } .product .price, .product .type { @@ -179,12 +183,12 @@ .style-share { letter-spacing:0.5px; - font-size:12.35px + font-size:12.35px; } .size-color { position:relative; - font-size:12.35px + font-size:12.35px; } .type-price, .style-share { @@ -194,7 +198,7 @@ } -.size::after { +/*.size::after { content: ''; display: inline-block; width: 1px; @@ -205,7 +209,7 @@ right:5px; background: #999; } - +*/ .product .fit, .product .notAvailableInCanada { diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index b6fc8317..9ea46a85 100755 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -311,11 +311,11 @@ <div class="loader"></div> <div id="gallery" class="gallery"> <script type="text/html" class="template"> - <div class="item" style="background-image:url({{image}})"></div> + <div class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div> </script> </div> - <div class="gallery-left"></div> - <div class="gallery-right"></div> + <div class="gallery-left" aria-label="Scroll gallery left"></div> + <div class="gallery-right" aria-label="Scroll gallery right"></div> <div class="content"> <div class="product-header"> <span class="title"></span> @@ -1227,6 +1227,7 @@ <script src="js/lib/etc/geo.js"></script> <script src="js/lib/etc/sim.js"></script> <script src="js/lib/etc/backup_db.js"></script> +<script src="js/lib/etc/accessibility.js"></script> <script src="js/lib/view/View.js"></script> <script src="js/lib/view/Router.js"></script> diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js index b072a887..c12e656f 100755 --- a/StoneIsland/www/js/lib/blogs/HubView.js +++ b/StoneIsland/www/js/lib/blogs/HubView.js @@ -71,6 +71,7 @@ var HubView = ScrollableView.extend({ row.image.forEach(function(img){ var el = document.createElement("div") el.style.backgroundImage = "url(" + img.uri + ")" + el.setAttribute('aria-label', img.caption) el.className = "item" $gallery.append(el) }) diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js index 7dcf8cd6..9ba17343 100755 --- a/StoneIsland/www/js/lib/blogs/StoryView.js +++ b/StoneIsland/www/js/lib/blogs/StoryView.js @@ -67,7 +67,7 @@ var StoryView = ScrollableView.extend({ this.$img.stop().fadeTo(110,0.65, function() { $replace.attr("src", section.image.uri) - $replace.attr("alt", section.image.description) + $replace.attr("alt", section.image.caption) }).fadeTo(130,1) } diff --git a/StoneIsland/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js new file mode 100644 index 00000000..5acb0723 --- /dev/null +++ b/StoneIsland/www/js/lib/etc/accessibility.js @@ -0,0 +1,5 @@ +$(function(){ + $("h1").each(function(el){ + $(el).attr('aria-label', "Page title: " + el.innerText) + }) +})
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/nav/AddressView.js b/StoneIsland/www/js/lib/nav/AddressView.js index 6fe8416f..51511204 100755 --- a/StoneIsland/www/js/lib/nav/AddressView.js +++ b/StoneIsland/www/js/lib/nav/AddressView.js @@ -39,7 +39,7 @@ var AddressView = SerializableView.extend({ 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 ? data.Phone.replace(/[^0-9]/g, "").replace(/^[01]+/) : "" var phone_length = phone_number.length if (phone_length === 0 || ! data.Phone) { errors.push([ "Phone", "Please enter your phone number." ]) diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js index 0acd48c5..9c012598 100755 --- a/StoneIsland/www/js/lib/products/GalleryView.js +++ b/StoneIsland/www/js/lib/products/GalleryView.js @@ -39,7 +39,9 @@ var GalleryView = View.extend({ Object.keys(valid_styles).sort(sort_image_styles).forEach(function(style){ var id = valid_styles[style] + "_" + style - var t = this.template.replace(/{{image}}/, sdk.image(code, id)) + var t = this.template + .replace(/{{image}}/, sdk.image(code, id)) + .replace(/{{alt}}/, YOOX_IMAGE_STYLE_LABELS[style]) this.$el.append(t) }.bind(this)) @@ -79,5 +81,8 @@ var GalleryView = View.extend({ }) var YOOX_IMAGE_STYLE_ORDER = "ZZZ f r d e a b c g l".split(" ") - +var YOOX_IMAGE_STYLE_LABELS = { + f: 'Front view', + r: 'Rear view', +} function sort_image_styles (b,a){ return (YOOX_IMAGE_STYLE_ORDER.indexOf(b)) - (YOOX_IMAGE_STYLE_ORDER.indexOf(a)) }
\ No newline at end of file |