From 0e9d69181b25c48638226132b1a28f762ab0530e Mon Sep 17 00:00:00 2001 From: yukulele Date: Tue, 21 May 2013 11:44:14 +0200 Subject: [PATCH 1/5] add svg drop-shadow filter -moz-box-shadow dont seam to works anymore --- public/css/app.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/app.css b/public/css/app.css index ea7a844..9959457 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -33,10 +33,12 @@ input[type='radio'] { border: 0; } ====================================================== */ /* preview */ .arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + /*-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);*/ + filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27drop-shadow%27%3E%3CfeGaussianBlur%20in%3D%27SourceAlpha%27%20stdDeviation%3D%274%27%2F%3E%3CfeOffset%20dx%3D%270%27%20dy%3D%271%27%20result%3D%27offsetblur%27%2F%3E%3CfeFlood%20flood-color%3D%27rgba(0,0,0,0.3)%27%2F%3E%3CfeComposite%20in2%3D%27offsetblur%27%20operator%3D%27in%27%2F%3E%3CfeMerge%3E%3CfeMergeNode%2F%3E%3CfeMergeNode%20in%3D%27SourceGraphic%27%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#drop-shadow"); -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); + } /* logo */ From 13c90a66b6b4c608c66d769babe4c5c9ff8673c8 Mon Sep 17 00:00:00 2001 From: bra1n Date: Fri, 1 Nov 2013 18:35:45 +0100 Subject: [PATCH 2/5] moved redundant absolute positioning to common styles adjusted unittests to reflect changes --- public/js/lib/models/arrow.js | 14 +++++++++++--- public/js/spec/models/arrow_spec.js | 29 +++++++++++++++++------------ 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js index 262db02..e2f3350 100644 --- a/public/js/lib/models/arrow.js +++ b/public/js/lib/models/arrow.js @@ -61,7 +61,8 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; @protected **/ _baseCSS: function () { - var iPos = this.invertedPosition(), + var pos = this.get('position'), + iPos = this.invertedPosition(), color = this.get('color'), borderWidth = this.get('borderWidth'), borderColor = this.get('borderColor'), @@ -81,6 +82,13 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; css += '\t' + iPos +': 100%;\n'; + if (pos === 'top' || pos === 'bottom') { + css += '\tleft: 50%;\n'; + } + else { + css += '\ttop: 50%;\n'; + } + css += '\tborder: solid transparent;\n'; css += '\tcontent: " ";\n'; css += '\theight: 0;\n'; @@ -117,10 +125,10 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; css += '\tborder-width: ' + size + 'px;\n'; if (pos === 'top' || pos === 'bottom') { - css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n'; + css += '\tmargin-left: -' + size + 'px;\n'; } else { - css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n'; + css += '\tmargin-top: -' + size + 'px;\n'; } css += '}'; diff --git a/public/js/spec/models/arrow_spec.js b/public/js/spec/models/arrow_spec.js index eaa73f7..ff3a7a8 100644 --- a/public/js/spec/models/arrow_spec.js +++ b/public/js/spec/models/arrow_spec.js @@ -134,6 +134,7 @@ describe("CSSArrowPlease.Arrow", function () { expected; expected = '\tbottom: 100%;\n'; + expected = '\tleft: 50%;\n'; expected += '\tborder: solid transparent;\n'; expected += '\tcontent: " ";\n'; expected += '\theight: 0;\n'; @@ -210,9 +211,10 @@ describe("CSSArrowPlease.Arrow", function () { beforeEach(function () { arrow.set('position', 'top'); }); it('is centered', function () { - var css = arrow._arrowCSS('red', 20); - expect( css ).toMatch( 'left: 50%' ); - expect( css ).toMatch( 'margin-left: -20px' ); + var arrowcss = arrow._arrowCSS('red', 20), + basecss = arrow._baseCSS(); + expect( basecss ).toMatch( 'left: 50%' ); + expect( arrowcss ).toMatch( 'margin-left: -20px' ); }); }); @@ -220,9 +222,10 @@ describe("CSSArrowPlease.Arrow", function () { beforeEach(function () { arrow.set('position', 'bottom'); }); it('is centered', function () { - var css = arrow._arrowCSS('red', 20); - expect( css ).toMatch( 'left: 50%' ); - expect( css ).toMatch( 'margin-left: -20px' ); + var arrowcss = arrow._arrowCSS('red', 20), + basecss = arrow._baseCSS(); + expect( basecss ).toMatch( 'left: 50%' ); + expect( arrowcss ).toMatch( 'margin-left: -20px' ); }); }); @@ -230,9 +233,10 @@ describe("CSSArrowPlease.Arrow", function () { beforeEach(function () { arrow.set('position', 'right'); }); it('is centered', function () { - var css = arrow._arrowCSS('red', 20); - expect( css ).toMatch( 'top: 50%' ); - expect( css ).toMatch( 'margin-top: -20px' ); + var arrowcss = arrow._arrowCSS('red', 20), + basecss = arrow._baseCSS(); + expect( basecss ).toMatch( 'top: 50%' ); + expect( arrowcss ).toMatch( 'margin-top: -20px' ); }); }); @@ -240,9 +244,10 @@ describe("CSSArrowPlease.Arrow", function () { beforeEach(function () { arrow.set('position', 'left'); }); it('is centered', function () { - var css = arrow._arrowCSS('red', 20); - expect( css ).toMatch( 'top: 50%' ); - expect( css ).toMatch( 'margin-top: -20px' ); + var arrowcss = arrow._arrowCSS('red', 20), + basecss = arrow._baseCSS(); + expect( basecss ).toMatch( 'top: 50%' ); + expect( arrowcss ).toMatch( 'margin-top: -20px' ); }); }); From 246dbad2e2c109da30d50cdefe27559f935bfd7e Mon Sep 17 00:00:00 2001 From: bra1n Date: Fri, 1 Nov 2013 18:59:39 +0100 Subject: [PATCH 3/5] better handling of zero border width case --- public/js/lib/models/arrow.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js index e2f3350..aced0c3 100644 --- a/public/js/lib/models/arrow.js +++ b/public/js/lib/models/arrow.js @@ -96,7 +96,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; css += '\tposition: absolute;\n'; css += '\tpointer-events: none;\n'; - css += '}\n'; + if(hasBorder) css += '}\n'; return css; }, @@ -111,14 +111,15 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; @protected **/ _arrowCSS: function (color, size, layer) { - var pos = this.get('position'), - iPos = this.invertedPosition(), - rgbColor = this.hexToRGB(color), - css = ".arrow_box:"; + var pos = this.get('position'), + iPos = this.invertedPosition(), + rgbColor = this.hexToRGB(color), + borderWidth = this.get('borderWidth'), + css = ""; layer = layer || 'after'; - css += layer + ' {\n'; + if(borderWidth > 0) css += '.arrow_box:' + layer + ' {\n'; css += '\tborder-color: rgba(' + rgbColor.join(', ') + ', 0);\n'; css += '\tborder-' + iPos + '-color: ' + color + ';\n'; @@ -184,7 +185,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {}; this._arrowBorderCSS() ]; - return css.join('\n'); + return css.join(css[2] ? '\n':''); }, /** From 313058366fe7dd5d26816aca7e579cce9acdd826 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=B8jberg?= Date: Wed, 13 Nov 2013 16:24:04 -0500 Subject: [PATCH 4/5] remove arrow box drop shadow --- public/css/app.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 9959457..c137a21 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -32,14 +32,7 @@ input[type='radio'] { border: 0; } /* =MODULES ====================================================== */ /* preview */ -.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; - /*-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);*/ - - filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27drop-shadow%27%3E%3CfeGaussianBlur%20in%3D%27SourceAlpha%27%20stdDeviation%3D%274%27%2F%3E%3CfeOffset%20dx%3D%270%27%20dy%3D%271%27%20result%3D%27offsetblur%27%2F%3E%3CfeFlood%20flood-color%3D%27rgba(0,0,0,0.3)%27%2F%3E%3CfeComposite%20in2%3D%27offsetblur%27%20operator%3D%27in%27%2F%3E%3CfeMerge%3E%3CfeMergeNode%2F%3E%3CfeMergeNode%20in%3D%27SourceGraphic%27%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#drop-shadow"); - -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); - filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); - -} +.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; } /* logo */ .logo { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } From e9d0b487c4fac8fc45a0efa8b1c99573e08f34ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20H=C3=B8jberg?= Date: Wed, 13 Nov 2013 16:26:23 -0500 Subject: [PATCH 5/5] deploy --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c458abe..a47cfab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cssarrowplease", - "version": "0.2.2-16", + "version": "0.2.2-18", "author": { "name": "Simon Højberg", "email": "r.hackr@gmail.com" @@ -41,4 +41,4 @@ "cssarrowplease.com", "www.cssarrowplease.com" ] -} \ No newline at end of file +}