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

View file

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

View file

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

View file

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

View file

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

View file

@ -8,23 +8,51 @@ type OLColProps = React.ComponentProps<typeof Col> & {
function OLCol(props: OLColProps) {
const { bs3Props, ...rest } = props
const sizes = new Set(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])
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]) => {
if (sizes.has(key)) {
if (typeof value === 'object') {
prev[key] = value.span
prev[`${key}Offset`] = value.offset
} else {
prev[key] = value
if (isBs5ToBs3SizeMapKey(key)) {
const bs3Size = bs5ToBs3SizeMap[key]
if (bs3Size) {
if (typeof value === 'object') {
prev[bs3Size] = value.span
prev[`${bs3Size}Offset`] = value.offset
} else {
prev[bs3Size] = value
}
}
}
return prev
},
{} 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> = {