mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
Style bonus page
This commit is contained in:
James Allen
parent
41ef675999
commit
068d88ec0b
5 changed files with 235 additions and 93 deletions
|
|
@ -123,6 +123,8 @@ module.exports = ProjectController =
|
||||||
TagsHandler.getAllTags user_id, cb
|
TagsHandler.getAllTags user_id, cb
|
||||||
projects: (cb)->
|
projects: (cb)->
|
||||||
Project.findAllUsersProjects user_id, 'name lastUpdated publicAccesLevel archived owner_ref', cb
|
Project.findAllUsersProjects user_id, 'name lastUpdated publicAccesLevel archived owner_ref', cb
|
||||||
|
subscription: (cb)->
|
||||||
|
SubscriptionLocator.getUsersSubscription user_id, cb
|
||||||
}, (err, results)->
|
}, (err, results)->
|
||||||
if err?
|
if err?
|
||||||
logger.err err:err, "error getting data for project list page"
|
logger.err err:err, "error getting data for project list page"
|
||||||
|
|
@ -138,6 +140,7 @@ module.exports = ProjectController =
|
||||||
priority_title: true
|
priority_title: true
|
||||||
projects: projects
|
projects: projects
|
||||||
tags: tags
|
tags: tags
|
||||||
|
hasSubscription: !!results.subscription
|
||||||
}
|
}
|
||||||
|
|
||||||
if Settings?.algolia?.institutions?.app_id? and Settings?.algolia?.institutions?.api_key?
|
if Settings?.algolia?.institutions?.app_id? and Settings?.algolia?.institutions?.api_key?
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ block content
|
||||||
a(href, ng-click="filterProjects('shared')") Shared projects
|
a(href, ng-click="filterProjects('shared')") Shared projects
|
||||||
li(ng-class="{active: (filter == 'archived')}")
|
li(ng-class="{active: (filter == 'archived')}")
|
||||||
a(href, ng-click="filterProjects('archived')") Deleted projects
|
a(href, ng-click="filterProjects('archived')") Deleted projects
|
||||||
li
|
li(ng-if="tags.length > 0")
|
||||||
h2 Folders
|
h2 Folders
|
||||||
li(
|
li(
|
||||||
ng-repeat="tag in tags | filter:nonEmpty",
|
ng-repeat="tag in tags | filter:nonEmpty",
|
||||||
|
|
@ -93,9 +93,15 @@ block content
|
||||||
div
|
div
|
||||||
strong Create your first project!
|
strong Create your first project!
|
||||||
|
|
||||||
-if (settings.enableSubscriptions)
|
-if (settings.enableSubscriptions && !hasSubscription)
|
||||||
.row-spaced(ng-if="projects.length > 0", ng-cloak)
|
.row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered
|
||||||
a(href="/user/bonus").btn.btn-info Upgrade Account
|
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)
|
- if (showUserDetailsArea)
|
||||||
.row-spaced#userProfileInformation(ng-if="projects.length > 0 && percentComplete < 100", ng-cloak)
|
.row-spaced#userProfileInformation(ng-if="projects.length > 0 && percentComplete < 100", ng-cloak)
|
||||||
|
|
|
||||||
|
|
@ -1,104 +1,106 @@
|
||||||
extends ../layout
|
extends ../layout
|
||||||
|
|
||||||
block content
|
block content
|
||||||
.container.bonus.box
|
.content.content-alt
|
||||||
.row
|
.container.bonus
|
||||||
.span8.offset2
|
.row
|
||||||
.page-header
|
.col-md-8.col-md-offset-2
|
||||||
h1 Recommend ShareLaTeX. Get free stuff.
|
.card
|
||||||
|
.container-fluid
|
||||||
|
.row
|
||||||
|
.col-md-12
|
||||||
|
.page-header
|
||||||
|
h1 Help us spread the word about ShareLaTeX.
|
||||||
|
|
||||||
|
|
||||||
.row
|
.row
|
||||||
.span6.offset3
|
.col-md-10.col-md-offset-1
|
||||||
h2 Help us spread the word about ShareLaTeX.
|
h2 Share ShareLaTeX with your friends and colleagues and unlock the rewards below
|
||||||
|
|
||||||
.row
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-8.col-md-offset-2.bonus-banner
|
||||||
.bonus-top
|
.bonus-top
|
||||||
|
|
||||||
.row
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-8.col-md-offset-2.bonus-banner
|
||||||
.title
|
.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=is%20trying%20out%20the%20online%20LaTeX%20Editor%20ShareLaTeX&url=#{encodeURIComponent(buildReferalUrl("t"))}&counturl=https://www.sharelatex.com', target="_blank").twitter Tweet
|
||||||
|
|
||||||
.row
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-8.col-md-offset-2.bonus-banner
|
||||||
.title
|
.title
|
||||||
a(href='#', onclick='postToFeed(); return false;').facebook Post on Facebook
|
a(href='#', onclick='postToFeed(); return false;').facebook Post on Facebook
|
||||||
|
|
||||||
.row
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-8.col-md-offset-2.bonus-banner
|
||||||
.title
|
.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+
|
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
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-8.col-md-offset-2.bonus-banner
|
||||||
.title
|
.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
|
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
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-8.col-md-offset-2.bonus-banner
|
||||||
.title
|
.title
|
||||||
a(href='#link-modal', data-toggle="modal").link Link to us from your website
|
a(href='#link-modal', data-toggle="modal").link Link to us from your website
|
||||||
|
|
||||||
.row
|
.row
|
||||||
.span4.offset4.bonus-banner
|
.col-md-10.col-md-offset-1.bonus-banner
|
||||||
h2.direct-link Direct Link
|
h2.direct-link Direct Link
|
||||||
.well #{buildReferalUrl("d")}
|
pre.text-centered #{buildReferalUrl("d")}
|
||||||
|
|
||||||
.row.ab-bonus
|
.row.ab-bonus
|
||||||
.span6.offset3
|
.col-md-10.col-md-offset-1.bonus-banner
|
||||||
p.thanks When someone starts using ShareLaTeX after your recommendation we'll give you some <strong>free stuff</strong> to say thanks! Check your progress below.
|
p.thanks When someone starts using ShareLaTeX after your recommendation we'll give you some <strong>free stuff</strong> to say thanks! Check your progress below.
|
||||||
.row.ab-bonus
|
.row.ab-bonus
|
||||||
.span6.offset3(style="position: relative; height: 30px; margin-top: 20px;")
|
.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 30px; margin-top: 20px;")
|
||||||
- for (var i = 0; i <= 10; i++) {
|
- for (var i = 0; i <= 10; i++) {
|
||||||
- if (refered_user_count == i)
|
- if (refered_user_count == i)
|
||||||
.number(style="left: #{i}0%").active #{i}
|
.number(style="left: #{i}0%").active #{i}
|
||||||
- else
|
- else
|
||||||
.number(style="left: #{i}0%") #{i}
|
.number(style="left: #{i}0%") #{i}
|
||||||
- }
|
- }
|
||||||
|
|
||||||
.row.ab-bonus
|
.row.ab-bonus
|
||||||
.span6.offset3
|
.col-md-10.col-md-offset-1.bonus-banner
|
||||||
.progress(style="height: 25px")
|
.progress
|
||||||
- if (refered_user_count == 0)
|
- if (refered_user_count == 0)
|
||||||
div(style="text-align: center; padding: 4px;") Spread the word and fill this bar up
|
div(style="text-align: center; padding: 4px;") Spread the word and fill this bar up
|
||||||
.bar(style="width: #{refered_user_count}0%")
|
.progress-bar.progress-bar-info(style="width: #{refered_user_count}0%")
|
||||||
|
|
||||||
.row.ab-bonus
|
.row.ab-bonus
|
||||||
.span6.offset3(style="position: relative; height: 70px;")
|
.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: 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: 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: 60%;", class = refered_user_count >= 6 ? "active" : "") Free Dropbox and History
|
||||||
.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") Free Professional account
|
.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") Free Professional account
|
||||||
|
|
||||||
.row.ab-bonus
|
.row.ab-bonus
|
||||||
.span6.offset3
|
.col-md-10.col-md-offset-1.bonus-banner
|
||||||
- if (refered_user_count == 0)
|
- if (refered_user_count == 0)
|
||||||
p.thanks You've not introduced anyone to ShareLaTeX yet. Get sharing!
|
p.thanks You've not introduced anyone to ShareLaTeX yet. Get sharing!
|
||||||
- else if (refered_user_count == 1)
|
- else if (refered_user_count == 1)
|
||||||
p.thanks You've introduced <strong>#{refered_user_count}</strong> person to ShareLaTeX. Good job, but can you get some more?
|
p.thanks You've introduced <strong>#{refered_user_count}</strong> person to ShareLaTeX. Good job, but can you get some more?
|
||||||
- else
|
- else
|
||||||
p.thanks You've introduced <strong>#{refered_user_count}</strong> people to ShareLaTeX. Good job!
|
p.thanks You've introduced <strong>#{refered_user_count}</strong> people to ShareLaTeX. Good job!
|
||||||
|
|
||||||
#link-modal.modal.hide
|
#link-modal.modal.hide
|
||||||
.modal-header
|
.modal-header
|
||||||
h3 Link to ShareLaTeX
|
h3 Link to ShareLaTeX
|
||||||
.modal-body
|
.modal-body
|
||||||
p You can link to ShareLaTeX with the following HTML:
|
p You can link to ShareLaTeX with the following HTML:
|
||||||
p
|
p
|
||||||
textarea(readonly=true)
|
textarea(readonly=true)
|
||||||
<a href="#{buildReferalUrl("d")}">Online LaTeX Editor ShareLaTeX</a>
|
<a href="#{buildReferalUrl("d")}">Online LaTeX Editor ShareLaTeX</a>
|
||||||
p Thanks!
|
p Thanks!
|
||||||
.modal-footer
|
.modal-footer
|
||||||
button.btn(data-dismiss="modal") Close
|
button.btn(data-dismiss="modal") Close
|
||||||
|
|
||||||
include ../general/social-footer
|
|
||||||
include ../general/small-footer
|
|
||||||
|
|
||||||
script(type='text/javascript', src='//platform.twitter.com/widgets.js')
|
script(type='text/javascript', src='//platform.twitter.com/widgets.js')
|
||||||
script(src='https://connect.facebook.net/en_US/all.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});
|
FB.init({appId: "148710621956179", status: true, cookie: true});
|
||||||
|
|
||||||
function postToFeed() {
|
function postToFeed() {
|
||||||
|
|
@ -121,7 +123,7 @@ block content
|
||||||
FB.ui(obj, callback);
|
FB.ui(obj, callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
script(type="text/javascript")
|
script(type="text/javascript").
|
||||||
$(function() {
|
$(function() {
|
||||||
$(".twitter").click(function() {
|
$(".twitter").click(function() {
|
||||||
ga('send', 'event', 'referal-button', 'clicked', "twitter")
|
ga('send', 'event', 'referal-button', 'clicked', "twitter")
|
||||||
|
|
|
||||||
130
services/web/public/stylesheets/app/bonus.less
Normal file
130
services/web/public/stylesheets/app/bonus.less
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -34,10 +34,10 @@
|
||||||
//@import "components/thumbnails.less";
|
//@import "components/thumbnails.less";
|
||||||
@import "components/alerts.less";
|
@import "components/alerts.less";
|
||||||
@import "components/progress-bars.less";
|
@import "components/progress-bars.less";
|
||||||
@import "components/media.less";
|
// @import "components/media.less";
|
||||||
@import "components/list-group.less";
|
// @import "components/list-group.less";
|
||||||
@import "components/panels.less";
|
// @import "components/panels.less";
|
||||||
@import "components/wells.less";
|
// @import "components/wells.less";
|
||||||
@import "components/close.less";
|
@import "components/close.less";
|
||||||
@import "components/fineupload.less";
|
@import "components/fineupload.less";
|
||||||
|
|
||||||
|
|
@ -60,3 +60,4 @@
|
||||||
@import "app/homepage.less";
|
@import "app/homepage.less";
|
||||||
@import "app/plans.less";
|
@import "app/plans.less";
|
||||||
@import "app/recurly.less";
|
@import "app/recurly.less";
|
||||||
|
@import "app/bonus.less";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue