mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
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:
parent
abd57e03cf
commit
4e7fbcfe2e
6 changed files with 60 additions and 32 deletions
|
@ -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
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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',
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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> = {
|
||||||
|
|
Loading…
Reference in a new issue