From d5855a5d5b7c16a2c262ad2b98aabe5e8dd161f0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 15 Sep 2015 16:54:38 -0400 Subject: begin writing navigation css --- StoneIsland/www/css/blogs.css | 14 +++ StoneIsland/www/css/cart.css | 17 ++++ StoneIsland/www/css/fonts.css | 37 -------- StoneIsland/www/css/fonts/fonts.css | 37 ++++++++ StoneIsland/www/css/index.css | 19 +--- StoneIsland/www/css/nav.css | 101 ++++++++++++++++++++++ StoneIsland/www/css/products.css | 9 ++ StoneIsland/www/index.html | 43 +++++---- StoneIsland/www/js/index.js | 26 +++++- StoneIsland/www/js/lib/_router.js | 20 ++++- StoneIsland/www/js/lib/blogs/ArchiveView.js | 4 + StoneIsland/www/js/lib/blogs/HubView.js | 4 + StoneIsland/www/js/lib/blogs/StoryView.js | 6 +- StoneIsland/www/js/lib/nav/CurtainView.js | 21 +++++ StoneIsland/www/js/lib/nav/IntroView.js | 6 +- StoneIsland/www/js/lib/nav/LoginView.js | 8 ++ StoneIsland/www/js/lib/nav/NavView.js | 2 + StoneIsland/www/js/lib/products/CollectionView.js | 7 +- StoneIsland/www/js/lib/products/Selector.js | 3 + StoneIsland/www/js/vendor/util.js | 6 ++ 20 files changed, 308 insertions(+), 82 deletions(-) create mode 100644 StoneIsland/www/css/blogs.css create mode 100644 StoneIsland/www/css/cart.css delete mode 100644 StoneIsland/www/css/fonts.css create mode 100644 StoneIsland/www/css/fonts/fonts.css create mode 100644 StoneIsland/www/css/nav.css create mode 100644 StoneIsland/www/css/products.css create mode 100644 StoneIsland/www/js/lib/nav/CurtainView.js 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.css deleted file mode 100644 index 01fbb382..00000000 --- a/StoneIsland/www/css/fonts.css +++ /dev/null @@ -1,37 +0,0 @@ -@font-face { - font-family: andale; - src: url(fonts/andale_mono.woff); - font-style: normal; - font-weight: normal; -} - -@font-face { - font-family: pfd; - src: url(fonts/pfdintextpro-regular.woff); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: pfd; - src: url(fonts/pfdintextpro-bold.woff); - font-style: normal; - font-weight: bold; -} -@font-face { - font-family: pfd; - src: url(fonts/pfdintextpro-medium.woff); - font-style: normal; - font-weight: 300; -} -@font-face { - font-family: pfd; - src: url(fonts/pfdintextpro-light.woff); - font-style: normal; - font-weight: 100; -} -@font-face { - font-family: pfd; - src: url(fonts/pfdintextpro-italic.woff); - font-style: italic; - font-weight: normal; -} diff --git a/StoneIsland/www/css/fonts/fonts.css b/StoneIsland/www/css/fonts/fonts.css new file mode 100644 index 00000000..8ddce654 --- /dev/null +++ b/StoneIsland/www/css/fonts/fonts.css @@ -0,0 +1,37 @@ +@font-face { + font-family: andale; + src: url(andale_mono.woff); + font-style: normal; + font-weight: normal; +} + +@font-face { + font-family: pfd; + src: url(pfdintextpro-regular-webfont.woff); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: pfd; + src: url(pfdintextpro-bold-webfont.woff); + font-style: normal; + font-weight: bold; +} +@font-face { + font-family: pfd; + src: url(pfdintextpro-medium-webfont.woff); + font-style: normal; + font-weight: 300; +} +@font-face { + font-family: pfd; + src: url(pfdintextpro-light-webfont.woff); + font-style: normal; + font-weight: 100; +} +@font-face { + font-family: pfd; + 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 @@ - + + + + + Stone Island -
-
- STORE - HUB - STORY - ARCHIVE - +40.589060 -74.044636 -
-
+ +
+
+ STORE + HUB + STORY + ARCHIVE + +40.589060 -74.044636 +
+ - +
@@ -326,6 +332,7 @@ + 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) { -- cgit v1.2.3-70-g09d2