diff options
| -rw-r--r-- | StoneIsland/www/css/blogs.css | 14 | ||||
| -rw-r--r-- | StoneIsland/www/css/cart.css | 17 | ||||
| -rw-r--r-- | StoneIsland/www/css/fonts/fonts.css (renamed from StoneIsland/www/css/fonts.css) | 12 | ||||
| -rw-r--r-- | StoneIsland/www/css/index.css | 19 | ||||
| -rw-r--r-- | StoneIsland/www/css/nav.css | 101 | ||||
| -rw-r--r-- | StoneIsland/www/css/products.css | 9 | ||||
| -rw-r--r-- | StoneIsland/www/index.html | 43 | ||||
| -rw-r--r-- | StoneIsland/www/js/index.js | 26 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/_router.js | 20 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/ArchiveView.js | 4 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/HubView.js | 4 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/StoryView.js | 6 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/CurtainView.js | 21 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/IntroView.js | 6 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/LoginView.js | 8 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/NavView.js | 2 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/CollectionView.js | 7 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/Selector.js | 3 | ||||
| -rw-r--r-- | StoneIsland/www/js/vendor/util.js | 6 |
19 files changed, 277 insertions, 51 deletions
diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css new file mode 100644 index 00000000..5f0641c2 --- /dev/null +++ b/StoneIsland/www/css/blogs.css @@ -0,0 +1,14 @@ +.story #story { display: block } +#story { + display: none; +} + +.hub #hub { display: block } +#hub { + display: none; +} + +.archive #archive { display: block } +#archive { + display: none; +}
\ No newline at end of file diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css new file mode 100644 index 00000000..6e50c076 --- /dev/null +++ b/StoneIsland/www/css/cart.css @@ -0,0 +1,17 @@ + +.cart #cart { display: block; } +#cart { + display: none; +} + +#summary { + display: none; +} + +#shipping { + display: none; +} + +#billing { + display: none; +} diff --git a/StoneIsland/www/css/fonts.css b/StoneIsland/www/css/fonts/fonts.css index 01fbb382..8ddce654 100644 --- a/StoneIsland/www/css/fonts.css +++ b/StoneIsland/www/css/fonts/fonts.css @@ -1,37 +1,37 @@ @font-face { font-family: andale; - src: url(fonts/andale_mono.woff); + src: url(andale_mono.woff); font-style: normal; font-weight: normal; } @font-face { font-family: pfd; - src: url(fonts/pfdintextpro-regular.woff); + src: url(pfdintextpro-regular-webfont.woff); font-style: normal; font-weight: normal; } @font-face { font-family: pfd; - src: url(fonts/pfdintextpro-bold.woff); + src: url(pfdintextpro-bold-webfont.woff); font-style: normal; font-weight: bold; } @font-face { font-family: pfd; - src: url(fonts/pfdintextpro-medium.woff); + src: url(pfdintextpro-medium-webfont.woff); font-style: normal; font-weight: 300; } @font-face { font-family: pfd; - src: url(fonts/pfdintextpro-light.woff); + src: url(pfdintextpro-light-webfont.woff); font-style: normal; font-weight: 100; } @font-face { font-family: pfd; - src: url(fonts/pfdintextpro-italic.woff); + src: url(pfdintextpro-italic-webfont.woff); font-style: italic; font-weight: normal; } diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css index 5ac5d15d..c6eaadcf 100644 --- a/StoneIsland/www/css/index.css +++ b/StoneIsland/www/css/index.css @@ -9,23 +9,6 @@ body { -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ background: white; - font-family: 'HelveticaNeue-Light', 'HelveticaNeue', sans-serif; + font-family: pfd, sans-serif; font-size: 12px; } - - -#nav { - width: 300px; - -webkit-transform: translateZ(0) translateX(-300px); - -webkit-transition: -webkit-transform 0.3s; -} -#content { - -webkit-transform: translateZ(0) translateX(0px); - -webkit-transition: -webkit-transform 0.3s; -} -body.nav #nav { - -webkit-transform: translateZ(0) translateX(0); -} -body.nav #content { - -webkit-transform: translateZ(0) translateX(300px); -} diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css new file mode 100644 index 00000000..69a6f686 --- /dev/null +++ b/StoneIsland/www/css/nav.css @@ -0,0 +1,101 @@ + +/* NAV BAR */ + +#nav { + width: 300px; + -webkit-transform: translateZ(0) translateX(-300px); + -webkit-transition: -webkit-transform 0.3s; +} +#content { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + overflow: hidden; + -webkit-transform: translateZ(0) translateX(0px); + -webkit-transition: -webkit-transform 0.3s; +} +.ios #content { + top: 40px; + height: -webkit-calc(100% - 40px); +} +.nav #nav { + -webkit-transform: translateZ(0) translateX(0); +} +.nav #content { + -webkit-transform: translateZ(0) translateX(300px); +} + + +/* INTRO PAGE WITH SPINNING COMPASS */ + +#intro { + display: none; +} +.intro #intro { + display: block; +} +.intro #header, +.intro #footer { + display: none; +} +#compass { + position: absolute; + top: 50%; left: 50%; +} +#compass .store { +} +#compass .hub { +} +#compass .story { +} +#compass .archive { +} +#compass .latlng { +} + + +/* HEADER AND FOOTER ON MOST PAGES */ + +#header { + display: block; + position: absolute; + top: 0; left: 0; width: 100%; +} +#footer { + display: block; + position: absolute; + bottom: 0; left: 0; width: 100%; +} +#footer span { + display: none; +} + + +/* CURTAIN FOR LOGIN AND SELECTOR VIEWS */ + +#curtain { + display: none; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background: rgba(238,238,238,0.9); +} + + +/* LOGIN / SIGNUP SCREEN */ + +#login { + display: none; + position: absolute; + top: 50%; left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + background: #fff; +} + + +/* SELECTOR */ + +#selector { + display: none; +} + diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css new file mode 100644 index 00000000..970104a1 --- /dev/null +++ b/StoneIsland/www/css/products.css @@ -0,0 +1,9 @@ +.collection #collection { display: block } +#collection { + display: none; +} + +.product #product { display: block } +#product { + display: none; +} diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 08a7949a..37107801 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -16,21 +16,16 @@ <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> - <link rel="stylesheet" type="text/css" href="css/fonts.css"> + <link rel="stylesheet" type="text/css" href="css/fonts/fonts.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> + <link rel="stylesheet" type="text/css" href="css/nav.css"> + <link rel="stylesheet" type="text/css" href="css/products.css"> + <link rel="stylesheet" type="text/css" href="css/cart.css"> + <link rel="stylesheet" type="text/css" href="css/blogs.css"> <title>Stone Island</title> </head> <body> -<div id="intro"> - <div id="compass"></div> - <span class="store">STORE</span> - <span class="hub">HUB</span> - <span class="story">STORY</span> - <span class="archive">ARCHIVE</span> - <span class="latlng">+40.589060 -74.044636</span> -</div> - <div id="nav"> <span class="logo"></span> <span class="store">STORE</span> @@ -49,6 +44,16 @@ </div> <div id="content"> + + <div id="intro"> + <div id="compass"></div> + <span class="store">STORE</span> + <span class="hub">HUB</span> + <span class="story">STORY</span> + <span class="archive">ARCHIVE</span> + <span class="latlng">+40.589060 -74.044636</span> + </div> + <div id="header"> <span class="burger"></span> <span class="logo"></span> @@ -112,19 +117,20 @@ <div id="collection"> <h1>COLLECTION NAME</h1> - <img src=""> - <img src=""> - <img src=""> - <img src=""> - <img src=""> - <img src=""> + <div class="content"> + <script type="text/html" class="template"> + <img src="{{image}}"> + </script> + </div> </div> <div id="product"> <span class="left"></span> <span class="right"></span> - <img src=""> + <div class="gallery"> + <img src=""> + </div> <span class="title"></span> <span class="type"></span> <span class="price"></span> @@ -149,7 +155,7 @@ </div> </div> - + <div id="curtain"></div> <div id="login"> <span class="close"> <div class="login_ask">LOGIN</div> @@ -326,6 +332,7 @@ <script src="js/lib/cart/CartSummary.js"></script> <script src="js/lib/nav/IntroView.js"></script> +<script src="js/lib/nav/CurtainView.js"></script> <script src="js/lib/nav/HeaderView.js"></script> <script src="js/lib/nav/FooterView.js"></script> <script src="js/lib/nav/LoginView.js"></script> diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js index 9a8e945c..64027d2a 100644 --- a/StoneIsland/www/js/index.js +++ b/StoneIsland/www/js/index.js @@ -2,19 +2,39 @@ var app = (function(){ var app = {} app.init = function(){ + app.archive = new ArchiveView () + app.hub = new HubView () + app.story = new StoryView () + + app.cart = new CartView () + + app.header = new HeaderView () + app.footer = new FooterView () + app.nav = new NavView () + + app.login = new LoginView () + app.intro = new IntroView () + + app.product = new ProductView () + app.collection = new CollectionView () + + app.selector = new Selector () + app.bind() } app.bind = function(){ + if (window.location.href.match("8000")) { app.ready() } document.addEventListener('deviceready', app.ready, false) } app.ready = function(){ app.view = null - app.nav = new NavView () app.router = new SiteRouter () + app.router.route() } - app.init() - + return app })() + +app.init() diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js index 0d0c3bd1..6434e9bf 100644 --- a/StoneIsland/www/js/lib/_router.js +++ b/StoneIsland/www/js/lib/_router.js @@ -1,6 +1,7 @@ var SiteRouter = Router.extend({ el: 'body', + routeByHash: true, routes: { '/': 'intro', @@ -11,32 +12,49 @@ var SiteRouter = Router.extend({ '/faq': 'faq', '/search': 'search', + + '/cart': 'cart', }, initialize: function(){ - this.route() }, go: function(url){ if (app.view && app.view.hide) { app.view.hide() } + window.location.href = "#/" + url this.parseRoute(url) + console.log(url) }, intro: function(){ + app.view = app.intro + app.intro.show() }, store: function(){ + app.view = app.store + app.collection.show() }, hub: function(){ + app.view = app.hub + app.hub.show() }, story: function(){ + app.view = app.story + app.story.show() }, archive: function(){ + app.view = app.archive + app.archive.show() + }, + + + cart: function(){ }, }) diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js index 04b43a4b..742ee0f2 100644 --- a/StoneIsland/www/js/lib/blogs/ArchiveView.js +++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js @@ -10,6 +10,10 @@ var ArchiveView = View.extend({ this.$content = this.$(".content") }, + show: function(){ + document.body.className = "archive" + }, + populate: function(){ }, diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js index 4958b320..430464b1 100644 --- a/StoneIsland/www/js/lib/blogs/HubView.js +++ b/StoneIsland/www/js/lib/blogs/HubView.js @@ -10,6 +10,10 @@ var HubView = View.extend({ this.$content = this.$(".content") }, + show: function(){ + document.body.className = "hub" + }, + populate: function(){ }, diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js index 4c71e9ff..ed46af31 100644 --- a/StoneIsland/www/js/lib/blogs/StoryView.js +++ b/StoneIsland/www/js/lib/blogs/StoryView.js @@ -9,7 +9,11 @@ var StoryView = View.extend({ initialize: function(){ this.$content = this.$(".content") }, - + + show: function(){ + document.body.className = "story" + }, + populate: function(){ }, diff --git a/StoneIsland/www/js/lib/nav/CurtainView.js b/StoneIsland/www/js/lib/nav/CurtainView.js new file mode 100644 index 00000000..30c3190e --- /dev/null +++ b/StoneIsland/www/js/lib/nav/CurtainView.js @@ -0,0 +1,21 @@ +var CurtainView = View.extend({ + + el: "#curtain", + + events: { + "click": "click", + }, + + initialize: function(){ + }, + + click: function(){ + if (document.body.classList.contains("nav")) { + app.nav.hide() + } + else if (document.body.classList.contains("login")) { + app.login.hide() + } + }, + +})
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/nav/IntroView.js b/StoneIsland/www/js/lib/nav/IntroView.js index 346c3aef..7b726f6a 100644 --- a/StoneIsland/www/js/lib/nav/IntroView.js +++ b/StoneIsland/www/js/lib/nav/IntroView.js @@ -15,13 +15,13 @@ var IntroView = View.extend({ }, show: function(){ - this.$el.show() + document.body.className = "intro" window.addEventListener("deviceorientation", this.orient) + this.orient({ alpha: 0 }) // get location.. }, hide: function(){ - this.$el.hide() window.removeEventListener("deviceorientation", this.orient) }, @@ -33,7 +33,7 @@ var IntroView = View.extend({ else { heading = e.alpha } - this.compass.css[transformProp] = "translateZ(0) rotate(" + heading + "deg)" + this.compass.style[transformProp] = "translateZ(0) transformX(-50%) transformY(-50%) rotate(" + heading + "deg)" }, store: function(){ app.router.go("store") }, diff --git a/StoneIsland/www/js/lib/nav/LoginView.js b/StoneIsland/www/js/lib/nav/LoginView.js index 670fb333..0f30db3d 100644 --- a/StoneIsland/www/js/lib/nav/LoginView.js +++ b/StoneIsland/www/js/lib/nav/LoginView.js @@ -7,5 +7,13 @@ var LoginView = View.extend({ initialize: function(){ }, + + show: function(){ + document.body.classList.add("login") + }, + + hide: function(){ + document.body.classList.remove("login") + }, })
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/nav/NavView.js b/StoneIsland/www/js/lib/nav/NavView.js index 42877d88..c9eb2d4e 100644 --- a/StoneIsland/www/js/lib/nav/NavView.js +++ b/StoneIsland/www/js/lib/nav/NavView.js @@ -22,10 +22,12 @@ var NavView = View.extend({ show: function(){ $("body").addClass("nav") + $("#curtain").show() }, hide: function(){ $("body").removeClass("nav") + $("#curtain").hide() }, store: function(){ diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js index 65ed0230..137d0ec3 100644 --- a/StoneIsland/www/js/lib/products/CollectionView.js +++ b/StoneIsland/www/js/lib/products/CollectionView.js @@ -1,11 +1,16 @@ var CollectionView = View.extend({ el: "#collection", - + template: $("#collection .template").html(), + events: { }, initialize: function(){ + this.$content = this.$(".content") + }, + + populate: function(){ }, })
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js index c0d59deb..3d3d5ccc 100644 --- a/StoneIsland/www/js/lib/products/Selector.js +++ b/StoneIsland/www/js/lib/products/Selector.js @@ -7,5 +7,8 @@ var Selector = View.extend({ initialize: function(){ }, + + select: function(options, callback){ + }, })
\ No newline at end of file diff --git a/StoneIsland/www/js/vendor/util.js b/StoneIsland/www/js/vendor/util.js index 0cc7e704..8a58a84c 100644 --- a/StoneIsland/www/js/vendor/util.js +++ b/StoneIsland/www/js/vendor/util.js @@ -165,6 +165,12 @@ var is_android = (navigator.userAgent.match(/Android/i)) var is_mobile = is_iphone || is_ipad || is_android var is_desktop = ! is_mobile; var transformProp = browser.safari ? "WebkitTransform" : "transform"; +if (is_android) { + document.body.parentNode.classList.add("android") +} +else { + document.body.parentNode.classList.add("ios") +} function selectElementContents(el) { if (window.getSelection && document.createRange) { |