Adding the hamburger as a slider for tiers of premium accounts.

media/css/reader.css

@@ -3936,23 +3936,37 @@ background: transparent;
     list-style: none;
 /*    margin: 12px 0;*/
     padding: 0;
-    max-height: 290px;
+    max-height: 320px;
     min-height: 186px;
     width: auto;
     border: 1px solid #909090;
 }
 
 .NB-modal-feedchooser .NB-modal-submit.NB-modal-submit-paypal {
-    background-color: #F5FFB3;
     border-radius: 20px;
     padding: 12px;
-    border: 1px solid #E1E6AA;
+    border: 1px solid #F6BD44;
+    padding: 4px 12px 8px;
+    background-color: #FFED68;
+    background-image: -webkit-gradient(
+        linear,
+        left bottom,
+        left top,
+        color-stop(0.16, #FFED68),
+        color-stop(0.84, #FFF8B1)
+    );
+    background-image: -moz-linear-gradient(
+        center bottom,
+        #FFED68 16%,
+        #FFF8B1 84%
+    );
 }
 
 .NB-modal-feedchooser .NB-feedchooser-paypal {
     min-height: 48px;
     width: 150px;
     float: left;
+    margin-top: 16px;
 }
 
 .NB-modal-feedchooser .NB-feedchooser-dollar {
@@ -3960,10 +3974,48 @@ background: transparent;
     color: #1C55C0;
     font-size: 16px;
     margin: 0px 0px 0px 20px;
-    padding: 12px 0;
+    padding: 12px 0 0;
     font-weight: bold;
+    width: 112px;
 }
 
+.NB-modal-feedchooser .NB-feedchooser-dollar-value {
+    margin: 4px 0 0 0;
+    line-height: 20px;
+    text-shadow: 1px 1px 0 #FFF8B1;
+}
+
+.NB-modal-feedchooser .NB-feedchooser-dollar-month {
+    
+}
+
+.NB-modal-feedchooser .NB-feedchooser-dollar-year {
+    text-transform: uppercase;
+    font-size: 13px;
+    color: #455596;
+}
+
+.NB-modal-feedchooser .NB-feedchooser-dollar.NB-0 .ui-slider-handle {
+    border: none;
+    background: transparent url('../img/icons/hamburger_s.png') no-repeat 50% 50%;
+    height: 24px;
+    width: 24px;
+    top: -6px;
+}
+.NB-modal-feedchooser .NB-feedchooser-dollar.NB-1 .ui-slider-handle {
+    border: none;
+    background: transparent url('../img/icons/hamburger.png') no-repeat 50% 50%;
+    height: 30px;
+    width: 30px;
+    top: -9px;
+}
+.NB-modal-feedchooser .NB-feedchooser-dollar.NB-2 .ui-slider-handle {
+    border: none;
+    background: transparent url('../img/icons/hamburger_l.png') no-repeat 50% 50%;
+    height: 36px;
+    width: 36px;
+    top: -12px;
+}
 .NB-modal-feedchooser .NB-feedchooser .feed_counts {
     display: block;
     text-transform: uppercase;
@@ -4078,7 +4130,7 @@ background: transparent;
     background: transparent url('../img/icons/silk/pictures.png') no-repeat 0 0;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-3 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('../img/icons/silk/zoom.png') no-repeat 0 0;
+    background: transparent url('../img/icons/silk/images.png') no-repeat 0 0;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-4 .NB-feedchooser-premium-bullet-image {
     background: transparent url('../img/icons/silk/lorry.png') no-repeat 0 0;

media/js/newsblur/reader_feedchooser.js

@@ -17,6 +17,8 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
         _.defer(_.bind(function() { this.open_modal(); }, this));
         this.find_feeds_in_feed_list();
         this.initial_load_feeds();
+        this.setup_dollar_slider();
+        this.update_dollar_count(1);
         
         this.flags = {
             'has_saved': false
@@ -34,7 +36,7 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
                 $.make('b', [
                     'You have a ',
                     $.make('span', { style: 'color: #303060;' }, 'Standard Account'),
-                    ', which can follow up to '+this.MAX_FEEDS+' sites at a time.'
+                    ', which can follow up to '+this.MAX_FEEDS+' sites.'
                 ]),
                 'You can always change these.'
             ]),
@@ -77,7 +79,7 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
                 ]),
                 $.make('li', { className: 'NB-3' }, [
                   $.make('div', { className: 'NB-feedchooser-premium-bullet-image' }),
-                  'Access to future premium-only features like search, starring, sending to Instapaper.'
+                  'Access to the premium-only River of News.'
                 ]),
                 $.make('li', { className: 'NB-4' }, [
                   $.make('div', { className: 'NB-feedchooser-premium-bullet-image' }),
@@ -90,17 +92,19 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
                 ]),
                 $.make('li', { className: 'NB-6' }, [
                   $.make('div', { className: 'NB-feedchooser-premium-bullet-image' }),
-                  $.make('span', { className: 'NB-feedchooser-premium-cost-dollars' }, '$12'),
+                  'Choose how much you would like to pay.',
-                  '/',
+                  $.make('div', { style: 'color: #490567' }, 'The only difference is happiness.')
-                  $.make('span', { className: 'NB-feedchooser-premium-cost-time' }, 'year'),
-                  '. That\'s three lattes in 12 months.'
                 ])
               ]),
               $.make('div', { className: 'NB-modal-submit NB-modal-submit-paypal' }, [
                   // this.make_google_checkout()
                   $.make('div', { className: 'NB-feedchooser-paypal' }),
                   $.make('div', { className: 'NB-feedchooser-dollar' }, [
-                      $.make('span', { className: 'NB-feedchooser-dollar-month' }, 'Just $1/month!')
+                      $.make('div', { className: 'NB-feedchooser-dollar-slider'}),
+                      $.make('div', { className: 'NB-feedchooser-dollar-value' }, [
+                          $.make('div', { className: 'NB-feedchooser-dollar-month' }),
+                          $.make('div', { className: 'NB-feedchooser-dollar-year' })
+                      ])
                   ])
               ])
             ])
