From 87bc0b2aa99721399c576d85f6e78af409bd0d9b Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Wed, 12 Jun 2024 08:39:35 -0500 Subject: [PATCH] Merge pull request #18857 from overleaf/jel-plans-page-css [web] Add quotes to new plans page variants GitOrigin-RevId: 794692730a7a6846bf4e43021c34798e9a2605da --- services/web/app/views/_mixins/quote.pug | 24 +++++++ .../subscriptions/plans-light-design.pug | 18 ++++- .../stylesheets/app/plans/plans-v2.less | 65 ++++++++++++++++++- .../stylesheets/components/quote.less | 1 + 4 files changed, 104 insertions(+), 4 deletions(-) diff --git a/services/web/app/views/_mixins/quote.pug b/services/web/app/views/_mixins/quote.pug index 5a2e37e9ae..5a294a63cd 100644 --- a/services/web/app/views/_mixins/quote.pug +++ b/services/web/app/views/_mixins/quote.pug @@ -13,3 +13,27 @@ mixin quoteLargeTextCentered(quote, person, position, affiliation, link, picture div #{affiliation} if link .quote-link !{link} + +mixin collinsQuote1 + .card.card-dark-green-bg + -var quote = 'Overleaf is indispensable for us. We use it in our research, thesis writing, project proposals, and manuscripts for publication. When it comes to writing, it’s our main tool.' + -var quotePerson = 'Christopher Collins' + -var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University' + -var quotePersonImg = buildImgPath("advocates/collins.jpg") + +quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson) + +mixin collinsQuote2 + .card.card-dark-green-bg + -var quote = 'We are writing collaboratively right up until the last minute. We are faced with deadlines all the time, and Overleaf gives us the ability to polish right up until the last possible second.' + -var quotePerson = 'Christopher Collins' + -var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University' + -var quotePersonImg = buildImgPath("advocates/collins.jpg") + +quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson) + +mixin bennettQuote1 + .card.card-dark-green-bg + -var quote = 'With Overleaf, we now have a process for developing technical documentation which has virtually eliminated the time required to properly format and layout documents.' + -var quotePerson = 'Andrew Bennett' + -var quotePersonPosition = 'Software Architect, Symplectic' + -var quotePersonImg = buildImgPath("advocates/bennett.jpg") + +quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson) \ No newline at end of file diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug index 2dd6c507c8..5dd5634cb3 100644 --- a/services/web/app/views/subscriptions/plans-light-design.pug +++ b/services/web/app/views/subscriptions/plans-light-design.pug @@ -1,4 +1,5 @@ extends ../layout-website-redesign +include ../_mixins/quote block vars - entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main' @@ -12,7 +13,7 @@ block append meta block content main.website-redesign#main-content - .plans + .plans-page .container //- if showInrGeoBanner //- div.notification.notification-type-success.text-centered @@ -37,9 +38,20 @@ block content +currency_and_payment_methods() - include ./plans/_university_info + //- TODO: hide for groups/students + .plans-page-quote-row + +collinsQuote1() - include ./plans/_quotes + //- TODO: hide for individual/students + .plans-page-quote-row + +bennettQuote1() + + //- TODO: hide for groups/students + .plans-page-quote-row + +collinsQuote2() + + + include ./plans/_university_info include ./plans/_faq diff --git a/services/web/frontend/stylesheets/app/plans/plans-v2.less b/services/web/frontend/stylesheets/app/plans/plans-v2.less index d3e2ebe80c..b460999183 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans/plans-v2.less @@ -80,6 +80,65 @@ } } +.plans-page { + p { + color: @neutral-70; + margin-bottom: @line-height-computed; + } + + .plans-header { + h1, + h2 { + color: @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: @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; + } + } + + .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; @@ -1290,7 +1349,7 @@ p.plans-v2-table-green-highlighted-text { } .website-redesign { - .plans { + .plans-page { padding-top: calc(var(--spacing-16) + var(--header-height)); h1 { @@ -1307,3 +1366,7 @@ p.plans-v2-table-green-highlighted-text { } } } + +.plans-page-quote-row { + margin: var(--spacing-13) 0; +} diff --git a/services/web/frontend/stylesheets/components/quote.less b/services/web/frontend/stylesheets/components/quote.less index e39a726d80..f154fc9510 100644 --- a/services/web/frontend/stylesheets/components/quote.less +++ b/services/web/frontend/stylesheets/components/quote.less @@ -26,6 +26,7 @@ blockquote.quote-large-text-centered { .quote-img { img { + border-radius: 50%; height: 64px; max-width: 64px; }