mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-09 01:32:39 +00:00
Merge pull request #19758 from overleaf/jel-modal-light-touch
[web] Update group modal on plans page light touch redesign GitOrigin-RevId: 26cce2996bed263c46d06b1b1fced8206fc9d8c1
This commit is contained in:
Jessica Lawshe
Copybot
parent
214f093eb7
commit
47ad169781
6 changed files with 261 additions and 91 deletions
|
|
@ -51,6 +51,6 @@ block content
|
|||
|
||||
include ./plans/_faq_new
|
||||
|
||||
include ./plans/_group_plan_modal
|
||||
include ./plans/light-redesign/_group_plan_modal
|
||||
|
||||
!= moduleIncludes("contactModalGeneral-marketing", locals)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
div.modal.fade.group-customize-subscription-modal.website-redesign-modal(tabindex="-1" role="dialog" data-ol-group-plan-modal)
|
||||
.modal-dialog(role="document")
|
||||
.modal-content
|
||||
.modal-header
|
||||
button.close(
|
||||
type="button"
|
||||
data-dismiss="modal"
|
||||
aria-label=translate("close")
|
||||
)
|
||||
i.material-symbols(aria-hidden="true") close
|
||||
h1.modal-title #{translate("customize_your_group_subscription")}
|
||||
h2.modal-subtitle #{translate("save_30_percent_or_more_uppercase")}
|
||||
.modal-body
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-6.text-center
|
||||
.circle.circle-lg
|
||||
.group-price
|
||||
span(data-ol-group-plan-display-price) ...
|
||||
span /#{translate('year')}
|
||||
.group-price-per-user(data-ol-group-plan-price-per-user=translate('per_user')) ...
|
||||
.group-modal-features
|
||||
| #{translate('each_user_will_have_access_to')}:
|
||||
ul.list-unstyled
|
||||
li(
|
||||
hidden=(groupPlanModalDefaults.plan_code !== 'collaborator')
|
||||
data-ol-group-plan-plan-code='collaborator'
|
||||
)
|
||||
strong #{translate("collabs_per_proj", {collabcount:10})}
|
||||
li(
|
||||
hidden=(groupPlanModalDefaults.plan_code !== 'professional')
|
||||
data-ol-group-plan-plan-code='professional'
|
||||
)
|
||||
strong #{translate("unlimited_collabs")}
|
||||
li.list-item-pro-features-header #{translate('all_premium_features')}
|
||||
li #{translate('sync_dropbox_github')}
|
||||
li #{translate('full_doc_history')}
|
||||
li #{translate('track_changes')}
|
||||
li + #{translate('more_lowercase')}
|
||||
.col-md-6
|
||||
form.form(data-ol-group-plan-form)
|
||||
.form-group
|
||||
label(for='plan_code')
|
||||
| #{translate('plan')}
|
||||
for plan_code in groupPlanModalOptions.plan_codes
|
||||
label.group-plan-option
|
||||
input(
|
||||
type="radio"
|
||||
name="plan_code"
|
||||
checked=(plan_code.code === groupPlanModalDefaults.plan_code)
|
||||
value=plan_code.code
|
||||
data-ol-group-plan-code=plan_code.code
|
||||
)
|
||||
span #{translate(plan_code.i18n)}
|
||||
.form-group
|
||||
label(for='size')
|
||||
| #{translate('number_of_users')}
|
||||
select.form-control(
|
||||
id="size"
|
||||
event-tracking="groups-modal-group-size"
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
event-tracking-element="select"
|
||||
)
|
||||
for size in groupPlanModalOptions.sizes
|
||||
option(
|
||||
value=size
|
||||
selected=(size === groupPlanModalDefaults.size)
|
||||
) #{size}
|
||||
.form-group(data-ol-group-plan-form-currency)
|
||||
label(for='currency')
|
||||
| #{translate('currency')}
|
||||
select.form-control(id="currency")
|
||||
for currency in groupPlanModalOptions.currencies
|
||||
option(
|
||||
value=currency.code
|
||||
selected=(currency.code === groupPlanModalDefaults.currency)
|
||||
) #{currency.display}
|
||||
.form-group
|
||||
label(for='usage')
|
||||
| #{translate('educational_discount_for_groups_of_ten_or_more')}
|
||||
label.group-plan-educational-discount
|
||||
input(
|
||||
id="usage"
|
||||
type="checkbox"
|
||||
autocomplete="off"
|
||||
event-tracking="groups-modal-edu-discount"
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
event-tracking-element="checkbox"
|
||||
)
|
||||
span #{translate('educational_discount_disclaimer')}
|
||||
|
||||
.row
|
||||
.col-md-12.text-center
|
||||
.educational-discount-section
|
||||
div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
|
||||
.applied(hidden=true data-ol-group-plan-educational-discount-applied)
|
||||
| #{translate('educational_discount_applied')}
|
||||
.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
|
||||
| #{translate('educational_discount_available_for_groups_of_ten_or_more')}
|
||||
.modal-footer
|
||||
.text-center
|
||||
button.btn.btn-primary.btn-lg(
|
||||
data-ol-purchase-group-plan
|
||||
event-tracking="form-submitted-groups-modal-purchase-click"
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
) #{translate('purchase_now_lowercase')}
|
||||
br
|
||||
p #{translate('need_more_than_x_licenses', {x: '50'})}
|
||||
|
|
||||
button.btn.btn-inline-link(
|
||||
data-ol-open-contact-form-for-more-than-50-licenses
|
||||
) #{translate('please_get_in_touch')}
|
||||
|
||||
|
|
@ -23,42 +23,112 @@
|
|||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
padding: 46px 18px;
|
||||
margin: 0 auto @line-height-computed;
|
||||
text-shadow: 0 -1px 1px darken(@link-color, 10%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background-color: @brand-secondary;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
|
||||
.small {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: @font-size-base * 0.8;
|
||||
.group-customize-subscription-modal {
|
||||
.modal-footer {
|
||||
.btn-lg {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle-lg {
|
||||
height: 180px;
|
||||
padding: 70px 8px;
|
||||
width: 180px;
|
||||
}
|
||||
.btn-inline-link {
|
||||
font-weight: normal;
|
||||
// TODO: add to .website-redesign
|
||||
// copied .inline-green-link style
|
||||
color: var(--green-50);
|
||||
text-decoration: underline;
|
||||
// text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
|
||||
// this will force underline to not skip the descender
|
||||
text-decoration-skip-ink: none;
|
||||
|
||||
.circle-subtext {
|
||||
font-size: 1rem;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--green-60);
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
float: right;
|
||||
// for accessibility with keyboard navigation
|
||||
&:focus {
|
||||
outline: 2px solid var(--green-50);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
.circle {
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-04);
|
||||
padding: 46px 18px;
|
||||
margin: 0 auto @line-height-computed;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--green-50);
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
.group-price {
|
||||
font-weight: 600;
|
||||
}
|
||||
.group-price-per-user {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-lg {
|
||||
height: 180px;
|
||||
padding: 70px 8px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.group-plan-option {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
|
||||
label span {
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-03);
|
||||
font-weight: 400;
|
||||
padding-left: var(
|
||||
--spacing-04
|
||||
); // TODO: move to standard input styling for checkbox and radio
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
// TODO: move to standard input styling for checkbox
|
||||
accent-color: var(--green-50);
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
// TODO: move to standard input styling for checkbox
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-06); // TODO: move to main .form-group CSS
|
||||
}
|
||||
|
||||
.group-plan-educational-discount {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.educational-discount-section {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.group-modal-features {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
.list-item-pro-features-header {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,65 +80,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-page {
|
||||
p {
|
||||
color: var(--neutral-70);
|
||||
margin-bottom: @line-height-computed;
|
||||
}
|
||||
|
||||
.plans-header {
|
||||
h1,
|
||||
h2 {
|
||||
color: var(--neutral-70);
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
padding: 46px 18px;
|
||||
margin: 0 auto @line-height-computed;
|
||||
text-shadow: 0 -1px 1px darken(@link-color, 10%);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background-color: @green-70;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
|
||||
.small {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: @font-size-base * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-lg {
|
||||
height: 180px;
|
||||
padding: 70px 8px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.circle-subtext {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
float: right;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
[data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plans-v2-top-switch ul.plans-v2-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -166,3 +166,44 @@
|
|||
width: @modal-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.website-redesign-modal {
|
||||
.modal-title {
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-04);
|
||||
margin-bottom: var(--spacing-02);
|
||||
}
|
||||
.modal-subtitle {
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-03);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
padding: var(--spacing-06);
|
||||
}
|
||||
.modal-header {
|
||||
border-bottom: 1px solid var(--neutral-20);
|
||||
}
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--neutral-20);
|
||||
background-color: transparent;
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
color: var(--neutral-90);
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-02);
|
||||
opacity: 1;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
padding: var(--spacing-04);
|
||||
&:hover {
|
||||
background-color: var(--neutral-10);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1217,6 +1217,7 @@
|
|||
"more": "More",
|
||||
"more_actions": "More actions",
|
||||
"more_info": "More Info",
|
||||
"more_lowercase": "more",
|
||||
"more_options": "More options",
|
||||
"more_options_for_border_settings_coming_soon": "More options for border settings coming soon.",
|
||||
"more_project_collaborators": "<0>More</0> project <0>collaborators</0>",
|
||||
|
|
@ -1542,6 +1543,7 @@
|
|||
"publishing": "Publishing",
|
||||
"pull_github_changes_into_sharelatex": "Pull GitHub changes into __appName__",
|
||||
"purchase_now": "Purchase Now",
|
||||
"purchase_now_lowercase": "Purchase now",
|
||||
"push_sharelatex_changes_to_github": "Push __appName__ changes to GitHub",
|
||||
"quoted_text_in": "Quoted text in",
|
||||
"raw_logs": "Raw logs",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue