From 93d5283398dbeca7a22563262948024a8f0a74b5 Mon Sep 17 00:00:00 2001 From: Ben Summers Date: Sun, 19 Aug 2012 11:58:50 +0100 Subject: [PATCH 1/2] Improve appearance of top arrow on the iPad. On the iPad, there's often a 1 pixel line at the edge of the arrow. Fix this for the top position only. --- public/js/lib/models/arrow.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js index 7488d0b..1f3eb6a 100644 --- a/public/js/lib/models/arrow.js +++ b/public/js/lib/models/arrow.js @@ -87,22 +87,31 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; _arrowCSS: function (color, size, layer) { var pos = this.get('position'), iPos = this.invertedPosition(), + adjustment= 0, css = ".arrow_box:"; layer = layer || 'after'; + if(layer === 'after' && pos === 'top') { + adjustment = 1; + } + css += layer + ' {\n'; css += '\tborder-' + iPos + '-color: ' + color + ';\n'; - css += '\tborder-width: ' + size + 'px;\n'; + css += '\tborder-width: ' + (size + adjustment) + 'px;\n'; if (pos === 'top' || pos === 'bottom') { - css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n'; + css += '\tleft: 50%;\n\tmargin-left: -' + (size + adjustment) + 'px;\n'; } else { css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n'; } + if (adjustment) { + css += '\ttop: ' + (0 - ((size * 2) + 1)) + 'px;\n'; + } + css += '}'; return css; From f0ff59fd73d3e9db14d016ed15e0d431f5edb3a0 Mon Sep 17 00:00:00 2001 From: Ben Summers Date: Sun, 19 Aug 2012 11:58:50 +0100 Subject: [PATCH 2/2] Improve appearance of top arrow on the iPad. On the iPad, there's often a 1 pixel line at the edge of the arrow. Fix this for the top position only. --- public/js/lib/models/arrow.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js index 262db02..dbe05d7 100644 --- a/public/js/lib/models/arrow.js +++ b/public/js/lib/models/arrow.js @@ -106,23 +106,32 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; var pos = this.get('position'), iPos = this.invertedPosition(), rgbColor = this.hexToRGB(color), + adjustment= 0, css = ".arrow_box:"; layer = layer || 'after'; + if(layer === 'after' && pos === 'top') { + adjustment = 1; + } + css += layer + ' {\n'; css += '\tborder-color: rgba(' + rgbColor.join(', ') + ', 0);\n'; css += '\tborder-' + iPos + '-color: ' + color + ';\n'; - css += '\tborder-width: ' + size + 'px;\n'; + css += '\tborder-width: ' + (size + adjustment) + 'px;\n'; if (pos === 'top' || pos === 'bottom') { - css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n'; + css += '\tleft: 50%;\n\tmargin-left: -' + (size + adjustment) + 'px;\n'; } else { css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n'; } + if (adjustment) { + css += '\ttop: ' + (0 - ((size * 2) + 1)) + 'px;\n'; + } + css += '}'; return css;