Merge pull request #18959 from overleaf/jel-faq-tabs

[web] New tab and accordion more reusable

GitOrigin-RevId: ed8340bc4b6312c4270edf1edf53c74a067aaccf
This commit is contained in:
Jessica Lawshe 2024-06-26 09:20:43 -05:00 committed by Copybot
parent c04fea0fd3
commit fbc9a557c7
6 changed files with 152 additions and 170 deletions

View file

@ -10,51 +10,53 @@ include ../../_mixins/eyebrow
h2 h2
+eyebrow(translate("frequently_asked_questions")) +eyebrow(translate("frequently_asked_questions"))
| #{translate("your_questions_answered")} | #{translate("your_questions_answered")}
.row.plans-faq-header-section
.col-xs-12.website-redesign-ol-tabs .row
ul.nav.nav-tabs .col-xs-12
li.active(role="presentation") .ol-tabs-scrollable
a( .nav-tabs-container
role="tab" ul.nav.nav-tabs
data-toggle="tab" li.active(role="presentation")
href='#' + managingYourSubscription a(
aria-controls=managingYourSubscription role="tab"
data-toggle="tab"
href='#' + managingYourSubscription
aria-controls=managingYourSubscription
)
| #{translate('managing_your_subscription')}
li(role="presentation")
a(
role="tab"
data-toggle="tab"
href='#' + overleafIndividualPlans
aria-controls=overleafIndividualPlans
)
| #{translate('overleaf_individual_plans')}
li(role="presentation")
a(
role="tab"
data-toggle="tab"
href='#' + overleafGroupPlans
aria-controls=overleafGroupPlans
)
| #{translate('overleaf_group_plans')}
.tab-content
.tab-pane.active(
role="tabpanel"
id=managingYourSubscription
data-ol-faq-tab-content=managingYourSubscription
) )
| #{translate('managing_your_subscription')} +managingYourSubscription()
li(role="presentation") .tab-pane(
a( role="tabpanel"
role="tab" id=overleafIndividualPlans
data-toggle="tab" data-ol-faq-tab-content=overleafIndividualPlans
href='#' + overleafIndividualPlans
aria-controls=overleafIndividualPlans
) )
| #{translate('overleaf_individual_plans')} +overleafIndividualPlans()
li(role="presentation") .tab-pane(
a( role="tabpanel"
role="tab" id=overleafGroupPlans
data-toggle="tab" data-ol-faq-tab-content=overleafGroupPlans
href='#' + overleafGroupPlans
aria-controls=overleafGroupPlans
) )
| #{translate('overleaf_group_plans')} +overleafGroupPlans()
.row.plans-faq-questions-section
.col-xs-12.faq-questions-container
.tab-content
.tab-pane.active(
role="tabpanel"
id=managingYourSubscription
data-ol-faq-tab-content=managingYourSubscription
)
+managingYourSubscription()
.tab-pane(
role="tabpanel"
id=overleafIndividualPlans
data-ol-faq-tab-content=overleafIndividualPlans
)
+overleafIndividualPlans()
.tab-pane(
role="tabpanel"
id=overleafGroupPlans
data-ol-faq-tab-content=overleafGroupPlans
)
+overleafGroupPlans()

View file

@ -1,5 +1,5 @@
mixin managingYourSubscription() mixin managingYourSubscription()
.accordions-container .ol-accordions-container
.custom-accordion-item .custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1") button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1")
| Can I change plans or cancel later? | Can I change plans or cancel later?
@ -32,7 +32,7 @@ mixin managingYourSubscription()
mixin overleafIndividualPlans() mixin overleafIndividualPlans()
.accordions-container .ol-accordions-container
.custom-accordion-item .custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1") button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1")
| How does the free trial work? | How does the free trial work?
@ -103,7 +103,7 @@ mixin overleafIndividualPlans()
mixin overleafGroupPlans() mixin overleafGroupPlans()
.accordions-container .ol-accordions-container
.custom-accordion-item .custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1") button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1")
| Whats the difference between users and collaborators on an Overleaf group subscription? | Whats the difference between users and collaborators on an Overleaf group subscription?

