Mobile suggest: replace with mweb beta banner

reddit-archive · Jun 1, 2015 · 80c5dfa · 80c5dfa · michelaungthein · Jun 9, 2015
1 parent 390e6ea
commit 80c5dfa
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 13 deletions.
diff --git a/r2/example.ini b/r2/example.ini
@@ -793,6 +793,9 @@ goldvertisement_class =
 events_collector_sample_rate = 0.0
 # Event-collector sample rate for submit (new link) events
 events_collector_submit_sample_rate = 0.0
+# Pages that are not yet supported by mobile web, and therefore should not
+# receive the switch-to-mobile banner
+mweb_blacklist_expressions = ^/prefs/?, ^/live/?, /message/, /wiki/?, /m/, ^/subreddits/create, /submit, ^/r/[^/]+/about/, ^/gold, ^/advertising, ^/promoted, ^/rules, ^/buttons
 
 
 # Manage ZenDesk content from reddit

diff --git a/r2/r2/lib/app_globals.py b/r2/r2/lib/app_globals.py
@@ -337,6 +337,7 @@ class Globals(object):
             'listing_chooser_sample_multis',
             'discovery_srs',
             'proxy_gilding_accounts',
+            'mweb_blacklist_expressions',
         ],
         ConfigValue.str: [
             'listing_chooser_gold_multi',

diff --git a/r2/r2/lib/template_helpers.py b/r2/r2/lib/template_helpers.py
@@ -185,6 +185,7 @@ def js_config(extra_config=None):
         "static_root": static(''),
         "over_18": bool(c.over18),
         "new_window": bool(c.user.pref_newwindow),
+        "mweb_blacklist_expressions": g.live_config['mweb_blacklist_expressions'],
         "vote_hash": c.vote_hash,
         "gold": gold,
         "has_subscribed": logged and c.user.has_subscribed,

diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less
@@ -11138,6 +11138,22 @@ body.banned.deleted div#header {
     }
 }
 
+.mobile-web-redirect {
+    background-color: #4a7fc5;
+    box-sizing: border-box;
+    color: #FFF;
+    font-size: 40px;
+    font-weight: bold;
+    padding: 30px 0;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    width: 100%;
+    display: block;
+    position: relative;
+    z-index: 50;
+}
+
 body:not(.loggedin) .comment-save-button,
 body:not(.loggedin) .give-gold-button,
 body:not(.loggedin) .reply-button,

diff --git a/r2/r2/public/static/js/newsletter.js b/r2/r2/public/static/js/newsletter.js
@@ -21,7 +21,7 @@ r.newsletter = {
 r.newsletter.ui = {
   _setupNewsletterBar: function() {
     var newsletterBarSeen = !!store.get('newsletterbar.seen');
-    if (newsletterBarSeen) {
+    if (newsletterBarSeen || r.ui.isSmallScreen()) {
       return;
     }
 

diff --git a/r2/r2/public/static/js/ui.js b/r2/r2/public/static/js/ui.js
@@ -9,23 +9,35 @@ r.ui.init = function() {
         store.safeSet('ui.shown.welcome', true)
     }
 
-    // mobile suggest infobar
-    var smallScreen = r.ui.isSmallScreen(),
-        onFrontPage = $.url().attr('path') == '/'
-    if (smallScreen && onFrontPage && r.config.renderstyle != 'compact') {
+    var smallScreen = r.ui.isSmallScreen();
+
+    // mweb beta banner
+    var mwebOptInCookieName = "__cf_mob_redir";
+    if (smallScreen && r.config.renderstyle != 'compact' && !r.ui.inMobileWebBlacklist()) {
         var a = document.createElement('a');
         a.href = window.location;
         a.host = 'm.' + r.config.cur_domain;
-        a.search += (a.search ? '&' : '?') + 'ref=mobile_suggest&ref_source=desktop'
+        a.search += (a.search ? '&' : '?') + 'ref=mobile_beta_banner&ref_source=desktop'
         var url = a.href;
 
-        var infobar = $('<div class="infobar mellow">')
-            .html(r.utils.formatMarkdownLinks(
-                r._("Looks like you're browsing on a small screen. Would you like to try [reddit's mobile interface](%(url)s)?").format({
-                    url: url
-                })
-            ))
-        $('body > .content > :not(.infobar):first').before(infobar)
+        var $bar = $(_.template(
+          '<a href="<%- url %>" class="mobile-web-redirect"><%- button_text %></a>', {
+            url: url,
+            button_text: r._("switch to mobile version"),
+          }));
+
+        $bar.on('click', function() {
+           $.cookie(mwebOptInCookieName, '1', {
+               domain: r.config.cur_domain,
+               path:'/',
+               expires: 90
+            });
+
+           // redirect
+           return true;
+        });
+
+        $('#header').before($bar)
     }
 
     $('.help-bubble').each(function(idx, el) {
@@ -79,6 +91,12 @@ r.ui.init = function() {
     r.ui.initTimings()
 }
 
+r.ui.inMobileWebBlacklist = function() {
+  return _.any(r.config.mweb_blacklist_expressions, function(regex) {
+    return (new RegExp(regex)).test(window.location.pathname)
+  });
+}
+
 r.ui.isSmallScreen = function() {
  return window.matchMedia
           // 736px is the width of the iPhone 6+.