Permalink
Browse files

work in firefox

  • Loading branch information...
1 parent 33c50a3 commit dd9b01836dce4699ce98dcf0566c4b32d19a6448 @maxogden committed Nov 28, 2012
View
33 build/vk.css
@@ -55,7 +55,7 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
.vk-container input::-webkit-input-placeholder { opacity: .8; }
.vk-container a { text-decoration: none; outline: 0; line-height: inherit; }
.vk-container a:active .highlight { background: #fafafa; }
-.vk-container { height: 100%; }.topNav { position: fixed; top: 0; right: 0; left: 0; z-index: 666; height: 49px; border-bottom: 1px solid #6d8f75; 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;
+.vk-container { height: 100%; }.ui-content .navBarContainer { width: 100%; height: 100%; }.topNav { position: absolute; top: 0; right: 0; left: 0; z-index: 666; height: 49px; border-bottom: 1px solid #6d8f75; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); background: -moz-linear-gradient(top, #96c7a2, #87b492); border-top-right-radius: 5px; border-top-left-radius: 5px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
@@ -67,7 +67,7 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
}
.topNav .left.buttons .actionButton { float: left; }
-
+.topNav .right.buttons .actionButton { display: inline-block; }
.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: #515151;
-webkit-box-align: center;
@@ -86,12 +86,11 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
.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;}
-.bottomNav .left.buttons { -webkit-box-flex: 2; display: -webkit-box; }
-.bottomNav .left.buttons a { -webkit-box-flex: 1; }
-.bottomNav .right.buttons a { float: right; }
+.bottomNav .left.buttons { -webkit-box-flex: 2; -moz-box-flex: 2; display: -webkit-box; display: -moz-box; }
+.bottomNav .left.buttons a { -webkit-box-flex: 1; -moz-box-flex: 1; }
.bottomNav.hidden { height: 0px !important; }
.nav-button { font-size: 13.5px; background: #e5e5e5; color: #959595; float: left; line-height: 47px; height: 49px; text-align: center; }
-.nav-button.round { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e6e6e6)); position: relative; font-size: 13.58px; text-shadow: 0 1px 0 white; color: #363636; line-height: 39px; height: 39px; border-radius: 3px; box-shadow: 0px 0px 1px rgba(0,0,0,1); z-index: 1;
+.nav-button.round { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e6e6e6)); background: -moz-linear-gradient(top, #fefefe, #e6e6e6); position: relative; font-size: 13.58px; text-shadow: 0 1px 0 white; color: #363636; line-height: 39px; height: 39px; border-radius: 3px; box-shadow: 0px 0px 1px rgba(0,0,0,1); z-index: 1;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
@@ -102,31 +101,27 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
box-pack: center;
box-align: center;
}
-.nav-button.round:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6e6e6), to(#fefefe));}
+.nav-button.round:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6e6e6), to(#fefefe)); background: -moz-linear-gradient(top, #e6e6e6, #fefefe); }
.nav-button.round .label { margin: 0 10px; }
.nav-button .labelSprite { margin-right: 5px; }
-.nav-button.srsbsns { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fe8657), to(#e9794f)); color: white; text-shadow: none; font-family: 'Open Sans Bold'; margin: 0; width: 100%; }
-.nav-button.srsbsns:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9794f), to(#fe8657));}
+.nav-button.srsbsns { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fe8657), to(#e9794f)); background: -moz-linear-gradient(top, #fe8657, #e9794f); color: white; text-shadow: none; font-family: 'Open Sans Bold'; margin: 0; width: 100%; }
+.nav-button.srsbsns:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9794f), to(#fe8657)); background: -moz-linear-gradient(top, #e9794f, #fe8657);}
.nav-button.disabled { background: #727272; color: #4a4a4a;}
-.nav-button.action { padding: 0 10px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d9f2fc), to(#c5dbe4));}
-.nav-button.action:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5dbe4), to(#d9f2fc));}
+.nav-button.action { padding: 0 10px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d9f2fc), to(#c5dbe4)); background: -moz-linear-gradient(top, #d9f2fc, #c5dbe4); }
+.nav-button.action:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5dbe4), to(#d9f2fc)); background: -moz-linear-gradient(top, #c5dbe4, #d9f2fc);}
.buttons {
- overflow: auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
- -webkit-box-align: center;
- -moz-box-align: center;
- -o-box-align: center;
- box-align: center;
}
.left.buttons { margin-left: 5px; }
.left.buttons .actionButton { margin-left: 3px; }
-.right.buttons .actionButton { float: right; margin-right: 3px; }
-.right.buttons { margin-right: 2px; }
+.right.buttons .actionButton { margin-right: 3px; }
+.right.buttons { margin-right: 2px; display: -moz-box; -moz-box-orient: vertical; }
+.right.buttons { -moz-box-align: end; }
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
.navButton { display: block; text-align: center; }
.bottomButton { line-height: 38px; height: 38px; border-radius: 5px; padding: 0px; color: #c4c4c4; font-size: 13.58px; }
@@ -136,7 +131,7 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
/* for android 2.x you need padding-bottom: 55px; if you set bottom: it breaks rendering */
/* even if you un-set it in js after it renders */
/* due to these constraints these values are set by JS instead of here */
-.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 50px; bottom: 55px; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: scroll; }
+.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 50px; bottom: 55px; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: auto; }
/* extend scroll area to bottom if the bottomnav is hidden */
.hidden .items { bottom: 0px !important; }
View
2 build/vk.js
@@ -3125,7 +3125,7 @@ NavBar.prototype.makeCrossBrowserCompatible = function() {
var navBar = $(this.target)
}
-})(vk, "<div class=\"left buttons\"></div>\n<div class=\"right buttons\"></div>\n");
+})(vk, "<div class=\"centerBoth navBarContainer\">\n <div class=\"left buttons\"></div>\n <div class=\"right buttons\"></div>\n</div>");
;(function(exports){
/**
* Expose `Button`
View
359 demo/phantomlimb.js
@@ -1,359 +0,0 @@
-(function(GLOBAL) {
- if ('ontouchstart' in window) return;
- setTimeout(function() {
-
- // Phantom Limb
- // ------------
- // http://viewinglens.com/phantom-limb
- // https://github.com/brian-c/phantom-limb
- // brian.carstensen@gmail.com
-
- "use strict";
-
- // Default configuration
- var config = {
- style: true,
- startOnLoad: true
- };
-
- // Apply overrides
- for (var param in GLOBAL.phantomLimbConfig) {
- config[param] = GLOBAL.phantomLimbConfig[param];
- }
-
- // Keep track of whether the mouse is down.
- var mouseIsDown = false;
-
- // A Finger is a representation on the screen.
- // It keeps track of its position and the node that it's over.
- function Finger() {
- this.node = document.createElement('span');
- this.node.classList.add('_phantom-limb_finger');
-
- // Add a node per finger.
- document.body.appendChild(this.node);
- }
-
- Finger.prototype = {
- node: null,
-
- x: NaN,
- y: NaN,
-
- target: null,
-
- place: function() {
- document.body.appendChild(this.node);
- },
-
- hide: function() {
- this.node.style.display = 'none';
- },
-
- show: function() {
- this.node.style.display = '';
- },
-
- move: function(x, y) {
- if (isNaN(x) || isNaN(y)) {
- this.hide();
- this.target = null;
- } else {
- this.show();
-
- this.node.style.left = x + 'px';
- this.node.style.top = y + 'px';
-
- this.x = x;
- this.y = y;
-
- if (!mouseIsDown) this.target = document.elementFromPoint(x, y);
- }
- }
- };
-
- // Instantiate the fingers we'll use in the rest of the script.
- var fingers = [
- new Finger(),
- new Finger()
- ];
-
- // Create a synthetic event from a real event and a finger.
- function createMouseEvent(eventName, originalEvent, finger) {
- var e = document.createEvent('MouseEvent');
-
- e.initMouseEvent(eventName, true, true,
- originalEvent.view, originalEvent.detail,
- finger.x || originalEvent.screenX, finger.y || originalEvent.screenY,
- finger.x || originalEvent.clientX, finger.y || originalEvent.clientY,
- originalEvent.ctrlKey, originalEvent.shiftKey,
- originalEvent.altKey, originalEvent.metaKey,
- originalEvent.button, finger.target || originalEvent.relatedTarget
- );
-
- e.synthetic = true;
-
- // Set this so we can match shared targets later.
- e._finger = finger;
-
- return e;
- }
-
- var startDistance = NaN;
- var startAngle = NaN;
-
- // Given a mouse event, fire a touch event for each finger.
- // Add the appropriate touch-specific event properties.
- function fireTouchEvents(eventName, originalEvent) {
- // All touch events, including "touchend".
- var events = [];
- var gestures = [];
-
- // For each finger with a target, create a touch event.
- fingers.forEach(function(finger) {
- if (!finger.target) return;
-
- // Convert "ontouch*" properties and attributes to listeners.
- var onEventName = 'on' + eventName;
-
- if (onEventName in finger.target) {
- console.warn('Converting `' + onEventName + '` property to event listener.', finger.target);
- finger.target.addEventListener(eventName, finger.target[onEventName], false);
- delete finger.target[onEventName];
- }
-
- if (finger.target.hasAttribute(onEventName)) {
- console.warn('Converting `' + onEventName + '` attribute to event listener.', finger.target);
- var handler = new GLOBAL.Function('event', finger.target.getAttribute(onEventName));
- finger.target.addEventListener(eventName, handler, false);
- finger.target.removeAttribute(onEventName);
- }
-
- // Set up a new event with the coordinates of the finger.
- var touch = createMouseEvent(eventName, originalEvent, finger);
-
- events.push(touch);
- });
-
- // Figure out scale and rotation.
- if (events.length > 1) {
- var x = events[0].pageX - events[1].pageX;
- var y = events[0].pageY - events[1].pageY;
-
- var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
- var angle = Math.atan2(x, y) * (180 / Math.PI);
-
- var gestureName = 'gesturechange';
-
- if (eventName === 'touchstart') {
- gestureName = 'gesturestart';
- startDistance = distance;
- startAngle = angle;
- }
-
- if (eventName === 'touchend') gestureName = 'gestureend';
-
- events.forEach(function(event) {
- var gesture = createMouseEvent(gestureName, event, event._finger);
- gestures.push(gesture);
- });
-
- events.concat(gestures).forEach(function(event) {
- event.scale = distance / startDistance;
- event.rotation = startAngle - angle;
- });
- }
-
- // Loop through the events array and fill in each touch array.
- events.forEach(function(touch) {
- touch.touches = events.filter(function(e) {
- return ~e.type.indexOf('touch') && e.type !== 'touchend';
- });
-
- touch.changedTouches = events.filter(function(e) {
- return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target;
- });
-
- touch.targetTouches = touch.changedTouches.filter(function(e) {
- return ~e.type.indexOf('touch') && e.type !== 'touchend';
- });
- });
-
- // Then fire the events.
- events.concat(gestures).forEach(function(event, i) {
- event.identifier = i;
- event._finger.target.dispatchEvent(event);
- });
- }
-
- // Prevent all mousedown event from doing anything.
- // We'll fire one manually at touchend.
- function phantomTouchStart(e) {
- if (e.synthetic) return;
-
- mouseIsDown = true;
-
- e.preventDefault();
- e.stopPropagation();
-
- fireTouchEvents('touchstart', e);
- }
-
- // The center between two fingers
- var centerX = NaN;
- var centerY = NaN;
-
- // Set each finger's position target.
- // Pressing alt engages the second finger.
- // Pressing shift locks the second finger's position relative to the first's.
- function moveFingers(e) {
- // We'll use this if the second is locked with the first.
- var changeX = e.clientX - fingers[0].x || 0;
- var changeY = e.clientY - fingers[0].y || 0;
-
- // The first finger just follows the mouse.
- fingers[0].move(e.clientX, e.clientY);
-
- // TODO: Determine modifier keys independent of mouse movement.
-
- if (e.altKey) {
- // Reset the center.
- if (!centerX && !centerY) {
- centerX = window.innerWidth / 2;
- centerY = window.innerHeight / 2;
- }
-
- // Lock the center with the first finger.
- if (e.shiftKey) {
- centerX += changeX;
- centerY += changeY;
- }
-
- var secondX = centerX + (centerX - e.clientX);
- var secondY = centerY + (centerY - e.clientY);
-
- fingers[1].move(secondX, secondY);
- } else {
- // Disengage the second finger.
- fingers[1].move(NaN, NaN);
-
- // Reset the center next time the alt key is held.
- centerX = NaN;
- centerY = NaN;
- }
- }
-
- // Prevent all mousemove events from firing.
- // We'll fire one (and only one) manually at touchend.
- function phantomTouchMove(e) {
- if (e.synthetic) return;
-
- e.preventDefault();
- e.stopPropagation();
-
- moveFingers(e);
-
- if (mouseIsDown) {
- fireTouchEvents('touchmove', e);
- }
- }
-
- // Prevent all mouseup events from firing.
- // We'll fire one manually at touchend.
- function phantomTouchEnd(e) {
- if (e.synthetic) return;
-
- mouseIsDown = false;
-
- e.preventDefault();
- e.stopPropagation();
-
- fireTouchEvents('touchend', e);
-
- fingers.forEach(function(finger) {
- if (!finger.target) return;
-
- // Mobile Safari moves all the mouse event to fire after the touchend event.
- finger.target.dispatchEvent(createMouseEvent('mouseover', e, finger));
- finger.target.dispatchEvent(createMouseEvent('mousemove', e, finger));
- finger.target.dispatchEvent(createMouseEvent('mousedown', e, finger));
-
- // TODO: These two only fire if content didn't change. How can we tell?
- finger.target.dispatchEvent(createMouseEvent('mouseup', e, finger));
- finger.target.dispatchEvent(createMouseEvent('click', e, finger));
- });
- }
-
- // Prevent clicks. We'll handle them manually.
- function phantomClick(e) {
- if (e.synthetic) return;
-
- e.preventDefault();
- e.stopPropagation();
- }
-
- // Not entirely proud of this, but I can't serve CSS from GitHub
- // and I want the bookmarklet to be as simple as possible.
- var defaultCSS = ([
- '._phantom-limb,',
- '._phantom-limb a {',
- 'cursor: none !important;',
- '}',
- '._phantom-limb_finger {',
- 'background: rgba(128, 128, 128, 0.5);',
- 'border: 2px solid rgb(128, 128, 128);',
- 'border-radius: 50%;',
- 'display: none;',
- 'height: 44px;',
- 'margin: -22px 0 0 -22px;',
- 'pointer-events: none;',
- 'position: fixed;',
- 'width: 44px;',
- 'z-index: 999999' +
- '}',
- '._phantom-limb ._phantom-limb_finger {',
- 'display: block;',
- '}'
- ]).join('\n');
-
- var styleTag = document.createElement('style');
- styleTag.id = '_phantom-limb_default-style';
- styleTag.innerHTML = defaultCSS;
- if (config.style) document.querySelector('head').appendChild(styleTag);
-
- // On/off switch
- function start() {
- document.addEventListener('mousedown', phantomTouchStart, true);
- document.addEventListener('mousemove', phantomTouchMove, true);
- document.addEventListener('mouseup', phantomTouchEnd, true);
- document.addEventListener('click', phantomClick, true);
-
- document.documentElement.classList.add('_phantom-limb');
- }
-
- function stop() {
- document.removeEventListener('mousedown', phantomTouchStart, true);
- document.removeEventListener('mousemove', phantomTouchMove, true);
- document.removeEventListener('mouseup', phantomTouchEnd, true);
- document.removeEventListener('click', phantomClick, true);
-
- document.documentElement.classList.remove('_phantom-limb');
- }
-
- var phantomLimb = {
- start: start,
- stop: stop
- };
-
- // TODO: Test these. I'm really just guessing.
- if (typeof GLOBAL.define === 'function') {
- GLOBAL.define(phantomLimb);
- } else if (typeof GLOBAL.exports !== 'undefined') {
- GLOBAL.exports = phantomLimb;
- } else {
- GLOBAL.phantomLimb = phantomLimb;
- }
-
- if (config.startOnLoad) start();
- }, 100)
-}(this));
View
1 index.html
@@ -4,7 +4,6 @@
<title>ViewKit Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script src="demo/phantomlimb.js"></script>
<script src="demo/zepto.min.js"></script>
<script src="demo/zepto-touch.js"></script>
<script src="build/vk.js"></script>
View
22 lib/components/actionbutton/actionbutton.css
@@ -1,5 +1,5 @@
.nav-button { font-size: 13.5px; background: #e5e5e5; color: #959595; float: left; line-height: 47px; height: 49px; text-align: center; }
-.nav-button.round { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e6e6e6)); position: relative; font-size: 13.58px; text-shadow: 0 1px 0 white; color: #363636; line-height: 39px; height: 39px; border-radius: 3px; box-shadow: 0px 0px 1px rgba(0,0,0,1); z-index: 1;
+.nav-button.round { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e6e6e6)); background: -moz-linear-gradient(top, #fefefe, #e6e6e6); position: relative; font-size: 13.58px; text-shadow: 0 1px 0 white; color: #363636; line-height: 39px; height: 39px; border-radius: 3px; box-shadow: 0px 0px 1px rgba(0,0,0,1); z-index: 1;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
@@ -10,29 +10,25 @@
box-pack: center;
box-align: center;
}
-.nav-button.round:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6e6e6), to(#fefefe));}
+.nav-button.round:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e6e6e6), to(#fefefe)); background: -moz-linear-gradient(top, #e6e6e6, #fefefe); }
.nav-button.round .label { margin: 0 10px; }
.nav-button .labelSprite { margin-right: 5px; }
-.nav-button.srsbsns { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fe8657), to(#e9794f)); color: white; text-shadow: none; font-family: 'Open Sans Bold'; margin: 0; width: 100%; }
-.nav-button.srsbsns:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9794f), to(#fe8657));}
+.nav-button.srsbsns { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fe8657), to(#e9794f)); background: -moz-linear-gradient(top, #fe8657, #e9794f); color: white; text-shadow: none; font-family: 'Open Sans Bold'; margin: 0; width: 100%; }
+.nav-button.srsbsns:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9794f), to(#fe8657)); background: -moz-linear-gradient(top, #e9794f, #fe8657);}
.nav-button.disabled { background: #727272; color: #4a4a4a;}
-.nav-button.action { padding: 0 10px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d9f2fc), to(#c5dbe4));}
-.nav-button.action:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5dbe4), to(#d9f2fc));}
+.nav-button.action { padding: 0 10px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d9f2fc), to(#c5dbe4)); background: -moz-linear-gradient(top, #d9f2fc, #c5dbe4); }
+.nav-button.action:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5dbe4), to(#d9f2fc)); background: -moz-linear-gradient(top, #c5dbe4, #d9f2fc);}
.buttons {
- overflow: auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
- -webkit-box-align: center;
- -moz-box-align: center;
- -o-box-align: center;
- box-align: center;
}
.left.buttons { margin-left: 5px; }
.left.buttons .actionButton { margin-left: 3px; }
-.right.buttons .actionButton { float: right; margin-right: 3px; }
-.right.buttons { margin-right: 2px; }
+.right.buttons .actionButton { margin-right: 3px; }
+.right.buttons { margin-right: 2px; display: -moz-box; -moz-box-orient: vertical; }
+.right.buttons { -moz-box-align: end; }
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
View
5 lib/components/bottomnav/bottomnav.css
@@ -16,7 +16,6 @@
.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;}
-.bottomNav .left.buttons { -webkit-box-flex: 2; display: -webkit-box; }
-.bottomNav .left.buttons a { -webkit-box-flex: 1; }
-.bottomNav .right.buttons a { float: right; }
+.bottomNav .left.buttons { -webkit-box-flex: 2; -moz-box-flex: 2; display: -webkit-box; display: -moz-box; }
+.bottomNav .left.buttons a { -webkit-box-flex: 1; -moz-box-flex: 1; }
.bottomNav.hidden { height: 0px !important; }
View
2 lib/components/list/list.css
@@ -3,7 +3,7 @@
/* for android 2.x you need padding-bottom: 55px; if you set bottom: it breaks rendering */
/* even if you un-set it in js after it renders */
/* due to these constraints these values are set by JS instead of here */
-.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 50px; bottom: 55px; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: scroll; }
+.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 50px; bottom: 55px; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: auto; }
/* extend scroll area to bottom if the bottomnav is hidden */
.hidden .items { bottom: 0px !important; }
View
1 lib/components/navbar/navbar.css
@@ -0,0 +1 @@
+.ui-content .navBarContainer { width: 100%; height: 100%; }
View
6 lib/components/navbar/navbar.html
@@ -1,2 +1,4 @@
-<div class="left buttons"></div>
-<div class="right buttons"></div>
+<div class="centerBoth navBarContainer">
+ <div class="left buttons"></div>
+ <div class="right buttons"></div>
+</div>
View
4 lib/components/topnav/topnav.css
@@ -1,4 +1,4 @@
-.topNav { position: fixed; top: 0; right: 0; left: 0; z-index: 666; height: 49px; border-bottom: 1px solid #6d8f75; 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;
+.topNav { position: absolute; top: 0; right: 0; left: 0; z-index: 666; height: 49px; border-bottom: 1px solid #6d8f75; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); background: -moz-linear-gradient(top, #96c7a2, #87b492); border-top-right-radius: 5px; border-top-left-radius: 5px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
@@ -10,4 +10,4 @@
}
.topNav .left.buttons .actionButton { float: left; }
-
+.topNav .right.buttons .actionButton { display: inline-block; }

0 comments on commit dd9b018

Please sign in to comment.