mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Limit Max Width of all containers to 1180px (#1123)

Browse Source 
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2021-10-19 10:47:28 -07:00
committed by GitHub
parent 573049e53c
commit 3d858ac04a
3 changed files with 254 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
View File

@@ -114,6 +114,9 @@ const styles = (theme: Theme) =>
marginLeft: 10, marginLeft: 10,
}, },
...containerForHeader(theme.spacing(4)), ...containerForHeader(theme.spacing(4)),
constrainedContainer: {
maxWidth: 1180,
},
}); });
interface IListBucketsProps { interface IListBucketsProps {

1
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -133,6 +133,7 @@ export const radioIcons = {
export const containerForHeader = (bottomSpacing: any) => ({ export const containerForHeader = (bottomSpacing: any) => ({
container: { container: {
position: "relative" as const, position: "relative" as const,
maxWidth: 1180,
padding: "20px 35px 0", padding: "20px 35px 0",
"& h6": { "& h6": {
color: "#777777", color: "#777777",

488
portal-ui/src/screens/Console/License/License.tsx
View File

@@ -257,7 +257,8 @@ const styles = (theme: Theme) =>
}, },
}, },
planItemsPadding: { planItemsPadding: {
padding: "23px 33px", padding: "23px 0px",
maxWidth: 1180,
}, },
subnetSubTitle: { subnetSubTitle: {
fontSize: 12, fontSize: 12,
@@ -362,247 +363,258 @@ const License = ({ classes, operatorMode }: ILicenseProps) => {
<Fragment> <Fragment>
<Fragment> <Fragment>
<PageHeader label="License" /> <PageHeader label="License" />
<Grid container> <Grid container className={classes.container}>
<Grid container xs={12} className={classes.container}> <Grid item xs={12}>
<Grid item xs={12} lg={8} className={`${classes.licenseContainer}`}> <Grid container>
{licenseInfo ? ( <Grid
<Fragment> item
<Grid container className={classes.licenseInfo}> xs={12}
<Grid item xs={6}> lg={8}
<Typography className={`${classes.licenseContainer}`}
variant="button" >
display="block" {licenseInfo ? (
gutterBottom <Fragment>
className={classes.licenseInfoTitle} <Grid container className={classes.licenseInfo}>
> <Grid item xs={6}>
License <Typography
</Typography> variant="button"
<Typography display="block"
variant="overline" gutterBottom
display="block" className={classes.licenseInfoTitle}
gutterBottom >
className={classes.licenseInfoValue} License
> </Typography>
Commercial License <Typography
</Typography> variant="overline"
<Typography display="block"
variant="button" gutterBottom
display="block" className={classes.licenseInfoValue}
gutterBottom >
className={classes.licenseInfoTitle} Commercial License
> </Typography>
Organization <Typography
</Typography> variant="button"
<Typography display="block"
variant="overline" gutterBottom
display="block" className={classes.licenseInfoTitle}
gutterBottom >
className={classes.licenseInfoValue} Organization
> </Typography>
{licenseInfo.organization} <Typography
</Typography> variant="overline"
<Typography display="block"
variant="button" gutterBottom
display="block" className={classes.licenseInfoValue}
gutterBottom >
className={classes.licenseInfoTitle} {licenseInfo.organization}
> </Typography>
Registered Capacity <Typography
</Typography> variant="button"
<Typography display="block"
variant="overline" gutterBottom
display="block" className={classes.licenseInfoTitle}
gutterBottom >
className={classes.licenseInfoValue} Registered Capacity
> </Typography>
{niceBytes( <Typography
(licenseInfo.storage_capacity * 1099511627776) // 1 Terabyte = 1099511627776 Bytes variant="overline"
.toString(10) display="block"
)} gutterBottom
</Typography> className={classes.licenseInfoValue}
<Typography >
variant="button" {niceBytes(
display="block" (licenseInfo.storage_capacity * 1099511627776) // 1 Terabyte = 1099511627776 Bytes
gutterBottom .toString(10)
className={classes.licenseInfoTitle} )}
> </Typography>
Expiry Date <Typography
</Typography> variant="button"
<Typography display="block"
variant="overline" gutterBottom
display="block" className={classes.licenseInfoTitle}
gutterBottom >
className={classes.licenseInfoValue} Expiry Date
> </Typography>
<Moment format="YYYY-MM-DD"> <Typography
{licenseInfo.expires_at} variant="overline"
</Moment> display="block"
</Typography> gutterBottom
className={classes.licenseInfoValue}
>
<Moment format="YYYY-MM-DD">
{licenseInfo.expires_at}
</Moment>
</Typography>
</Grid>
<Grid item xs={6}>
<Typography
variant="button"
display="block"
gutterBottom
className={classes.licenseInfoTitle}
>
Subscription Plan
</Typography>
<Typography
variant="overline"
display="block"
gutterBottom
className={classes.licenseInfoValue}
>
{licenseInfo.plan}
</Typography>
<Typography
variant="button"
display="block"
gutterBottom
className={classes.licenseInfoTitle}
>
Requester
</Typography>
<Typography
variant="overline"
display="block"
gutterBottom
className={classes.licenseInfoValue}
>
{licenseInfo.email}
</Typography>
</Grid>
<img
className={classes.verifiedIcon}
src={"/verified.svg"}
alt="verified"
/>
</Grid> </Grid>
<Grid item xs={6}> </Fragment>
<Typography ) : (
variant="button" <Fragment>
display="block" <LicenseModal
gutterBottom open={licenseModal}
className={classes.licenseInfoTitle} closeModal={() => setLicenseModal(false)}
>
Subscription Plan
</Typography>
<Typography
variant="overline"
display="block"
gutterBottom
className={classes.licenseInfoValue}
>
{licenseInfo.plan}
</Typography>
<Typography
variant="button"
display="block"
gutterBottom
className={classes.licenseInfoTitle}
>
Requester
</Typography>
<Typography
variant="overline"
display="block"
gutterBottom
className={classes.licenseInfoValue}
>
{licenseInfo.email}
</Typography>
</Grid>
<img
className={classes.verifiedIcon}
src={"/verified.svg"}
alt="verified"
/> />
</Grid> <Grid container>
</Fragment> <img src="/agpl.svg" height={40} alt="agpl" />
) : ( </Grid>
<Fragment> <Grid container>
<LicenseModal <Typography component="h2" variant="h6">
open={licenseModal} GNU Affero General Public License
closeModal={() => setLicenseModal(false)}
/>
<Grid container>
<img src="/agpl.svg" height={40} alt="agpl" />
</Grid>
<Grid container>
<Typography component="h2" variant="h6">
GNU Affero General Public License
</Typography>
</Grid>
<Grid container className={classes.licenseDescription}>
<div
onClick={() => setLicenseModal(true)}
className={classes.clickableBlock}
>
<Typography component="h3">Version 3</Typography>
<Typography className={classes.agplFlavorText}>
The GNU Affero General Public License is a free,
copyleft license for software and other kinds of works,
specifically designed to ensure cooperation with the
Community in the case of network server software.
</Typography> </Typography>
</div> </Grid>
</Grid> <Grid container className={classes.licenseDescription}>
</Fragment> <div
)} onClick={() => setLicenseModal(true)}
</Grid> className={classes.clickableBlock}
<Grid item xs={12} lg={4} className={`${classes.paper}`}>
{licenseInfo ? (
<Fragment>
<Typography
component="h2"
variant="h6"
className={classes.pageTitle}
>
Login to MinIO SUBNET !
</Typography>
<Typography component="h6" className={classes.subnetSubTitle}>
It combines a commercial license with a support experience
unlike any other.
</Typography>
<br />
<Button
variant="contained"
color="primary"
className={classes.button}
target="_blank"
rel="noopener noreferrer"
href={`https://subnet.min.io/support/?ref=${
operatorMode ? "op" : "con"
}`}
>
Login to SUBNET
</Button>
{operatorMode && (
<Fragment>
{" "}
<br />
<br />
<button
className={classes.subnetRefreshLicenseLink}
onClick={(e) => {
e.preventDefault();
refreshLicense();
}}
> >
Refresh Licence <Typography component="h3">Version 3</Typography>
</button> <Typography className={classes.agplFlavorText}>
{loadingRefreshLicense && ( The GNU Affero General Public License is a free,
<CircularProgress copyleft license for software and other kinds of
size={16} works, specifically designed to ensure cooperation
className={classes.loadingLoginStrategy} with the Community in the case of network server
/> software.
)} </Typography>
</Fragment> </div>
)} </Grid>
</Fragment> </Fragment>
) : ( )}
<Fragment> </Grid>
<Typography <Grid item xs={12} lg={4} className={`${classes.paper}`}>
component="h2" {licenseInfo ? (
variant="h6" <Fragment>
className={classes.pageTitle} <Typography
> component="h2"
Choosing between GNU AGPL v3 and Commercial License variant="h6"
</Typography> className={classes.pageTitle}
<Typography className={classes.chooseFlavorText}> >
If you are building proprietary applications, you may want Login to MinIO SUBNET !
to choose the commercial license included as part of the </Typography>
Standard and Enterprise subscription plans. Applications <Typography
must otherwise comply with all the GNU AGPLv3 License & component="h6"
Trademark obligations. Follow the links below to learn more className={classes.subnetSubTitle}
about the compliance policy. >
</Typography> It combines a commercial license with a support experience
<br /> unlike any other.
<a </Typography>
href={`https://min.io/compliance?ref=${ <br />
operatorMode ? "op" : "con" <Button
}`} variant="contained"
className={classes.openSourcePolicy} color="primary"
target="_blank" className={classes.button}
rel="nofollow noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
Open Source Policy Compliance href={`https://subnet.min.io/support/?ref=${
</a> operatorMode ? "op" : "con"
<br /> }`}
<br /> >
<a Login to SUBNET
href={`https://min.io/logo?ref=${ </Button>
operatorMode ? "op" : "con" {operatorMode && (
}`} <Fragment>
className={classes.openSourcePolicy} {" "}
target="_blank" <br />
rel="nofollow noopener noreferrer" <br />
> <button
Trademark Policy className={classes.subnetRefreshLicenseLink}
</a> onClick={(e) => {
</Fragment> e.preventDefault();
)} refreshLicense();
}}
>
Refresh Licence
</button>
{loadingRefreshLicense && (
<CircularProgress
size={16}
className={classes.loadingLoginStrategy}
/>
)}
</Fragment>
)}
</Fragment>
) : (
<Fragment>
<Typography
component="h2"
variant="h6"
className={classes.pageTitle}
>
Choosing between GNU AGPL v3 and Commercial License
</Typography>
<Typography className={classes.chooseFlavorText}>
If you are building proprietary applications, you may want
to choose the commercial license included as part of the
Standard and Enterprise subscription plans. Applications
must otherwise comply with all the GNU AGPLv3 License &
Trademark obligations. Follow the links below to learn
more about the compliance policy.
</Typography>
<br />
<a
href={`https://min.io/compliance?ref=${
operatorMode ? "op" : "con"
}`}
className={classes.openSourcePolicy}
target="_blank"
rel="nofollow noopener noreferrer"
>
Open Source Policy Compliance
</a>
<br />
<br />
<a
href={`https://min.io/logo?ref=${
operatorMode ? "op" : "con"
}`}
className={classes.openSourcePolicy}
target="_blank"
rel="nofollow noopener noreferrer"
>
Trademark Policy
</a>
</Fragment>
)}
</Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} className={clsx(classes.planItemsPadding)}> <Grid item xs={12} className={clsx(classes.planItemsPadding)}>