github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[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
Show stats Download patch file Download diff file Expand all files Collapse all files

92
services/web/app/views/subscriptions/plans/_faq_new.pug
View file

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

6
services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug
View file

@ -1,5 +1,5 @@
mixin managingYourSubscription()
.accordions-container
.ol-accordions-container
.custom-accordion-item
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?
@ -32,7 +32,7 @@ mixin managingYourSubscription()
mixin overleafIndividualPlans()
.accordions-container
.ol-accordions-container
.custom-accordion-item
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?
@ -103,7 +103,7 @@ mixin overleafIndividualPlans()
mixin overleafGroupPlans()
.accordions-container
.ol-accordions-container
.custom-accordion-item
button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1")
| What’s the difference between users and collaborators on an Overleaf group subscription?

91
services/web/frontend/stylesheets/app/plans/plans-new-design.less
View file

@ -616,99 +616,10 @@
.plans-faq {
.faq-heading-container {
text-align: center;
margin-bottom: var(--spacing-13);
@media (max-width: @screen-xs-max) {
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);
}
}
}
}

50
services/web/frontend/stylesheets/components/accordion.less Normal file
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);
}
}
}

82
services/web/frontend/stylesheets/components/tabs.less
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.
.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;
}
max-width: 800px;
margin: 0 auto;
.nav-tabs > li {
display: inline-block;
float: none;
.nav-tabs-container {
overflow-x: auto;
margin-bottom: var(--spacing-11);
a {
border: 0;
color: @neutral-70;
border-bottom: 3px solid @neutral-20 !important;
margin-right: unset;
padding: var(--spacing-04);
.nav-tabs {
border: 0 !important;
margin: 0 auto;
padding: 0;
text-align: center;
min-width: max-content; // This is for horizontal scrolling
&:focus,
&:hover {
li {
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;
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 {
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 {
border: 0 !important; //override navs.less
padding: 0 !important; //override navs.less
}
.tab-content:extend(.container) {
background-color: transparent !important;
border: none !important;
.ol-accordions-container :first-child {
// remove top padding so we have spacing-11 between tab nav and tab content
padding-top: 0px !important;
}
}

1
services/web/frontend/stylesheets/main-style.less
View file

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