diff --git a/r2/r2/public/static/css/reddit.css b/r2/r2/public/static/css/reddit.css index 5038b473b..caf4e2cab 100755 --- a/r2/r2/public/static/css/reddit.css +++ b/r2/r2/public/static/css/reddit.css @@ -888,14 +888,6 @@ a.author { margin-right: 0.5em; } text-decoration: underline; } -.help a.open, .help a.close { - margin: 0px 5px 5px 0; - position: absolute; - right: 0px; - bottom: 0px; -} - - .help.help-cover { position: relative; background-color: #F8F8F8; @@ -908,6 +900,47 @@ a.author { margin-right: 0.5em; } .help p, .help form { margin: 5px; font-size:110%; } .help form { display: inline; } +.help-hoverable { + cursor: help; +} + +.help-bubble { + display: none; + position: absolute; + width: 35em; + background: white; + color: #333; + border: 1px solid gray; + padding: 3px; + box-shadow: 0 2px 10px rgba(0,0,0,.25); +} + +.help-bubble p, .help-bubble form { + margin: .5em; +} + +.help-bubble:before, .help-bubble:after { + position: absolute; + right: 8px; + display: block; + content: ''; + border: 9px solid transparent; +} + +.help-bubble:before { + top: -19px; + border-bottom-color: gray; +} + +.help-bubble:after { + top: -18px; + border-bottom-color: white; +} + +.help-bubble a:hover { + text-decoration: underline +} + .infotext { border: 1px solid #369; background-color: #EFF7FF; @@ -975,6 +1008,14 @@ a.author { margin-right: 0.5em; } top: 1px; } +.organic-listing .help { + color: #336699; + margin: 0px 5px 5px 0; + position: absolute; + right: -1px; + bottom: 0px; +} + .link.promotedlink { /*background-color: lightgreen; */ border: 1px solid gray; diff --git a/r2/r2/public/static/js/base.js b/r2/r2/public/static/js/base.js index 32744baee..00637a2c5 100644 --- a/r2/r2/public/static/js/base.js +++ b/r2/r2/public/static/js/base.js @@ -12,4 +12,5 @@ r.setup = function(config) { $(function() { r.login.ui.init() r.analytics.init() + r.ui.HelpBubble.init() }) diff --git a/r2/r2/public/static/js/reddit.js b/r2/r2/public/static/js/reddit.js index 712b22acf..63191dbaf 100644 --- a/r2/r2/public/static/js/reddit.js +++ b/r2/r2/public/static/js/reddit.js @@ -290,6 +290,8 @@ function get_organic(elem, next) { if (next_thing.length == 0) next_thing = thing.siblings(".thing:not(.stub)").filter(":last"); } + + organic_help(listing, next_thing) thing.fadeOut('fast', function() { if(next_thing.length) next_thing.fadeIn('fast', function() { @@ -319,6 +321,25 @@ function get_organic(elem, next) { }); }; +function organic_help(listing, thing) { + listing = listing || $('.organic-listing') + thing = thing || listing.find('.thing:visible') + + var help = $('#spotlight-help') + if (!help.length) { + return + } + + help.data('HelpBubble').hide(function() { + help.find('.help-section').hide() + if (thing.hasClass('promoted')) { + help.find('.help-promoted').show() + } else { + help.find('.help-organic').show() + } + }) +} + /* links */ function linkstatus(form) { @@ -1250,6 +1271,8 @@ $(function() { $("#shortlink-text").click(function() { $(this).select(); }); + + organic_help() }); function show_friend(account_fullname) { diff --git a/r2/r2/public/static/js/ui.js b/r2/r2/public/static/js/ui.js index 3b575583b..e4327dd26 100644 --- a/r2/r2/public/static/js/ui.js +++ b/r2/r2/public/static/js/ui.js @@ -144,3 +144,61 @@ r.ui.Form.prototype = $.extend(new r.ui.Base(), { this.showStatus(r.strings.an_error_occurred + ' (' + xhr.status + ')', true) } }) + +r.ui.HelpBubble = function(el) { + r.ui.Base.call(this, el) + this.$el.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide')) + this.$parent = this.$el.parent() + this.$parent.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide')) + this.$parent.click($.proxy(this, 'queueShow')) +} +r.ui.HelpBubble.init = function() { + $('.help-bubble').each(function(idx, el) { + $(el).data('HelpBubble', new r.ui.HelpBubble(el)) + }) +} +r.ui.HelpBubble.prototype = $.extend(new r.ui.Base(), { + showDelay: 150, + hideDelay: 750, + + show: function() { + this.cancelTimeout() + + $('body').append(this.$el) + + var parentPos = this.$parent.offset() + this.$el + .show() + .offset({ + left: parentPos.left + this.$parent.outerWidth(true) - this.$el.outerWidth(true), + top: parentPos.top + this.$parent.outerHeight(true) + 5 + }) + }, + + hide: function(callback) { + this.$el.fadeOut(150, $.proxy(function() { + this.$el.hide() + this.$parent.append(this.$el) + if (callback) { + callback() + } + }, this)) + }, + + cancelTimeout: function() { + if (this.timeout) { + clearTimeout(this.timeout) + this.timeout = null + } + }, + + queueShow: function() { + this.cancelTimeout() + this.timeout = setTimeout($.proxy(this, 'show'), this.showDelay) + }, + + queueHide: function() { + this.cancelTimeout() + this.timeout = setTimeout($.proxy(this, 'hide'), this.hideDelay) + } +}) diff --git a/r2/r2/templates/spotlightlisting.html b/r2/r2/templates/spotlightlisting.html index f51d8bb3e..81dca4440 100644 --- a/r2/r2/templates/spotlightlisting.html +++ b/r2/r2/templates/spotlightlisting.html @@ -46,72 +46,39 @@ - -
+ ${text_with_links( + _("This sponsored link is an advertisement generated with our %(self_serve_advertisement_tool)s."), + self_serve_advertisement_tool=dict(link_text=_("self-serve advertisement tool"), path="http://www.reddit.com/help/selfservicepromotion") + )} +
++ ${text_with_links( + _("Use of this tool is open to all members of reddit.com, and for as little as $20 you can advertise in this area. %(get_started)s"), + get_started=dict(link_text=unsafe(_("Get started ›")), path="/ad_inq") + )} +
++ ${_("This area shows new and upcoming links. Vote on" + + " links here to help them become popular, and click" + + " the forwards and backwards buttons to view more. ")} +
+ %if c.user_is_loggedin: + ${ynbutton(_("here"), _("This element has been disabled."), + "disable_ui", + format = _("Click %(here)s to disable this feature."), + format_arg = "here", + hidden_data = dict(id="organic"))} + %endif +- ${text_with_links( - _("This sponsored link is an advertisement generated with our %(self_serve_advertisement_tool)s."), - self_serve_advertisement_tool=dict(link_text=_("self-serve advertisement tool"), path="http://www.reddit.com/help/selfservicepromotion") - )} -
-- ${text_with_links( - _("Use of this tool is open to all members of reddit.com, and for as little as $20 you can advertise in this area. %(get_started)s"), - get_started=dict(link_text=unsafe(_("Get started ›")), path="/ad_inq") - )} -
- -- ${_("This area shows new and upcoming links. Vote on" + - " links here to help them become popular, and click" + - " the forwards and backwards buttons to view more. ")} -
- %if c.user_is_loggedin: - ${ynbutton(_("here"), _("This element has been disabled."), - "disable_ui", callback = "disappear_help", - format = _("Click %(here)s to disable this feature."), - format_arg = "here", - hidden_data = dict(id="organic"))} - %endif - -