diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md index 18da9084b339..c235e1c24613 100644 --- a/css/Z_INDEX.md +++ b/css/Z_INDEX.md @@ -9,10 +9,11 @@ selector | z-index | file .-amp-element > [overflow] | 2 | css/amp.css .-amp-image-lightbox-caption | 2 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css .amp-carousel-button | 10 | extensions/amp-carousel/0.1/amp-carousel.css -amp-sticky-ad | 11 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css -amp-app-banner | 12 | extensions/amp-app-banner/0.1/amp-app-banner.css -.amp-app-banner-dismiss-button | 13 | extensions/amp-app-banner/0.1/amp-app-banner.css -i-amp-app-banner-top-padding | 14 | extensions/amp-app-banner/0.1/amp-app-banner.css +amp-sticky-ad | 11 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css +i-amp-sticky-ad-top-padding | 12 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css +amp-app-banner | 13 | extensions/amp-app-banner/0.1/amp-app-banner.css +.amp-app-banner-dismiss-button | 14 | extensions/amp-app-banner/0.1/amp-app-banner.css +i-amp-app-banner-top-padding | 15 | extensions/amp-app-banner/0.1/amp-app-banner.css amp-image-lightbox | 1000 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css amp-live-list > [update] | 1000 | extensions/amp-live-list/0.1/amp-live-list.css amp-user-notification | 1000 | extensions/amp-user-notification/0.1/amp-user-notification.css diff --git a/extensions/amp-app-banner/0.1/amp-app-banner.css b/extensions/amp-app-banner/0.1/amp-app-banner.css index d7bce883a66f..26dfdb6aaa81 100644 --- a/extensions/amp-app-banner/0.1/amp-app-banner.css +++ b/extensions/amp-app-banner/0.1/amp-app-banner.css @@ -22,7 +22,7 @@ amp-app-banner { max-height: 100px !important; box-sizing: border-box; background: #fff; - z-index: 12 !important; + z-index: 13 !important; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important; } @@ -34,7 +34,7 @@ i-amp-app-banner-top-padding { background: #fff; height: 4px; /** Must be above the dismiss button to cover bottom shadow */ - z-index: 14 !important; + z-index: 15 !important; } .amp-app-banner-dismiss-button { @@ -48,7 +48,7 @@ i-amp-app-banner-top-padding { background-position: 9px center; background-color: #fff; background-repeat: no-repeat; - z-index: 13 !important; + z-index: 14 !important; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2); border: none; border-top-left-radius: 12px; diff --git a/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js b/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js index d80516ecaaf6..f4eec0cf4f63 100644 --- a/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js @@ -31,7 +31,7 @@ describes.realWin('amp-sticky-ad 0.1 version', { let win; let ampStickyAd; let impl; - describe('with valid child', () => { + describe('with valid child 0.1', () => { beforeEach(() => { win = env.win; ampStickyAd = win.document.createElement('amp-sticky-ad'); @@ -240,7 +240,7 @@ describes.realWin('amp-sticky-ad 0.1 version', { }); - describe('with unvalid child', () => { + describe('with unvalid child 0.1', () => { let ampImg; let ampAd1; let ampAd2; diff --git a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css index 75bbb9b87062..6e23c10eeb4f 100644 --- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css +++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css @@ -20,12 +20,24 @@ amp-sticky-ad { bottom: 0 !important; left: 0; width: 100% !important; - z-index: 11; + z-index: 11 !important; max-height: 100px !important; box-sizing: border-box; opacity: 1 !important; background-image: none !important; background-color: #fff; + box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important; +} + +i-amp-sticky-ad-top-padding { + position: absolute; + top: 0; + left: 0; + right: 0; + background: #fff; + height: 4px; + /** Must be above the dismiss button to cover bottom shadow */ + z-index: 12 !important; } .-amp-sticky-ad-layout { @@ -44,21 +56,26 @@ amp-sticky-ad[visible] { .-amp-sticky-ad-layout > amp-ad { display: block; + /*To cover the space of i-amp-sticky-ad-top-padding*/ + margin-top: 4px; } .amp-sticky-ad-close-button { position: absolute; visibility: hidden; - width: 32px; - height: 32px; - top: -32px; + width: 28px; + height: 28px; + top: -28px; right: 0; - background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E'); - background-size: 26px 26px; - background-position: center; + background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2213px%22%20height%3D%2213px%22%20viewBox%3D%22341%208%2013%2013%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Cg%20id%3D%22ic_close_black_24dp%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28341.000000%2C%208.000000%29%22%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%234F4F4F%22%20points%3D%2213%201.30928571%2011.6907143%200%206.5%205.19071429%201.30928571%200%200%201.30928571%205.19071429%206.5%200%2011.6907143%201.30928571%2013%206.5%207.80928571%2011.6907143%2013%2013%2011.6907143%207.80928571%206.5%22%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E'); + background-size: 13px 13px; + background-position: 9px center; background-color: #fff; - border: 1px solid #c8c8c8; + background-repeat: no-repeat; + box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2); + border: none; + border-top-left-radius: 12px; } amp-sticky-ad[visible] > .amp-sticky-ad-close-button { @@ -69,19 +86,21 @@ amp-sticky-ad[visible] > .amp-sticky-ad-close-button { .amp-sticky-ad-close-button:before { position: absolute; content: ''; - top: -18px; + top: -20px; right: 0; - left: -18px; + left: -20px; bottom: 0; } [dir=rtl] .amp-sticky-ad-close-button { right: auto; left: 0; + border-top-left-radius: 0; + border-top-right-radius: 12px; + background-position: 6px center; } [dir=rtl] .amp-sticky-ad-close-button:before { - top: -18px; - right: -18px; + right: -20px; left: 0; } diff --git a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js index d1cb9e2b831a..b79327cc98a2 100644 --- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js @@ -64,6 +64,10 @@ class AmpStickyAd extends AMP.BaseElement { this.ad_ = children[0]; this.setAsOwner(this.ad_); + const paddingBar = this.win.document.createElement( + 'i-amp-sticky-ad-top-padding'); + this.element.appendChild(paddingBar); + // On viewport scroll, check requirements for amp-stick-ad to display. this.scrollUnlisten_ = this.viewport_.onScroll(() => this.displayAfterScroll_()); diff --git a/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js b/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js index f12e374b3bb3..8a983aecc5ad 100644 --- a/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js @@ -30,7 +30,7 @@ describes.realWin('amp-sticky-ad 1.0 version', { let win; let ampStickyAd; let impl; - describe('with valid child', () => { + describe('with valid child 1.0', () => { beforeEach(() => { win = env.win; ampStickyAd = win.document.createElement('amp-sticky-ad'); @@ -188,7 +188,10 @@ describes.realWin('amp-sticky-ad 1.0 version', { impl.displayAfterScroll_(); expect(addCloseButtonSpy).to.be.called; expect(impl.element.children[1]).to.be.not.null; - expect(impl.element.children[1].tagName).to.equal('BUTTON'); + expect(impl.element.children[1].tagName).to.equal( + 'I-AMP-STICKY-AD-TOP-PADDING'); + expect(impl.element.children[2]).to.be.not.null; + expect(impl.element.children[2].tagName).to.equal('BUTTON'); }); it('should listen to amp:built, amp:load:end', () => { @@ -233,7 +236,7 @@ describes.realWin('amp-sticky-ad 1.0 version', { }); - describe('with unvalid child', () => { + describe('with unvalid child 1.0', () => { let ampImg; let ampAd1; let ampAd2; @@ -333,9 +336,9 @@ describes.realWin('amp-sticky-ad 1.0 with real ad child', { return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { let borderWidth = win.getComputedStyle(win.document.body, null) .getPropertyValue('border-bottom-width'); - expect(borderWidth).to.equal('50px'); - expect(impl.element.children[1]).to.be.not.null; - impl.element.children[1].dispatchEvent(new Event('click')); + expect(borderWidth).to.equal('54px'); + expect(impl.element.children[2]).to.be.not.null; + impl.element.children[2].dispatchEvent(new Event('click')); return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { borderWidth = win.getComputedStyle(win.document.body, null) .getPropertyValue('border-bottom-width'); @@ -368,7 +371,7 @@ describes.realWin('amp-sticky-ad 1.0 with real ad child', { return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { let borderWidth = win.getComputedStyle(win.document.body, null) .getPropertyValue('border-bottom-width'); - expect(borderWidth).to.equal('50px'); + expect(borderWidth).to.equal('54px'); impl.collapsedCallback(); return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { borderWidth = win.getComputedStyle(win.document.body, null)