From 068d88ec0b6fad486642ecc5f9efb8315877651a Mon Sep 17 00:00:00 2001 From: James Allen Date: Mon, 7 Jul 2014 15:54:40 +0100 Subject: [PATCH] Style bonus page --- .../Features/Project/ProjectController.coffee | 3 + services/web/app/views/project/list.jade | 14 +- services/web/app/views/referal/bonus.jade | 172 +++++++++--------- .../web/public/stylesheets/app/bonus.less | 130 +++++++++++++ services/web/public/stylesheets/style.less | 9 +- 5 files changed, 235 insertions(+), 93 deletions(-) create mode 100644 services/web/public/stylesheets/app/bonus.less diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee index 5c3393bdbb..f077c87145 100644 --- a/services/web/app/coffee/Features/Project/ProjectController.coffee +++ b/services/web/app/coffee/Features/Project/ProjectController.coffee @@ -123,6 +123,8 @@ module.exports = ProjectController = TagsHandler.getAllTags user_id, cb projects: (cb)-> Project.findAllUsersProjects user_id, 'name lastUpdated publicAccesLevel archived owner_ref', cb + subscription: (cb)-> + SubscriptionLocator.getUsersSubscription user_id, cb }, (err, results)-> if err? logger.err err:err, "error getting data for project list page" @@ -138,6 +140,7 @@ module.exports = ProjectController = priority_title: true projects: projects tags: tags + hasSubscription: !!results.subscription } if Settings?.algolia?.institutions?.app_id? and Settings?.algolia?.institutions?.api_key? diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade index d0bf122eed..cc9b88585d 100644 --- a/services/web/app/views/project/list.jade +++ b/services/web/app/views/project/list.jade @@ -68,7 +68,7 @@ block content a(href, ng-click="filterProjects('shared')") Shared projects li(ng-class="{active: (filter == 'archived')}") a(href, ng-click="filterProjects('archived')") Deleted projects - li + li(ng-if="tags.length > 0") h2 Folders li( ng-repeat="tag in tags | filter:nonEmpty", @@ -93,9 +93,15 @@ block content div strong Create your first project! - -if (settings.enableSubscriptions) - .row-spaced(ng-if="projects.length > 0", ng-cloak) - a(href="/user/bonus").btn.btn-info Upgrade Account + -if (settings.enableSubscriptions && !hasSubscription) + .row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered + hr + p.small You are using the free version of ShareLaTeX. + p + a(href="/user/subscription/plans").btn.btn-info Upgrade + p.small + | or unlock some free bonus features by + a(href="/user/bonus") sharing ShareLaTeX. - if (showUserDetailsArea) .row-spaced#userProfileInformation(ng-if="projects.length > 0 && percentComplete < 100", ng-cloak) diff --git a/services/web/app/views/referal/bonus.jade b/services/web/app/views/referal/bonus.jade index 9d4e742800..7a1ec48257 100644 --- a/services/web/app/views/referal/bonus.jade +++ b/services/web/app/views/referal/bonus.jade @@ -1,104 +1,106 @@ extends ../layout block content - .container.bonus.box - .row - .span8.offset2 - .page-header - h1 Recommend ShareLaTeX. Get free stuff. + .content.content-alt + .container.bonus + .row + .col-md-8.col-md-offset-2 + .card + .container-fluid + .row + .col-md-12 + .page-header + h1 Help us spread the word about ShareLaTeX. - .row - .span6.offset3 - h2 Help us spread the word about ShareLaTeX. + .row + .col-md-10.col-md-offset-1 + h2 Share ShareLaTeX with your friends and colleagues and unlock the rewards below - .row - .span4.offset4.bonus-banner - .bonus-top + .row + .col-md-8.col-md-offset-2.bonus-banner + .bonus-top - .row - .span4.offset4.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 - - .row - .span4.offset4.bonus-banner - .title - a(href='#', onclick='postToFeed(); return false;').facebook Post on Facebook + .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 + + .row + .col-md-8.col-md-offset-2.bonus-banner + .title + a(href='#', onclick='postToFeed(); return false;').facebook Post on Facebook - .row - .span4.offset4.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 Share us on Google+ - - .row - .span4.offset4.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 Email us to your friends + .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 Share us on Google+ + + .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 Email us to your friends - .row - .span4.offset4.bonus-banner - .title - a(href='#link-modal', data-toggle="modal").link Link to us from your website + .row + .col-md-8.col-md-offset-2.bonus-banner + .title + a(href='#link-modal', data-toggle="modal").link Link to us from your website - .row - .span4.offset4.bonus-banner - h2.direct-link Direct Link - .well #{buildReferalUrl("d")} + .row + .col-md-10.col-md-offset-1.bonus-banner + h2.direct-link Direct Link + pre.text-centered #{buildReferalUrl("d")} - .row.ab-bonus - .span6.offset3 - p.thanks When someone starts using ShareLaTeX after your recommendation we'll give you some free stuff to say thanks! Check your progress below. - .row.ab-bonus - .span6.offset3(style="position: relative; height: 30px; margin-top: 20px;") - - for (var i = 0; i <= 10; i++) { - - if (refered_user_count == i) - .number(style="left: #{i}0%").active #{i} - - else - .number(style="left: #{i}0%") #{i} - - } + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner + p.thanks When someone starts using ShareLaTeX after your recommendation we'll give you some free stuff to say thanks! Check your progress below. + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 30px; margin-top: 20px;") + - for (var i = 0; i <= 10; i++) { + - if (refered_user_count == i) + .number(style="left: #{i}0%").active #{i} + - else + .number(style="left: #{i}0%") #{i} + - } - .row.ab-bonus - .span6.offset3 - .progress(style="height: 25px") - - if (refered_user_count == 0) - div(style="text-align: center; padding: 4px;") Spread the word and fill this bar up - .bar(style="width: #{refered_user_count}0%") + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner + .progress + - if (refered_user_count == 0) + div(style="text-align: center; padding: 4px;") Spread the word and fill this bar up + .progress-bar.progress-bar-info(style="width: #{refered_user_count}0%") - .row.ab-bonus - .span6.offset3(style="position: relative; height: 70px;") - .perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") One free collaborator - .perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") Three free collaborators - .perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") Free Dropbox and History - .perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") Free Professional account + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 70px;") + .perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") One free collaborator + .perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") Three free collaborators + .perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") Free Dropbox and History + .perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") Free Professional account - .row.ab-bonus - .span6.offset3 - - if (refered_user_count == 0) - p.thanks You've not introduced anyone to ShareLaTeX yet. Get sharing! - - else if (refered_user_count == 1) - p.thanks You've introduced #{refered_user_count} person to ShareLaTeX. Good job, but can you get some more? - - else - p.thanks You've introduced #{refered_user_count} people to ShareLaTeX. Good job! - - #link-modal.modal.hide - .modal-header - h3 Link to ShareLaTeX - .modal-body - p You can link to ShareLaTeX with the following HTML: - p - textarea(readonly=true) - Online LaTeX Editor ShareLaTeX - p Thanks! - .modal-footer - button.btn(data-dismiss="modal") Close - - include ../general/social-footer - include ../general/small-footer + .row.ab-bonus + .col-md-10.col-md-offset-1.bonus-banner + - if (refered_user_count == 0) + p.thanks You've not introduced anyone to ShareLaTeX yet. Get sharing! + - else if (refered_user_count == 1) + p.thanks You've introduced #{refered_user_count} person to ShareLaTeX. Good job, but can you get some more? + - else + p.thanks You've introduced #{refered_user_count} people to ShareLaTeX. Good job! + + #link-modal.modal.hide + .modal-header + h3 Link to ShareLaTeX + .modal-body + p You can link to ShareLaTeX with the following HTML: + p + textarea(readonly=true) + Online LaTeX Editor ShareLaTeX + p Thanks! + .modal-footer + button.btn(data-dismiss="modal") Close script(type='text/javascript', src='//platform.twitter.com/widgets.js') script(src='https://connect.facebook.net/en_US/all.js') - script(type='text/javascript') + script(type='text/javascript'). FB.init({appId: "148710621956179", status: true, cookie: true}); function postToFeed() { @@ -121,7 +123,7 @@ block content FB.ui(obj, callback); } - script(type="text/javascript") + script(type="text/javascript"). $(function() { $(".twitter").click(function() { ga('send', 'event', 'referal-button', 'clicked', "twitter") diff --git a/services/web/public/stylesheets/app/bonus.less b/services/web/public/stylesheets/app/bonus.less new file mode 100644 index 0000000000..9c5f39acc1 --- /dev/null +++ b/services/web/public/stylesheets/app/bonus.less @@ -0,0 +1,130 @@ +.bonus { + margin-top: 15px; + .page-header h1 { + text-align: center; + } + + h2 { + text-align: center; + font-size: 20px; + line-height: 28px; + margin-bottom: @line-height-computed; + margin-top: 0; + &.direct-link { + margin-top: @line-height-computed; + } + } + + .bonus-banner { + .bonus-top { + border-bottom: 1px solid lighten(@blue, 40%); + } + .title { + a { + display: block; + font-size: 18px; + padding: 20px 62px; + background-color: white; + border-bottom: 1px solid lighten(@blue, 40%); + color: @blue; + &:hover { + background-color: lighten(@blue, 45%); + } + } + } + a.twitter { + background-image: url(/img/social/twitter-32.png); + background-repeat: no-repeat; + background-position: 16px center; + } + a.facebook { + background-image: url(/img/social/facebook-32.png); + background-repeat: no-repeat; + background-position: 16px center; + } + a.email { + background-image: url(/img/social/mail-32.png); + background-repeat: no-repeat; + background-position: 16px center; + } + 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; + } + h2.direct-link { + } + } + + p.thanks { + font-size: 18px; + line-height: 28px; + margin-top: 10px; + text-align: center; + } + + .number { + position: absolute; + margin-left: -13px; + width: 26px; + padding: 3px 0; + text-align: center; + background-color: #ddd; + &.active { + background-color: @blue; + color: white; + } + border-radius: 3px; + } + + .progress { + margin-top: @line-height-computed / 2; + margin-left: -15px; + margin-right: -15px; + height: 30px; + } + + .perk { + position: absolute; + background-color: #ddd; + border-radius: 5px; + text-align: center; + padding: 5px 5px; + width: 100px; + margin-left: -50px; + font-size: 14px; + &:before { + border-bottom: 8px solid #ddd; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + content: ''; + position: absolute; + left: 42px; + top: -8px; + } + &.active { + color: white; + background-color: @blue; + &:before { + border-bottom: 8px solid @blue; + } + } + } + +} + +#link-modal { + .modal-body{ + text-align: center; + } + textarea { + width: 95%; + margin-bottom: 0; + } +} + diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less index 626ac3e2fa..0da8677a6e 100755 --- a/services/web/public/stylesheets/style.less +++ b/services/web/public/stylesheets/style.less @@ -34,10 +34,10 @@ //@import "components/thumbnails.less"; @import "components/alerts.less"; @import "components/progress-bars.less"; -@import "components/media.less"; -@import "components/list-group.less"; -@import "components/panels.less"; -@import "components/wells.less"; +// @import "components/media.less"; +// @import "components/list-group.less"; +// @import "components/panels.less"; +// @import "components/wells.less"; @import "components/close.less"; @import "components/fineupload.less"; @@ -60,3 +60,4 @@ @import "app/homepage.less"; @import "app/plans.less"; @import "app/recurly.less"; +@import "app/bonus.less";