mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-29 20:11:32 +02:00
Migrate onboarding/bonus/beta program templates to Bootstrap 5 (#26344)
* Migrate the Try Premium for free page to Bootstrap 5 * Migrate the Overleaf Beta Program page to Bootstrap 5 * Fix buttons alignment on smaller screen size * Migrate the Overleaf Bonus Program page to Bootstrap 5 GitOrigin-RevId: 811db783af6a86ab472aae95e075bfa301786a31
This commit is contained in:
Rebeka Dekany
@@ -1,4 +1,4 @@
|
||||
mixin back-to-btns(settingsAnchor)
|
||||
.d-flex.gap-3
|
||||
.d-flex.flex-column.flex-sm-row.gap-3
|
||||
a.btn.btn-secondary(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')}
|
||||
a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')}
|
||||
|
||||
@@ -1,75 +1,76 @@
|
||||
extends ../layout-marketing
|
||||
include ../_mixins/back_to_btns
|
||||
|
||||
block vars
|
||||
- bootstrap5PageStatus = 'disabled'
|
||||
|
||||
block content
|
||||
main.content.content-alt#main-content
|
||||
.container.beta-opt-in-wrapper
|
||||
.row
|
||||
.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
|
||||
.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
|
||||
.card
|
||||
.page-header
|
||||
h1
|
||||
| #{translate("sharelatex_beta_program")}
|
||||
.beta-opt-in
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-12
|
||||
if user.betaProgram
|
||||
p.text-center
|
||||
strong #{translate("beta_program_already_participating")}.
|
||||
p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}.
|
||||
else
|
||||
p.text-center
|
||||
strong #{translate("beta_program_not_participating")}.
|
||||
p !{translate("beta_program_benefits", {}, ['strong'])}
|
||||
.card-body
|
||||
.page-header
|
||||
h1
|
||||
| #{translate("sharelatex_beta_program")}
|
||||
.beta-opt-in
|
||||
.container-fluid
|
||||
.row
|
||||
.col-lg-12
|
||||
if user.betaProgram
|
||||
p.text-center
|
||||
strong #{translate("beta_program_already_participating")}.
|
||||
p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}.
|
||||
else
|
||||
p.text-center
|
||||
strong #{translate("beta_program_not_participating")}.
|
||||
p !{translate("beta_program_benefits", {}, ['strong'])}
|
||||
|
||||
p #[strong How it works:]
|
||||
ul
|
||||
li #{translate("beta_program_badge_description")} #[span(aria-label=translate("beta_feature_badge") role="img").beta-badge]
|
||||
li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}.
|
||||
li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}.
|
||||
li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}.
|
||||
p !{translate("note_features_under_development", {}, ['strong'])}.
|
||||
p #[strong How it works:]
|
||||
ul
|
||||
li
|
||||
| #{translate("beta_program_badge_description")}
|
||||
span.badge.bg-warning-light-bg.text-warning(aria-label=translate("beta_feature_badge"))
|
||||
span.badge-content β
|
||||
li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}.
|
||||
li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}.
|
||||
li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}.
|
||||
p !{translate("note_features_under_development", {}, ['strong'])}.
|
||||
|
||||
.row.text-center
|
||||
.col-md-12
|
||||
if user.betaProgram
|
||||
form(
|
||||
data-ol-regular-form
|
||||
method="post"
|
||||
action="/beta/opt-out"
|
||||
novalidate
|
||||
)
|
||||
input(type="hidden", name="_csrf", value=csrfToken)
|
||||
.form-group
|
||||
a(
|
||||
href="https://forms.gle/CFEsmvZQTAwHCd3X9"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
).btn.btn-primary.btn-lg #{translate("give_feedback")}
|
||||
.form-group
|
||||
button.btn.btn-secondary-info.btn-secondary.btn-sm(
|
||||
type="submit"
|
||||
data-ol-disabled-inflight
|
||||
)
|
||||
span(data-ol-inflight="idle") #{translate("beta_program_opt_out_action")}
|
||||
span(hidden data-ol-inflight="pending") #{translate("processing")}…
|
||||
else
|
||||
form(
|
||||
data-ol-regular-form
|
||||
method="post",
|
||||
action="/beta/opt-in"
|
||||
)
|
||||
input(type="hidden", name="_csrf", value=csrfToken)
|
||||
.form-group
|
||||
button.btn.btn-primary(
|
||||
type="submit"
|
||||
data-ol-disabled-inflight
|
||||
)
|
||||
span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")}
|
||||
span(hidden data-ol-inflight="pending") #{translate("joining")}…
|
||||
.page-separator
|
||||
+back-to-btns()
|
||||
.row.text-center
|
||||
.col-lg-12
|
||||
if user.betaProgram
|
||||
form(
|
||||
data-ol-regular-form
|
||||
method="post"
|
||||
action="/beta/opt-out"
|
||||
novalidate
|
||||
)
|
||||
input(type="hidden", name="_csrf", value=csrfToken)
|
||||
.form-group
|
||||
a(
|
||||
href="https://forms.gle/CFEsmvZQTAwHCd3X9"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
).btn.btn-primary.btn-lg #{translate("give_feedback")}
|
||||
.form-group
|
||||
button.btn.btn-secondary-info.btn-secondary.btn-sm(
|
||||
type="submit"
|
||||
data-ol-disabled-inflight
|
||||
)
|
||||
span(data-ol-inflight="idle") #{translate("beta_program_opt_out_action")}
|
||||
span(hidden data-ol-inflight="pending") #{translate("processing")}…
|
||||
else
|
||||
form(
|
||||
data-ol-regular-form
|
||||
method="post",
|
||||
action="/beta/opt-in"
|
||||
)
|
||||
input(type="hidden", name="_csrf", value=csrfToken)
|
||||
.form-group
|
||||
button.btn.btn-primary(
|
||||
type="submit"
|
||||
data-ol-disabled-inflight
|
||||
)
|
||||
span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")}
|
||||
span(hidden data-ol-inflight="pending") #{translate("joining")}…
|
||||
.page-separator
|
||||
+back-to-btns()
|
||||
|
||||
@@ -1,49 +1,47 @@
|
||||
extends ../layout-marketing
|
||||
|
||||
block vars
|
||||
- bootstrap5PageStatus = 'disabled'
|
||||
|
||||
block content
|
||||
.content.content-alt#main-content
|
||||
.container.bonus
|
||||
.container#bonus
|
||||
.row
|
||||
.col-md-8.col-md-offset-2
|
||||
.col-lg-8.offset-lg-2
|
||||
.card
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-10.col-md-offset-1
|
||||
if (refered_user_count > 0)
|
||||
p.thanks The Overleaf Bonus Program has been discontinued, but you'll continue to have access to the features you already earned.
|
||||
else
|
||||
p.thanks The Overleaf Bonus Program has been discontinued.
|
||||
p.thanks Please <a href="/contact">contact us</a> if you have any questions.
|
||||
|
||||
if (refered_user_count > 0)
|
||||
.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
|
||||
.col-md-10.col-md-offset-1.bonus-banner
|
||||
.progress
|
||||
.progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%")
|
||||
|
||||
.row.ab-bonus
|
||||
.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 110px;")
|
||||
.perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")}
|
||||
.perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")}
|
||||
.perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")}
|
||||
.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")}
|
||||
.row
|
||||
|
||||
.row.ab-bonus
|
||||
.col-md-10.col-md-offset-1.bonus-banner.bonus-status
|
||||
if (refered_user_count == 1)
|
||||
p.thanks You’ve introduced <strong>1</strong> person to #{settings.appName}.
|
||||
.card-body
|
||||
.container-fluid
|
||||
.row
|
||||
.col-lg-10.offset-lg-1
|
||||
if (refered_user_count > 0)
|
||||
p.thanks The Overleaf Bonus Program has been discontinued, but you'll continue to have access to the features you already earned.
|
||||
else
|
||||
p.thanks You’ve introduced <strong>#{refered_user_count}</strong> people to #{settings.appName}.
|
||||
p.thanks The Overleaf Bonus Program has been discontinued.
|
||||
p.thanks Please <a href="/contact">contact us</a> if you have any questions.
|
||||
|
||||
if (refered_user_count > 0)
|
||||
.row.ab-bonus
|
||||
.col-lg-10.offset-lg-1(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-lg-10.offset-lg-1
|
||||
.progress
|
||||
.progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%")
|
||||
|
||||
.row.ab-bonus
|
||||
.col-lg-10.offset-lg-1(style="position: relative; height: 110px;")
|
||||
.perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")}
|
||||
.perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")}
|
||||
.perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")}
|
||||
.perk(style="left: 90%;", class = refered_user_count >= 9 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("unlimited_collabs")}
|
||||
.row
|
||||
|
||||
.row.ab-bonus
|
||||
.col-lg-10.offset-lg-1.bonus-status
|
||||
if (refered_user_count == 1)
|
||||
p.thanks You’ve introduced <strong>1</strong> person to #{settings.appName}.
|
||||
else
|
||||
p.thanks You’ve introduced <strong>#{refered_user_count}</strong> people to #{settings.appName}.
|
||||
|
||||
@@ -53,3 +53,5 @@
|
||||
@import 'admin/admin';
|
||||
@import 'admin/project-url-lookup';
|
||||
@import 'add-secondary-email-prompt';
|
||||
@import 'try-premium';
|
||||
@import 'bonus';
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
#bonus {
|
||||
margin-top: var(--spacing-06);
|
||||
|
||||
p.thanks {
|
||||
margin-top: var(--spacing-04);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number {
|
||||
position: absolute;
|
||||
margin-left: -13px;
|
||||
width: 26px;
|
||||
padding: var(--spacing-01) 0;
|
||||
text-align: center;
|
||||
background-color: #ddd;
|
||||
|
||||
&.active {
|
||||
background-color: var(--bg-info-01);
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: var(--spacing-05);
|
||||
margin-left: calc(var(--spacing-06) * -1);
|
||||
margin-right: calc(var(--spacing-06) * -1);
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.perk {
|
||||
position: absolute;
|
||||
background-color: var(--bg-light-tertiary);
|
||||
border-radius: var(--border-radius-base);
|
||||
text-align: center;
|
||||
padding: var(--spacing-02);
|
||||
min-width: min-content;
|
||||
width: 110px;
|
||||
margin-left: calc(var(--spacing-11) * -1);
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
border-bottom: var(--spacing-04) solid var(--bg-light-tertiary);
|
||||
border-left: var(--spacing-04) solid transparent;
|
||||
border-right: var(--spacing-04) solid transparent;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: var(--spacing-10);
|
||||
top: calc(var(--spacing-04) * -1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: var(--bg-info-01);
|
||||
|
||||
&::before {
|
||||
border-bottom: var(--spacing-04) solid var(--border-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.try-premium-page {
|
||||
.try-premium-logo-container {
|
||||
padding: 0 var(--spacing-08);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.try-premium-third-party-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.try-premium-page-list-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: var(--spacing-06);
|
||||
}
|
||||
|
||||
.try-premium-page-list {
|
||||
padding-inline-start: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
width: 300px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user