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";