add scrollarea and footer components

Makefile

@@ -1,12 +1,12 @@
 COMPONENTS = actionbutton \
-	topnav
+	navbutton \
+	topnav \
+	bottomnav \
+	scrollarea
 
 all:
 	@rm -fr build
 	@mkdir build
 	@cat lib/browserify/bundle.js > build/vk.js
 	@cat lib/components/prelude.js >> build/vk.js
-	@./support/build.js $(COMPONENTS)
-
-watch:
-	watch --interval=1 $(MAKE)
+	@./support/build.js $(COMPONENTS)

build/vk.css

@@ -16,4 +16,81 @@
 .nav-button#following div { margin: 9px 7px 0px 2px; }
 .nav-button#following span {margin: 0 0 3px 7px;}
 
-.nav-button.action span { display: inline-block; position: relative; top: 6px; }.topNav { z-index: 666; width: 100%; height: 49px; border-bottom: 1px solid #6d8f75; position: fixed; top: 0px; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); border-top-right-radius: 5px; border-top-left-radius: 5px;}
+/*.nav-button.action span { display: inline-block; position: relative; top: 6px; }
+*/
+.left-buttons a { float: left; }
+.right-buttons a { float: right; }
+.right-buttons a:active div { }
+.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
+.bottomNav a { display: inline-block; line-height: 36px; width: 28%; margin: 0 auto; float: left; text-align: center;}
+.bottomNav a.refreshButton { width: 38px; height: 38px; display: block; margin: 8px 0px 7px 4px; }
+.bottomButton { border-radius: 3px; margin: 8px 0px 7px 4px; height: 38px; color: #c4c4c4; font-size: 13.58px; font-weight: bold; }
+.bottomButton:active { color: white; }
+.topNav { z-index: 666; width: 100%; height: 49px; border-bottom: 1px solid #6d8f75; position: fixed; top: 0px; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); border-top-right-radius: 5px; border-top-left-radius: 5px;}
+.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
+.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #464646; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#464646));}
+.bottomNav .selected { color: #111111; text-shadow: 0 1px 0 white; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
+.bottomNav .refreshIcon { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
+.bottomNav .refreshIcon:active { background-color: #C7DECC; }
+.bottomNav .refreshIcon .sprite { position: relative; top: 7px; left: 8px; }
+.bottomNav .refreshIcon .sprite.spinning { background: url('images/transparent-loader.gif') no-repeat 3px 4px; background-size: initial; }
+.nav-button.following { font-size: 13.5px; font-weight: bold; border-bottom-left-radius: 5px; }
+.nav-button.settings { border-bottom-right-radius: 5px;  }
+.whitePlaceholder { height: 54px; width: 100%; background: white;}
+.ui-content { z-index:2 !important; overflow: scroll; -webkit-overflow-scrolling: touch; background: white; font-family: Open Sans; position: fixed; top: 50px; bottom: 55px; right: 0; left: 0; border-top: 1px solid #cccccc;}
+.ui-content .event-details { overflow: auto; background-color: #e6e6e6; height: 100%; }
+.ui-content .event { min-height: 376px; }
+.ui-content .eventDetails { margin-left: 60px; }
+.ui-content .event .row { min-height: 49px; border-bottom: 1px solid #cccccc; overflow: auto; color: #363636; position: relative; }
+.ui-content .event .row:active { background-color: #e6e6e6 !important; }
+.ui-content .event a:nth-child(odd) .row { background-color: #fafafa;}
+.ui-content .event .user { font-size: 11.32px; margin: 3px 0 0 0px; font-family: "Open Sans Bold"; color: #ff8657; }
+.ui-content .event .facebookUser { font-size: 11.32px; margin-top: 8px; font-weight: normal; color: #959595; }
+.ui-content .event .name { font-size: 15.85px; width: 225px; position: relative; top: -1px; margin: 1px 0 0 1px; }
+.ui-content .event .realname { color: #ffb07f; font-weight: normal; }
+.ui-content .event .details { font-size: 11.32px; margin: 0; padding: 0; line-height: 7px; color: #959595; height: 18px; }
+.ui-content .event .details .starttime { line-height: 11px; opacity: 0.5; color: #555555;}
+.ui-content .event .tiny-clock { display: block; float: left; margin-right: 4px; }
+.ui-content .event-details .left { height: 70px; }
+.ui-content .venueMap { height: 200px; position: relative; }
+.ui-content .compassContainer { z-index: 666; position: absolute; right: 10px; top: 10px; }
+.ui-content .compassContainer .distance { position: absolute; right: 14px; top: 12px;}
+.ui-content .compassContainer .distanceLabel { font-size: 11.32px; position: absolute; top: 28px; right: 18px; color: #707070; }
+.ui-content .compassContainer .square { height: 51px; width: 51px; }
+.ui-content .compassContainer .compass-macro { position: relative; top: -8px; }
+.ui-content .venueMap .distance {font-size: 15.85px; font-family: 'Open Sans Bold'; color: #363636; position: absolute; top: 10px; right: 14px; }
+.ui-content .label { position: absolute; top: 25px; right: 19px; font-size: 11.32px; font-weight: bold; color: #707070; }
+.ui-content .left { float: left; overflow: hidden; width: 100%; }
+.ui-content .loadingContainer { margin: 50px auto; text-align: center; }
+.ui-content .inputContainer { padding-right: 52px; padding-left: 1px; margin-right: 2px; }
+.ui-content .inputContainer.rightArrow { padding-right: 68px; padding-left: 1px; margin-right: 2px; }
+.ui-content .inputContainer.rightArrow input { padding: 0px 20px 0 47px !important; }
+.ui-content input[type="text"], .ui-content input[type="datetime"] { width: 100%; padding: 0px 4px 0 47px; color: #363636; background-repeat: no-repeat; font-size: 18.11px; font-weight: normal; }
+.ui-content .inputContainer .sprite.triangle-orange { position: relative; top: -26px; right: -62px; float: right; }
+.ui-content input { display: block; height: 38px; border: 1px solid #c7c7c7; border-radius: 3px; }
+.ui-content input.loading {background: url('images/loading.gif') no-repeat 98% 50%}
+.ui-content input[type="text"]:focus, .ui-content input[type="datetime"]:focus { background-color: #fffbcd; }
+.ui-content input::-webkit-input-placeholder { opacity: .8; }
+.ui-content .mainArea { background: #fff; padding: 10px 5px; border-bottom: 1px solid #d7d7d7; }
+.ui-content .secondaryArea { background: #f9f9f9; padding: 10px 5px 5px 5px; border-bottom: 1px solid #d2d2d2;}
+.ui-content .secondaryArea .inputContainer { margin-bottom: 5px; }
+.ui-content .tertiaryArea { padding: 10px 0; }
+.ui-content .tertiaryArea .section-label { margin-left: 8px; margin-bottom: 3px; }
+.ui-content#start { background-color: #f3f3f3; }
+.ui-content form span { font-size: 11.32px; font-weight: bold; text-transform: uppercase; margin: -1px 0 8px 3px; display: block; }
+.ui-content .shareToggle { position: relative; }
+.ui-content .shareToggle .shareOption[name="facebook"] { right: 0; left: auto; }
+.ui-content .shareToggle .shareOption[name="twitter"] { left: 0; right: auto }
+.ui-content .shareContainer { font-size: 11.32px; text-transform: uppercase; position: relative; display: inline-block; height: 38px; background-color: white; border: 1px solid #c2c2c2; border-radius: 3px; float: left; width: 49%; float: right; }
+.ui-content .shareContainer.first { margin-right: 2px; float: left; }
+.ui-content .shareContainer .button-label { letter-spacing: -0.5px; float: left; color: #636363; line-height: 38px; padding: 0 0 0 12px; margin: 0 7px 0 0; }
+.ui-content .shareContainer .section-label { float: left; color: #636363; line-height: 38px; padding: 0 0 0 40px; margin: 0; }
+.ui-content .toggle-on, .ui-content .toggle-off { float: left; margin: 7px 0px 0 5px; }
+.ui-content .locationPicker { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white; }
+.ui-content .locationPicker li { margin: 0px; padding: 5px 10px; min-height: 39px; border-bottom: 1px solid #ebebeb; overflow: auto; color: #363636; position: relative; }
+.ui-content .locationPicker li:nth-child(even) { background-color: #fafafa;}
+.ui-content .detailsContainer { overflow: auto; background-color: white; border-bottom: 1px solid #cccccc; }
+.ui-content .mapDetailsContainer { overflow: auto; height: 250px; width: 100%; position: relative; }
+.ui-content .broadcastContainer { overflow: auto; background-color: #f6f6f6; border-top: 1px solid #aeaeae; padding: 0 0 8px 0; }
+.ui-content .broadcastContainer .section-label { font-size: 11.32px; color: #555555; text-shadow: 0 1px 0 white; text-transform: uppercase; font-family: "Open Sans Bold"; margin: 8px 8px 2px 8px; display: block;}
+.ui-content .adminContainer { overflow: auto; border-top: 1px solid #d0d0d0; padding: 5px 0 0 0; }

build/vk.js

@@ -1500,8 +1500,8 @@ function ActionButton(opts) {
 
   // grab from current scope if available
   this.template = template
-
-  this.options = {target: '.right-buttons'}
+    
+  this.options = {target: '.right-buttons', className: 'action'}
   this.options = $.extend(this.options, opts)
 }
 
@@ -1513,14 +1513,58 @@ util.inherits(ActionButton, events.EventEmitter)
 
 
 /**
- * Render into HTML
+ * Returns HTML representation of the button
  */
 
 ActionButton.prototype.build = function() {
   return mustache.to_html(this.template, this.options)
 }
 
-})(vk, "<a href=\"{{href}}\">\n  <div id=\"{{id}}\" class=\"nav-button round action\">\n    <span class=\"{{sprite}} sprite\"></span>\n    {{#text}}<div>{{text}}</div>{{/text}}\n  </div>\n</a>\n");
+})(vk, "<a href=\"{{href}}\">\n  <div id=\"{{id}}\" class=\"nav-button round {{className}}\">\n    {{#sprite}}<span class=\"{{sprite}} sprite\"></span>{{/sprite}}\n    {{#text}}<span class=\"label\">{{text}}</span>{{/text}}\n  </div>\n</a>\n");
+;(function(exports, template){
+/**
+ * Expose `NavButton`.
+ */
+
+exports.NavButton = NavButton
+
+/**
+ * Create a new `NavButton`.
+ */
+
+exports.navButton = function(options) {
+  return new NavButton(options)
+}
+
+/**
+ * Initialize a new `NavButton`
+ */
+
+function NavButton(options) {
+  events.EventEmitter.call(this)
+
+  // grab from current scope if available
+  this.template = template
+
+  this.options = options
+}
+
+/**
+ * Inherit from EventEmitter
+ */
+
+util.inherits(NavButton, events.EventEmitter)
+
+
+/**
+ * Returns HTML representation of the button
+ */
+
+NavButton.prototype.build = function() {
+  return mustache.to_html(this.template, this.options)
+}
+
+})(vk, "<a href=\"{{href}}\"><div {{#page}}data-page=\"{{page}}\"{{/page}} class=\"bottomButton {{className}}\">{{text}}</div></a>\n");
 ;(function(exports, template){
 /**
  * Expose `TopNav`.
@@ -1578,4 +1622,93 @@ TopNav.prototype.add = function(button) {
   this.render()
 }
 
-})(vk, "<div class=\"topNav\">\n  <div class=\"left-buttons\"></div>\n  <div class=\"right-buttons\"></div>\n</div>");
+})(vk, "<div class=\"topNav\">\n  <div class=\"left-buttons\"></div>\n  <div class=\"right-buttons\"></div>\n</div>");
+;(function(exports){
+/**
+ * Expose `BottomNav`.
+ */
+
+exports.BottomNav = BottomNav
+
+/**
+ * Create a new `BottomNav`.
+ */
+
+exports.bottomNav = function(target) {
+  return new BottomNav(target)
+}
+
+/**
+ * Initialize a new `BottomNav`
+ */
+
+function BottomNav(target) {
+  events.EventEmitter.call(this)
+
+  this.target = target
+  this.items = []
+}
+
+/**
+ * Inherit from EventEmitter
+ */
+
+util.inherits(BottomNav, events.EventEmitter)
+
+
+/**
+ * Render into HTML
+ */
+
+BottomNav.prototype.render = function() {
+  var target = $(this.target)
+  target.addClass('bottomNav')
+  this.items.forEach(function(item) {
+    target.append(item.build())
+  })
+}
+
+/**
+ * Add a menu item
+ */
+
+BottomNav.prototype.add = function(button) {
+  this.items.push(button)
+  this.render()
+}
+
+})(vk);
+;(function(exports, template){
+/**
+ * Expose `ScrollArea`.
+ */
+
+exports.ScrollArea = ScrollArea
+
+/**
+ * Create a new `ScrollArea`.
+ */
+
+exports.scrollArea = function(target) {
+  return new ScrollArea(target)
+}
+
+/**
+ * Initialize a new `ScrollArea`
+ */
+
+function ScrollArea(target) {
+  events.EventEmitter.call(this)
+
+  // grab from current scope if available
+  this.el = $(template)
+
+  $(target).html(this.el)
+}
+
+/**
+ * Inherit from EventEmitter
+ */
+
+util.inherits(ScrollArea, events.EventEmitter)
+})(vk, "<div class=\"ui-content\"></div>");

docs/index.html

@@ -10,14 +10,24 @@
     <link rel="stylesheet" href="style.css">
     <script>
       $(function(){
-        var nav = vk.topNav('.navContainer')
-        var button = vk.actionButton({href: "#/submit!", id: "start", text: "Save", sprite: "icon-hexagonplus"})
-
+        var nav = vk.topNav('.nav')
+        var button = vk.actionButton({href: "#/submit!", id: "start", text: "Save"})
         nav.add(button)
+
+        var button2 = vk.actionButton({target: '.left-buttons', href: "#/submit!", id: "home", text: "Home"})
+        nav.add(button2)
+
+        var body = vk.scrollArea('.body')
+
+        var footer = vk.bottomNav('.footer')
+        var button3 = vk.navButton({href: "#/list!", id: "list", text: "List"})
+        footer.add(button3)
       })
     </script>
   </head>
   <body>
-    <div class="navContainer"></div>
+    <div class="nav"></div>
+    <div class="body"></div>
+    <div class="footer"></div>
   </body>
 </html>

docs/style.css

@@ -51,6 +51,7 @@ h3 {
 }
 a {
   color: #2B3235;
+  text-decoration: none;
 }
 a:hover {
   text-decoration: underline;

lib/components/actionbutton/actionbutton.css

@@ -16,4 +16,9 @@
 .nav-button#following div { margin: 9px 7px 0px 2px; }
 .nav-button#following span {margin: 0 0 3px 7px;}
 
-.nav-button.action span { display: inline-block; position: relative; top: 6px; }
+/*.nav-button.action span { display: inline-block; position: relative; top: 6px; }
+*/
+.left-buttons a { float: left; }
+.right-buttons a { float: right; }
+.right-buttons a:active div { }
+.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }

lib/components/actionbutton/actionbutton.html

@@ -1,6 +1,6 @@
 <a href="{{href}}">
-  <div id="{{id}}" class="nav-button round action">
-    <span class="{{sprite}} sprite"></span>
-    {{#text}}<div>{{text}}</div>{{/text}}
+  <div id="{{id}}" class="nav-button round {{className}}">
+    {{#sprite}}<span class="{{sprite}} sprite"></span>{{/sprite}}
+    {{#text}}<span class="label">{{text}}</span>{{/text}}
   </div>
 </a>

lib/components/actionbutton/actionbutton.js

@@ -21,8 +21,8 @@ function ActionButton(opts) {
 
   // grab from current scope if available
   this.template = template
-
-  this.options = {target: '.right-buttons'}
+    
+  this.options = {target: '.right-buttons', className: 'action'}
   this.options = $.extend(this.options, opts)
 }
 
@@ -34,7 +34,7 @@ util.inherits(ActionButton, events.EventEmitter)
 
 
 /**
- * Render into HTML
+ * Returns HTML representation of the button
  */
 
 ActionButton.prototype.build = function() {

lib/components/bottomnav/bottomnav.css

@@ -0,0 +1,10 @@
+.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
+.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #464646; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#464646));}
+.bottomNav .selected { color: #111111; text-shadow: 0 1px 0 white; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
+.bottomNav .refreshIcon { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
+.bottomNav .refreshIcon:active { background-color: #C7DECC; }
+.bottomNav .refreshIcon .sprite { position: relative; top: 7px; left: 8px; }
+.bottomNav .refreshIcon .sprite.spinning { background: url('images/transparent-loader.gif') no-repeat 3px 4px; background-size: initial; }
+.nav-button.following { font-size: 13.5px; font-weight: bold; border-bottom-left-radius: 5px; }
+.nav-button.settings { border-bottom-right-radius: 5px;  }
+.whitePlaceholder { height: 54px; width: 100%; background: white;}