From 8018bc7249078506ab97752a36533e5fab75cda3 Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Thu, 13 Jun 2024 15:08:19 +0100 Subject: [PATCH] Website redesign - Plans page FQA's tabs Section (new-design) (#18696) * running git reset head * renaming the local-mixins file to _plans_faq * removed js to rotate the icon * format:fix * adding aria-hidden for curly braces * removing extra tab space * removing .card.card-body extra class * introducing accordions-container so that we can use the last-child property to remove the border of the last questions * creating new website-redesign-ol-tabs class and adding new styles in this class * adding content for managingYourSubscription and overleafIndividualPlans sections * adding content in overleaf group plans section * removing extra section * running make cleanup_unused_locales * cleaning after rebase * deleting extra variable projectLimits * fixing spaces around curly brackets and some additional changes after rebase GitOrigin-RevId: 3c2267080825d853e680a0a207cb640226262be2 --- .../app/plans/plans-new-design.less | 102 ++++++++++++++++++ .../frontend/stylesheets/components/tabs.less | 45 ++++++++ services/web/locales/en.json | 4 + 3 files changed, 151 insertions(+) diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less index 1148ee8cc4..34d04b54a2 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less +++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less @@ -349,4 +349,106 @@ margin-top: auto; } } + + .faq-heading-container { + text-align: center; + + @media (max-width: @screen-xs-max) { + text-align: unset; + } + + .faq-heading { + font-size: 2rem; + padding-right: 1rem; + } + } + + .plans-faq-header-section { + text-align: center; + max-width: 900px; + margin-top: 64px; + margin-left: auto; + margin-right: auto; + + .website-redesign-ol-tabs { + overflow-x: auto; + + @media (max-width: @screen-xs-max) { + padding: unset; + } + + .nav-tabs { + min-width: max-content; // This is for horizontal scrolling + + @media (max-width: @screen-xs-max) { + display: flex; + } + } + } + } + + .plans-faq-questions-section { + max-width: 850px; + margin: auto; + + .faq-questions-container { + @media (max-width: @screen-xs-max) { + padding: unset; + } + } + + .tab-content { + border: 0px; + } + } + + .accordions-container :last-child { + border: 0px !important; + } + + .accordions-container { + .custom-accordion-item { + width: 100%; + padding-top: 24px; + padding-bottom: 32px; + border-bottom: 1px solid @neutral-20; + + .custom-accordion-header { + text-align: left; + width: 100%; + font-size: 1.125rem; + font-weight: 600; + line-height: 24px; + color: @neutral-90; + background-color: unset; + border: unset; + display: flex; + justify-content: space-between; + padding: unset; + + .custom-accordion-icon { + display: flex; + align-items: center; + transition: transform 0.35s ease; + } + + &:not(.collapsed) { + .custom-accordion-icon { + transform: rotate(180deg); + transition: transform 0.35s ease; + } + } + } + + .custom-accordion-body { + background-color: unset; + text-align: left; + padding: unset; + padding-right: 2rem; + margin-top: 8px; + font-size: 1rem; + line-height: 24px; + } + } + } } diff --git a/services/web/frontend/stylesheets/components/tabs.less b/services/web/frontend/stylesheets/components/tabs.less index 5aa21722f0..0d39f16bc0 100644 --- a/services/web/frontend/stylesheets/components/tabs.less +++ b/services/web/frontend/stylesheets/components/tabs.less @@ -39,6 +39,51 @@ } } +.website-redesign-ol-tabs { + // Styling for Website redesign, it will be used in CMS Later on. + .nav-tabs { + border: 0 !important; + margin-bottom: 0; + margin-top: -@line-height-computed; //- adjusted for portal-name + padding: @padding-lg 0 @padding-md; + text-align: center; + } + + .nav-tabs > li { + display: inline-block; + float: none; + + a { + border: 0; + color: @neutral-70; + border-bottom: 3px solid @neutral-20 !important; + margin-right: unset; + + &:focus, + &:hover { + background-color: transparent !important; + border: 0; + } + } + } + + li.active > a { + background-color: transparent !important; + border: 0 !important; + border-bottom: 3px solid @emerald-green !important; + color: @neutral-90 !important; + + &:hover { + border-bottom: 3px solid @emerald-green !important; + } + } + + .tab-content:extend(.container) { + background-color: transparent !important; + border: none !important; + } +} + // Scroll the page up a bit to allow tab links to be shown when navigating to // a bookmarked tab hash [data-ol-bookmarkable-tabset] .tab-pane { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 1f03b399cc..e5b0a47831 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -647,6 +647,7 @@ "free_dropbox_and_history": "Free Dropbox and History", "free_plan_label": "You’re on the free plan", "free_plan_tooltip": "Click to find out how you could benefit from Overleaf premium features.", + "frequently_asked_questions": "frequently asked questions", "from_another_project": "From another project", "from_external_url": "From external URL", "from_project_files": "From project files", @@ -1286,7 +1287,9 @@ "over": "over", "overall_theme": "Overall theme", "overleaf": "Overleaf", + "overleaf_group_plans": "Overleaf group plans", "overleaf_history_system": "Overleaf History System", + "overleaf_individual_plans": "Overleaf individual plans", "overleaf_labs": "Overleaf Labs", "overview": "Overview", "overwrite": "Overwrite", @@ -2268,6 +2271,7 @@ "your_project_exceeded_compile_timeout_limit_on_free_plan": "Your project exceeded the compile timeout limit on our free plan.", "your_project_near_compile_timeout_limit": "Your project is near the compile timeout limit for our free plan.", "your_projects": "Your Projects", + "your_questions_answered": "Your questions answered", "your_role": "Your role", "your_sessions": "Your Sessions", "your_subscription": "Your Subscription",