mirror of
https://github.com/viq/NewsBlur.git
synced 2025-09-18 21:43:31 +00:00
Adding the hamburger as a slider for tiers of premium accounts.
This commit is contained in:
Samuel Clay
parent
07e7e744c9
commit
2f627c2f4e
5 changed files with 114 additions and 16 deletions
|
|
@ -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;
|
||||
|
|
|
|||
BIN
media/img/icons/hamburger.png
Normal file
BIN
media/img/icons/hamburger.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
media/img/icons/hamburger_l.png
Normal file
BIN
media/img/icons/hamburger_l.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
media/img/icons/hamburger_s.png
Normal file
BIN
media/img/icons/hamburger_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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'),
|
||||
'/',
|
||||
$.make('span', { className: 'NB-feedchooser-premium-cost-time' }, 'year'),
|
||||
'. That\'s three lattes in 12 months.'
|
||||
'Choose how much you would like to pay.',
|
||||
$.make('div', { style: 'color: #490567' }, 'The only difference is happiness.')
|
||||
])
|
||||
]),
|
||||
$.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);
|
||||
$.get('/profile/paypal_form', function(response) {
|
||||
$paypal.html(response);
|
||||
});
|
||||
var self = this;
|
||||
var $paypal = $('.NB-feedchooser-paypal', this.$modal);
|
||||
$.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 =
|
||||
// ===========
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue