diff --git a/app/components/application-wrapper.js b/app/components/application-wrapper.js index 28df642968e..b1b34cfaaee 100644 --- a/app/components/application-wrapper.js +++ b/app/components/application-wrapper.js @@ -65,6 +65,10 @@ export default Component.extend({ this.get('currentUser.language') === 'en' && inGroup('FANDOM_APP_SMART_BANNER_IOS_EXPERIMENT', 'BANNER'); }), + + isIosBannerVisible: computed('shouldShowABTestBannerOnIOS', 'smartBannerVisible', function () { + return this.get('shouldShowABTestBannerOnIOS') && this.get('smartBannerVisible'); + }), // Smart Banner AB Testing /** diff --git a/app/components/site-head.js b/app/components/site-head.js index ac927e7d854..a6c2a065f55 100644 --- a/app/components/site-head.js +++ b/app/components/site-head.js @@ -11,9 +11,10 @@ export default Component.extend( HeadroomMixin, NotificationsUnreadCountMixin, { classNames: ['site-head-container'], - classNameBindings: ['themeBar'], + classNameBindings: ['themeBar', 'testSmartBannerVisible'], tagName: 'div', themeBar: false, + testSmartBannerVisible: false, closableDrawerStates: ['nav', 'user-profile'], closeIcon: 'close', diff --git a/app/mixins/head-tags-dynamic.js b/app/mixins/head-tags-dynamic.js index 8b12a1270b5..d8b40fe9225 100644 --- a/app/mixins/head-tags-dynamic.js +++ b/app/mixins/head-tags-dynamic.js @@ -4,6 +4,7 @@ import {inGroup} from '../modules/abtest'; export default Ember.Mixin.create({ headData: Ember.inject.service(), wikiVariables: Ember.inject.service(), + fastboot: Ember.inject.service(), /** * @param {Object} model @@ -62,9 +63,10 @@ export default Ember.Mixin.create({ headData.pageImage = model.details.thumbnail; } - if (headData.appId && + if (!this.get('fastboot.isFastBoot') && headData.appId && // Smart Banner AB Testing - !inGroup('FANDOM_APP_SMART_BANNER_IOS_TEST', 'banner') && !inGroup('FANDOM_APP_SMART_BANNER_IOS_TEST', 'button') + !inGroup('FANDOM_APP_SMART_BANNER_IOS_EXPERIMENT', 'BANNER') && + !inGroup('FANDOM_APP_SMART_BANNER_IOS_EXPERIMENT', 'BUTTON') // Smart Banner AB Testing ) { headData.appleItunesApp = `app-id=${headData.appId}`; diff --git a/app/styles/component/_site-head.scss b/app/styles/component/_site-head.scss index 9f3b2c5ae40..dc176941136 100644 --- a/app/styles/component/_site-head.scss +++ b/app/styles/component/_site-head.scss @@ -23,6 +23,12 @@ $site-head-default-box-shadow: 0 1px 4px 0 $site-head-box-shadow-color; .site-head-container { min-height: $site-head-height; + + &.test-smart-banner-visible { + .site-head { + top: 85px; + } + } } .site-head-wrapper { @@ -117,7 +123,8 @@ $site-head-default-box-shadow: 0 1px 4px 0 $site-head-box-shadow-color; color: $wds-fandom-color-navy; font-size: 12px; font-weight: bold; - padding: 3px; + margin: 0 auto; + padding: 4px; } } diff --git a/app/styles/component/_smart-banner-test.scss b/app/styles/component/_smart-banner-test.scss index 26e3c791381..812c1be131b 100644 --- a/app/styles/component/_smart-banner-test.scss +++ b/app/styles/component/_smart-banner-test.scss @@ -1,13 +1,16 @@ +$wds-fandom-color-light-gray: #f2f5f5; + .smart-banner-test { + -webkit-font-smoothing: antialiased; align-items: center; - background: $wds-color-light-blue-gray; + background: $wds-fandom-color-light-gray; background-size: auto 100%; display: flex; height: 85px; - margin-left: 3px; - width: 100%; justify-content: flex-start; - -webkit-font-smoothing: antialiased; + position: fixed; + width: 100%; + z-index: $z-site-head; } .smart-banner-link { @@ -35,7 +38,7 @@ display: flex; font-size: 17px; font-weight: 500; - margin-right: 12px; + margin-right: 24px; text-align: center; } @@ -52,23 +55,27 @@ .sb-test-meta { display: flex; flex-direction: column; - margin-left: 6px; + margin-left: 8px; } .sb-test-title { + color: #191919; font-size: 16px; font-weight: bold; - color: #191919; letter-spacing: .4px; + margin-bottom: 3px; } .sb-test-description { + color: #4a4a4a; font-size: 14px; line-height: 1; } .sb-test-app-store { + color: #4a4a4a; font-size: 14px; line-height: 1; + margin-bottom: 5px; } } diff --git a/app/styles/layout/_page-wrapper.scss b/app/styles/layout/_page-wrapper.scss index f19931a9a4a..c7a183c9bbf 100644 --- a/app/styles/layout/_page-wrapper.scss +++ b/app/styles/layout/_page-wrapper.scss @@ -1,4 +1,9 @@ .page-wrapper { + &.with-ios-banner { + //smart banner height + site head height + margin-top: 140px; + } + .mobile-top-leaderboard ~ & { margin-top: 0; } diff --git a/app/templates/components/application-wrapper.hbs b/app/templates/components/application-wrapper.hbs index a2a986e5990..ec4a97a7e21 100644 --- a/app/templates/components/application-wrapper.hbs +++ b/app/templates/components/application-wrapper.hbs @@ -1,6 +1,12 @@ {{#if fullPage}} {{outlet}} {{else}} + {{#if shouldShowABTestBannerOnIOS}} + {{smart-banner-test + toggleVisibility=attrs.toggleSmartBanner + isVisible=smartBannerVisible + }} + {{/if}} {{site-head drawerContent=activeDrawerContent drawerVisible=drawerVisible @@ -10,6 +16,7 @@ setDrawerContent=(action 'setDrawerContent') smartBannerVisible=smartBannerVisible themeBar=themeBar + testSmartBannerVisible=isIosBannerVisible toggleDrawer=this.attrs.toggleDrawer }} {{#wikia-drawer @@ -31,18 +38,13 @@ }} {{/if}} {{/wikia-drawer}} - {{#if shouldShowABTestBannerOnIOS}} - {{smart-banner-test - toggleVisibility=attrs.toggleSmartBanner - isVisible=smartBannerVisible - }} - {{else}} + {{#unless shouldShowABTestBannerOnIOS}} {{smart-banner-android isVisible=smartBannerVisible toggleVisibility=attrs.toggleSmartBanner }} - {{/if}} -