@@ -108,10 +112,12 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
     },
     
     make_paypal_button: function() {
-      var $paypal = $('.NB-feedchooser-paypal', this.$modal);
+        var self = this;
-      $.get('/profile/paypal_form', function(response) {
+        var $paypal = $('.NB-feedchooser-paypal', this.$modal);
-        $paypal.html(response);
+        $.get('/profile/paypal_form', function(response) {
-      });
+          $paypal.html(response);
+          self.update_dollar_count(1);
+        });
     },
     
     make_google_button: function() {
@@ -363,6 +369,46 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
       $('.NB-module-account-trainer').removeClass('NB-hidden').hide().slideDown(500);
     },
     
+    setup_dollar_slider: function() {
+        var self = this;
+        
+        $('.NB-feedchooser-dollar-slider', this.$modal).slider({
+            range: 'max',
+            min: 0,
+            max: 2,
+            step: 1,
+            value: 1,
+            slide: function(e, ui) {
+                self.update_dollar_count(ui.value);
+            },
+            stop: function(e, ui) {
+                self.update_dollar_count(ui.value);
+            }
+        }).change();
+    },
+    
+    update_dollar_count: function(step) {
+        var $month = $('.NB-feedchooser-dollar-month', this.$modal);
+        var $year = $('.NB-feedchooser-dollar-year', this.$modal);
+        var $dollar = $('.NB-feedchooser-dollar', this.$modal);
+        var $input = $('input[name=a3]');
+        
+        $dollar.removeClass('NB-0').removeClass('NB-1').removeClass('NB-2').addClass('NB-'+step);
+        if (step == 0) {
+            $month.text('$1/month');
+            $year.text('($12/year)');
+            $input.val(12);
+        } else if (step == 1) {
+            $month.text('$2/month');
+            $year.text('($24/year)');
+            $input.val(24);
+        } else if (step == 2) {
+            $month.text('$5/month');
+            $year.text('($64/year)');
+            $input.val(64);
+        }
+    },
+    
     // ===========
     // = Actions =
     // ===========