From c18ca779bae0ca4c43095c736f6912861800f912 Mon Sep 17 00:00:00 2001 From: Simon Detheridge Date: Tue, 30 Oct 2018 10:01:59 +0000 Subject: [PATCH] Merge pull request #1073 from sharelatex/spd-bonus-page-ui Add links and update UI for Bonus page GitOrigin-RevId: e993d4b7dc59f5ea145892e9cddb87f2193ae013 --- .../web/app/views/project/list/side-bar.pug | 7 ++- services/web/app/views/referal/bonus.pug | 42 +++++++++------- .../web/public/stylesheets/app/bonus.less | 49 +++++++++---------- 3 files changed, 50 insertions(+), 48 deletions(-) diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index 067f870294..01b71b91a5 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -129,10 +129,9 @@ p.small #{translate("on_free_sl")} p a(href="/user/subscription/plans").btn.btn-primary #{translate("upgrade")} - if (!settings.overleaf) - p.small.text-centered - | #{translate("or_unlock_features_bonus")} - a(href="/user/bonus") #{translate("sharing_sl")} . + p.small.text-centered + | #{translate("or_unlock_features_bonus")} + a(href="/user/bonus") #{translate("sharing_sl")} . script. diff --git a/services/web/app/views/referal/bonus.pug b/services/web/app/views/referal/bonus.pug index f3a65c6bc4..075f93b670 100644 --- a/services/web/app/views/referal/bonus.pug +++ b/services/web/app/views/referal/bonus.pug @@ -24,27 +24,34 @@ block content .row .col-md-8.col-md-offset-2.bonus-banner .title - a(href='https://twitter.com/share?text=is%20trying%20out%20the%20online%20LaTeX%20Editor%20ShareLaTeX&url='+encodeURIComponent(buildReferalUrl("t"))+'&counturl=https://www.sharelatex.com', target="_blank").twitter Tweet + a(href='https://twitter.com/share?text='+encodeURIComponent(translate("bonus_twitter_share_text"))+'&url='+encodeURIComponent(buildReferalUrl("t"))+'&counturl='+settings.social.twitter.counturl, target="_blank").twitter + i.fa.fa-fw.fa-2x.fa-twitter(aria-hidden) + | + | Tweet .row .col-md-8.col-md-offset-2.bonus-banner .title - a(href='#', onclick='postToFeed(); return false;').facebook #{translate("post_on_facebook")} + a(href='#', onclick='postToFeed(); return false;').facebook + i.fa.fa-fw.fa-2x.fa-facebook-square(aria-hidden) + | + | #{translate("post_on_facebook")} .row .col-md-8.col-md-offset-2.bonus-banner .title - a(href="https://plus.google.com/share?url="+encodeURIComponent(buildReferalUrl('gp')), onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;").google-plus #{translate("share_us_on_googleplus")} - - .row - .col-md-8.col-md-offset-2.bonus-banner - .title - a(href='mailto:?subject=Online LaTeX editor you may like &body=Hey, I have been using the online LaTeX editor ShareLaTeX recently and thought you might like to check it out. '+encodeURIComponent(buildReferalUrl("e")), title='Share by Email').email #{translate("email_us_to_your_friends")} + a(href='mailto:?subject='+encodeURIComponent(translate("bonus_email_share_header"))+'&body='+encodeURIComponent(translate("bonus_email_share_body")+' ')+encodeURIComponent(buildReferalUrl("e")), title='Share by Email').email + i.fa.fa-fw.fa-2x.fa-envelope-open-o(aria-hidden) + | + | #{translate("email_us_to_your_friends")} .row .col-md-8.col-md-offset-2.bonus-banner .title - a(href='#link-modal', data-toggle="modal", ng-click="openLinkToUsModal()").link #{translate("link_to_us")} + a(href='#link-modal', data-toggle="modal", ng-click="openLinkToUsModal()").link + i.fa.fa-fw.fa-2x.fa-globe(aria-hidden) + | + | #{translate("link_to_us")} .row .col-md-10.col-md-offset-1.bonus-banner @@ -100,7 +107,7 @@ block content p #{translate("can_link_to_sl_with_html")} p textarea.col-md-12(readonly=true) - Online LaTeX Editor ShareLaTeX + #{translate("bonus_share_link_text")} p #{translate("thanks")}! @@ -125,19 +132,19 @@ block content script(type='text/javascript', src='//platform.twitter.com/widgets.js') script(src='https://connect.facebook.net/en_US/all.js') script(type='text/javascript'). - FB.init({appId: "148710621956179", status: true, cookie: true}); + FB.init({appId: '#{settings.social.facebook.appId}', status: true, cookie: true}); function postToFeed() { // calling the API ... var obj = { method: 'feed', - redirect_uri: 'https://www.sharelatex.com', + redirect_uri: '#{settings.social.facebook.redirectUri}', link: '!{buildReferalUrl("fb")}', - picture: 'https://www.sharelatex.com/brand/logo/logosmall.png', - name: 'ShareLaTeX - Online LaTeX Editor', - caption: 'Free Unlimited Projects and Compiles', - description: 'ShareLaTeX is a free online LaTeX Editor. Real time collaboration like Google Docs, with Dropbox, history and auto-complete' + picture: '#{settings.social.facebook.picture}', + name: '#{translate("bonus_facebook_name").replace(/'/g, "\\x27")}', + caption: '#{translate("bonus_facebook_caption").replace(/'/g, "\\x27")}', + description: '#{translate("bonus_facebook_description").replace(/'/g, "\\x27")}' }; function callback(response) { @@ -159,9 +166,6 @@ block content $(".facebook").click(function() { ga('send', 'event', 'referal-button', 'clicked', "facebook") }); - $(".google-plus").click(function() { - ga('send', 'event', 'referal-button', 'clicked', "google-plus") - }); $(".link").click(function() { ga('send', 'event', 'referal-button', 'clicked', "direct-link") }); diff --git a/services/web/public/stylesheets/app/bonus.less b/services/web/public/stylesheets/app/bonus.less index d20461fcee..f25afc8bb3 100644 --- a/services/web/public/stylesheets/app/bonus.less +++ b/services/web/public/stylesheets/app/bonus.less @@ -1,3 +1,8 @@ +@twitter-color : #1DA1F2; +@facebook-color : #3B5998; +@email-color : #808B9A; +@link-to-us-color : #406EB3; + .bonus { margin-top: 15px; .page-header h1 { @@ -21,41 +26,35 @@ } .title { a { - display: block; + display: flex; + align-items: center; font-size: 18px; - padding: 20px 62px; + padding: 20px; background-color: white; border-bottom: 1px solid lighten(@blue, 40%); color: @blue; - &:hover { - background-color: lighten(@blue, 45%); + > i { + margin-right: 10px; } + &:hover, + &:focus { + background-color: lighten(@blue, 45%); + text-decoration: none; + } + } } - a.twitter { - background-image: url(/img/social/twitter-32.png); - background-repeat: no-repeat; - background-position: 16px center; + a.twitter > i { + color: @twitter-color; } - a.facebook { - background-image: url(/img/social/facebook-32.png); - background-repeat: no-repeat; - background-position: 16px center; + a.facebook > i { + color: @facebook-color; } - a.email { - background-image: url(/img/social/mail-32.png); - background-repeat: no-repeat; - background-position: 16px center; + a.email > i { + color: @email-color; } - a.google-plus { - background-image: url(//www.gstatic.com/images/icons/gplus-32.png); - background-repeat: no-repeat; - background-position: 16px center; - } - a.link { - background-image: url(/img/social/link-32.png); - background-repeat: no-repeat; - background-position: 16px center; + a.link > i { + color: @link-to-us-color; } h2.direct-link { }