View file

@ -616,99 +616,10 @@
.plans-faq { .plans-faq {
.faq-heading-container { .faq-heading-container {
text-align: center; text-align: center;
margin-bottom: var(--spacing-13);
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
text-align: unset; text-align: unset;
} }
} }
.plans-faq-header-section {
text-align: center;
max-width: 900px;
margin-top: var(--spacing-13);
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: var(--spacing-08);
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--neutral-20);
.custom-accordion-header {
text-align: left;
width: 100%;
font-size: var(--font-size-04);
font-weight: 600;
line-height: var(--line-height-03);
color: var(--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;
margin-left: var(--spacing-08);
}
&: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: var(--spacing-04);
font-size: var(--font-size-body-base);
line-height: var(--line-height-03);
}
}
}
} }

View file

@ -0,0 +1,50 @@
.ol-accordions-container :last-child {
border: 0px !important;
}
.ol-accordions-container {
.custom-accordion-item {
width: 100%;
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--neutral-20);
.custom-accordion-header {
text-align: left;
width: 100%;
font-size: var(--font-size-04);
font-weight: 600;
line-height: var(--line-height-03);
color: var(--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;
margin-left: var(--spacing-08);
}
&: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: var(--spacing-04);
font-size: var(--font-size-body-base);
line-height: var(--line-height-03);
}
}
}

View file

@ -39,49 +39,67 @@
} }
} }
.website-redesign-ol-tabs { .ol-tabs-scrollable {
// Styling for Website redesign, it will be used in CMS Later on. // Styling for Website redesign, it will be used in CMS Later on.
.nav-tabs { max-width: 800px;
border: 0 !important; margin: 0 auto;
margin-bottom: 0;
margin-top: -@line-height-computed; //- adjusted for portal-name
padding: @padding-lg 0 @padding-md;
text-align: center;
}
.nav-tabs > li { .nav-tabs-container {
display: inline-block; overflow-x: auto;
float: none; margin-bottom: var(--spacing-11);
a { .nav-tabs {
border: 0; border: 0 !important;
color: @neutral-70; margin: 0 auto;
border-bottom: 3px solid @neutral-20 !important; padding: 0;
margin-right: unset; text-align: center;
padding: var(--spacing-04); min-width: max-content; // This is for horizontal scrolling
&:focus, li {
&:hover { display: inline-block;
float: none;
margin-bottom: 0; //override navs.less
a {
border: 0;
color: @neutral-70;
border-bottom: 3px solid @neutral-20 !important;
margin-right: unset;
padding: var(--spacing-04);
&:focus,
&:hover {
background-color: transparent !important;
border: 0;
}
}
}
li.active > a {
background-color: transparent !important; background-color: transparent !important;
border: 0; border: 0 !important;
border-bottom: 3px solid @emerald-green !important;
color: @neutral-90 !important;
&:hover {
border-bottom: 3px solid @emerald-green !important;
}
}
@media (max-width: @screen-xs-max) {
text-align: left;
} }
} }
} }
li.active > a { .tab-content {
background-color: transparent !important; border: 0 !important; //override navs.less
border: 0 !important; padding: 0 !important; //override navs.less
border-bottom: 3px solid @emerald-green !important;
color: @neutral-90 !important;
&:hover {
border-bottom: 3px solid @emerald-green !important;
}
} }
.tab-content:extend(.container) { .ol-accordions-container :first-child {
background-color: transparent !important; // remove top padding so we have spacing-11 between tab nav and tab content
border: none !important; padding-top: 0px !important;
} }
} }

View file

@ -78,6 +78,7 @@
@import 'components/interstitial.less'; @import 'components/interstitial.less';
// Components w/ JavaScript // Components w/ JavaScript
@import 'components/accordion.less';
@import 'components/modals.less'; @import 'components/modals.less';
@import 'components/tooltip.less'; @import 'components/tooltip.less';
@import 'components/popovers.less'; @import 'components/popovers.less';