Fixed: mobile viewport was too large when presenting ads, making for a sloppy mobile experience. Restricted length of "Advertisement" label to fix it.

This commit is contained in:
Ken Cooper 2015-10-28 16:51:53 -07:00
parent af22cd987d
commit ffbd69688e
6 changed files with 18 additions and 3 deletions

View File

@ -101,6 +101,10 @@ export default Ember.Component.extend({
return `width: ${this.get('mobile_amazon_width')}px; height: ${this.get('mobile_amazon_height')}px;`.htmlSafe(); return `width: ${this.get('mobile_amazon_width')}px; height: ${this.get('mobile_amazon_height')}px;`.htmlSafe();
}.property('mobile_amazon_width', 'mobile_amazon_height'), }.property('mobile_amazon_width', 'mobile_amazon_height'),
adTitleStyleMobile: function() {
return `width: ${this.get('mobile_amazon_width')}px;`.htmlSafe();
}.property('mobile_amazon_width'),
userInput: function() { userInput: function() {
return `${this.get('user_input')}`.htmlSafe(); return `${this.get('user_input')}`.htmlSafe();
}.property('user_input'), }.property('user_input'),

View File

@ -120,6 +120,10 @@ export default Ember.Component.extend({
return `width: ${this.get('ad_mobile_width')}px; height: ${this.get('ad_mobile_height')}px; margin:0 auto;`.htmlSafe(); return `width: ${this.get('ad_mobile_width')}px; height: ${this.get('ad_mobile_height')}px; margin:0 auto;`.htmlSafe();
}.property('ad_mobile_width', 'ad_mobile_height'), }.property('ad_mobile_width', 'ad_mobile_height'),
adTitleStyleMobile: function() {
return `width: ${this.get('ad_mobile_width')}px;`.htmlSafe();
}.property('ad_mobile_width'),
adInsStyleMobile: function() { adInsStyleMobile: function() {
return `display: inline-block; ${this.get('adWrapperStyleMobile')}`.htmlSafe(); return `display: inline-block; ${this.get('adWrapperStyleMobile')}`.htmlSafe();
}.property('adWrapperStyleMobile'), }.property('adWrapperStyleMobile'),

View File

@ -187,6 +187,10 @@ export default Ember.Component.extend({
return `width: ${this.get('const_mobile_width')}px; height: ${this.get('const_mobile_height')}px;`.htmlSafe(); return `width: ${this.get('const_mobile_width')}px; height: ${this.get('const_mobile_height')}px;`.htmlSafe();
}.property('const_mobile_width', 'const_mobile_height'), }.property('const_mobile_width', 'const_mobile_height'),
adTitleStyleMobile: function() {
return `width: ${this.get('const_mobile_width')}px;`.htmlSafe();
}.property('const_mobile_width'),
checkTrustLevels: function() { checkTrustLevels: function() {
return !((currentUser) && (currentUser.get('trust_level') > Discourse.SiteSettings.dfp_through_trust_level)); return !((currentUser) && (currentUser.get('trust_level') > Discourse.SiteSettings.dfp_through_trust_level));
}.property('trust_level'), }.property('trust_level'),

View File

@ -1,9 +1,10 @@
{{#if checkTrustLevels}} {{#if checkTrustLevels}}
<div class="amazon-product-links-label"><h2>ADVERTISEMENT</h2></div>
{{#if site.mobileView}} {{#if site.mobileView}}
<div class="amazon-product-links-label" style={{adTitleStyleMobile}}><h2>ADVERTISEMENT</h2></div>
<iframe style={{adWrapperStyleMobile}} marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src={{userInput}}> <iframe style={{adWrapperStyleMobile}} marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src={{userInput}}>
</iframe> </iframe>
{{else}} {{else}}
<div class="amazon-product-links-label"><h2>ADVERTISEMENT</h2></div>
<div class="container" align="center"> <div class="container" align="center">
<iframe style={{adWrapperStyle}} marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src={{userInput}}> <iframe style={{adWrapperStyle}} marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src={{userInput}}>
</iframe> </iframe>

View File

@ -1,7 +1,7 @@
{{#if checkTrustLevels}} {{#if checkTrustLevels}}
<div class="google-adsense-label"><h2>ADVERTISEMENT</h2></div>
{{#if site.mobileView}} {{#if site.mobileView}}
<div style={{adWrapperStyleMobile}}> <div style={{adWrapperStyleMobile}}>
<div class="google-adsense-label" style={{adTitleStyleMobile}}><h2>ADVERTISEMENT</h2></div>
<ins class="adsbygoogle" <ins class="adsbygoogle"
style={{adInsStyleMobile}} style={{adInsStyleMobile}}
data-ad-client="ca-pub-{{publisher_id}}" data-ad-client="ca-pub-{{publisher_id}}"
@ -13,6 +13,7 @@
</script> </script>
</div> </div>
{{else}} {{else}}
<div class="google-adsense-label"><h2>ADVERTISEMENT</h2></div>
<div style={{adWrapperStyle}}> <div style={{adWrapperStyle}}>
<ins class="adsbygoogle" <ins class="adsbygoogle"
style={{adInsStyle}} style={{adInsStyle}}

View File

@ -1,9 +1,10 @@
{{#if checkTrustLevels}} {{#if checkTrustLevels}}
<div class="google-dfp-ad-label"><h2>ADVERTISEMENT</h2></div>
{{#if site.mobileView}} {{#if site.mobileView}}
<div class="google-dfp-ad-label" style={{adTitleStyleMobile}}><h2>ADVERTISEMENT</h2></div>
<div id={{divId}} style={{adWrapperStyleMobile}} class="dfp-ad-unit" align=center></div> <div id={{divId}} style={{adWrapperStyleMobile}} class="dfp-ad-unit" align=center></div>
{{else}} {{else}}
<div class="google-dfp-ad-label"><h2>ADVERTISEMENT</h2></div>
<div id={{divId}} style={{adWrapperStyle}} class="dfp-ad-unit" align=center></div> <div id={{divId}} style={{adWrapperStyle}} class="dfp-ad-unit" align=center></div>
{{/if}} {{/if}}
{{/if}} {{/if}}