Merge pull request #18473 from overleaf/ii-bs5-settings-grid-fix

[web] Adjust column breakpoints in bs5 account settings page

GitOrigin-RevId: 90e7fe7561a75439166472627fdb6189ebcdefa1
This commit is contained in:
ilkin-overleaf 2024-05-28 11:48:42 +03:00 committed by Copybot
parent abd57e03cf
commit 4e7fbcfe2e
6 changed files with 60 additions and 32 deletions

View file

@ -109,7 +109,7 @@ function AddEmail() {
if (!isFormVisible) { if (!isFormVisible) {
return ( return (
<Layout isError={isError} error={error}> <Layout isError={isError} error={error}>
<OLCol md={12}> <OLCol lg={12}>
<Cell> <Cell>
{state.data.emailCount >= emailAddressLimit ? ( {state.data.emailCount >= emailAddressLimit ? (
<span className="small"> <span className="small">
@ -152,7 +152,7 @@ function AddEmail() {
<form> <form>
<Layout isError={isError} error={error}> <Layout isError={isError} error={error}>
<ReCaptcha2 page="addEmail" ref={recaptchaRef} /> <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
<OLCol md={8}> <OLCol lg={8}>
<Cell> <Cell>
{InputComponent} {InputComponent}
<div className="affiliations-table-cell-tabbed"> <div className="affiliations-table-cell-tabbed">
@ -160,10 +160,10 @@ function AddEmail() {
</div> </div>
</Cell> </Cell>
</OLCol> </OLCol>
<OLCol md={4}> <OLCol lg={4}>
<Cell <Cell
className={bsVersion({ className={bsVersion({
bs5: 'text-md-end', bs5: 'text-lg-end',
bs3: 'text-md-right', bs3: 'text-md-right',
})} })}
> >
@ -182,7 +182,7 @@ function AddEmail() {
<form> <form>
<Layout isError={isError} error={error}> <Layout isError={isError} error={error}>
<ReCaptcha2 page="addEmail" ref={recaptchaRef} /> <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
<OLCol md={8}> <OLCol lg={8}>
<Cell> <Cell>
{InputComponent} {InputComponent}
{!isSsoAvailableForDomain ? ( {!isSsoAvailableForDomain ? (
@ -205,10 +205,10 @@ function AddEmail() {
</Cell> </Cell>
</OLCol> </OLCol>
{!isSsoAvailableForDomain ? ( {!isSsoAvailableForDomain ? (
<OLCol md={4}> <OLCol lg={4}>
<Cell <Cell
className={bsVersion({ className={bsVersion({
bs5: 'text-md-end', bs5: 'text-lg-end',
bs3: 'text-md-right', bs3: 'text-md-right',
})} })}
> >
@ -221,7 +221,7 @@ function AddEmail() {
</Cell> </Cell>
</OLCol> </OLCol>
) : ( ) : (
<OLCol md={12}> <OLCol lg={12}>
<Cell> <Cell>
<div className="affiliations-table-cell-tabbed"> <div className="affiliations-table-cell-tabbed">
<SsoLinkingInfo <SsoLinkingInfo

View file

@ -12,7 +12,7 @@ function Header() {
<> <>
<OLRow> <OLRow>
<OLCol <OLCol
md={4} lg={4}
className={bsVersion({ className={bsVersion({
bs5: 'd-none d-sm-block', bs5: 'd-none d-sm-block',
bs3: 'hidden-xs', bs3: 'hidden-xs',
@ -23,7 +23,7 @@ function Header() {
</EmailCell> </EmailCell>
</OLCol> </OLCol>
<OLCol <OLCol
md={8} lg={8}
className={bsVersion({ className={bsVersion({
bs5: 'd-none d-sm-block', bs5: 'd-none d-sm-block',
bs3: 'hidden-xs', bs3: 'hidden-xs',

View file

@ -81,7 +81,7 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
) { ) {
return ( return (
<OLRow> <OLRow>
<OLCol md={12}> <OLCol lg={12}>
<OLNotification <OLNotification
type="info" type="info"
content={ content={
@ -99,7 +99,7 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
if (userEmailData.affiliation.inReconfirmNotificationPeriod) { if (userEmailData.affiliation.inReconfirmNotificationPeriod) {
return ( return (
<OLRow> <OLRow>
<OLCol md={12}> <OLCol lg={12}>
{isBootstrap5 ? ( {isBootstrap5 ? (
<OLNotification <OLNotification
type="info" type="info"

View file

@ -30,22 +30,22 @@ function EmailsRow({ userEmailData }: EmailsRowProps) {
return ( return (
<> <>
<OLRow> <OLRow>
<OLCol md={4}> <OLCol lg={4}>
<EmailCell> <EmailCell>
<Email userEmailData={userEmailData} /> <Email userEmailData={userEmailData} />
</EmailCell> </EmailCell>
</OLCol> </OLCol>
<OLCol md={5}> <OLCol lg={5}>
{userEmailData.affiliation?.institution && ( {userEmailData.affiliation?.institution && (
<EmailCell> <EmailCell>
<InstitutionAndRole userEmailData={userEmailData} /> <InstitutionAndRole userEmailData={userEmailData} />
</EmailCell> </EmailCell>
)} )}
</OLCol> </OLCol>
<OLCol md={3}> <OLCol lg={3}>
<EmailCell <EmailCell
className={bsVersion({ className={bsVersion({
bs5: 'text-md-end', bs5: 'text-lg-end',
bs3: 'text-md-right', bs3: 'text-md-right',
})} })}
> >
@ -94,7 +94,7 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
if (userEmailData.samlProviderId) { if (userEmailData.samlProviderId) {
return ( return (
<OLRow> <OLRow>
<OLCol md={{ span: 8, offset: 4 }}> <OLCol lg={{ span: 8, offset: 4 }}>
<EmailCell> <EmailCell>
<p> <p>
<Trans <Trans
@ -118,10 +118,10 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
return ( return (
<OLRow> <OLRow>
<OLCol md={{ span: 8, offset: 4 }}> <OLCol lg={{ span: 8, offset: 4 }}>
<div className="horizontal-divider" /> <div className="horizontal-divider" />
<OLRow> <OLRow>
<OLCol md={9}> <OLCol lg={9}>
<EmailCell> <EmailCell>
<p className="small"> <p className="small">
<Trans <Trans
@ -153,9 +153,9 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
</EmailCell> </EmailCell>
</OLCol> </OLCol>
<OLCol <OLCol
md={3} lg={3}
className={bsVersion({ className={bsVersion({
bs5: 'text-md-end', bs5: 'text-lg-end',
bs3: 'text-md-right', bs3: 'text-md-right',
})} })}
> >

View file

@ -35,7 +35,7 @@ function SettingsPageRoot() {
return ( return (
<div className="container"> <div className="container">
<OLRow> <OLRow>
<OLCol md={12} lg={{ span: 10, offset: 1 }}> <OLCol xl={{ span: 10, offset: 1 }}>
{isReady ? <SettingsPageContent /> : null} {isReady ? <SettingsPageContent /> : null}
</OLCol> </OLCol>
</OLRow> </OLRow>
@ -60,10 +60,10 @@ function SettingsPageContent() {
<EmailsSection /> <EmailsSection />
<SSOAlert /> <SSOAlert />
<OLRow> <OLRow>
<OLCol md={5}> <OLCol lg={5}>
<AccountInfoSection /> <AccountInfoSection />
</OLCol> </OLCol>
<OLCol md={{ span: 5, offset: 1 }}> <OLCol lg={{ span: 5, offset: 1 }}>
<PasswordSection /> <PasswordSection />
</OLCol> </OLCol>
</OLRow> </OLRow>

View file

@ -8,23 +8,51 @@ type OLColProps = React.ComponentProps<typeof Col> & {
function OLCol(props: OLColProps) { function OLCol(props: OLColProps) {
const { bs3Props, ...rest } = props const { bs3Props, ...rest } = props
const sizes = new Set(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])
const getBs3Sizes = (obj: typeof rest) => { const getBs3Sizes = (obj: typeof rest) => {
return Object.entries(obj).reduce( const bs5ToBs3SizeMap = {
xs: undefined,
sm: undefined,
md: 'sm',
lg: 'md',
xl: 'lg',
xxl: undefined,
} as const
const isBs5ToBs3SizeMapKey = (
key: string
): key is keyof typeof bs5ToBs3SizeMap => {
return key in bs5ToBs3SizeMap
}
const sizes = Object.entries(obj).reduce(
(prev, [key, value]) => { (prev, [key, value]) => {
if (sizes.has(key)) { if (isBs5ToBs3SizeMapKey(key)) {
if (typeof value === 'object') { const bs3Size = bs5ToBs3SizeMap[key]
prev[key] = value.span
prev[`${key}Offset`] = value.offset if (bs3Size) {
} else { if (typeof value === 'object') {
prev[key] = value prev[bs3Size] = value.span
prev[`${bs3Size}Offset`] = value.offset
} else {
prev[bs3Size] = value
}
} }
} }
return prev return prev
}, },
{} as Record<string, (typeof rest)['xs']> {} as Record<string, (typeof rest)['xs']>
) )
// Add a default sizing for `col-xs-12` if no sizing is available
if (
!Object.keys(sizes).some(key => ['xs', 'sm', 'md', 'lg'].includes(key))
) {
sizes.xs = 12
}
return sizes
} }
const bs3ColProps: React.ComponentProps<typeof BS3Col> = { const bs3ColProps: React.ComponentProps<typeof BS3Col> = {