Use container for width, add typography.

This commit is contained in:
2025-06-07 19:32:38 -04:00
parent 9ce21399f7
commit 1176d2f46f
2 changed files with 122 additions and 104 deletions

View File

@@ -9,7 +9,7 @@ import Webpage from "@/app/_components/webpage";
import "./(styles)/page.scss";
import { ListSortConstants } from "../ts/Sort";
import {Box, Breadcrumbs, CircularProgress, Pagination, Typography} from "@mui/material";
import {Box, Breadcrumbs, CircularProgress, Container, Pagination, Typography} from "@mui/material";
import Link from "next/link";
export default function MapfixInfoPage() {
@@ -62,12 +62,12 @@ export default function MapfixInfoPage() {
return (
<Webpage>
<Container maxWidth="lg" sx={{ py: 6 }}>
<main
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
padding: '1rem',
width: '100%',
maxWidth: '100vw',
@@ -76,12 +76,18 @@ export default function MapfixInfoPage() {
}}
>
<Breadcrumbs separator="" aria-label="breadcrumb"
style={{alignSelf: 'flex-start', marginLeft: '1rem', marginBottom: '1rem'}}>
style={{alignSelf: 'flex-start', marginBottom: '1rem'}}>
<Link href="/" style={{textDecoration: 'none', color: 'inherit'}}>
<Typography component="span">Home</Typography>
</Link>
<Typography color="textPrimary">Mapfixes</Typography>
</Breadcrumbs>
<Typography variant="h3" component="h1" fontWeight="bold" mb={2}>
Map Fixes
</Typography>
<Typography variant="subtitle1" color="text.secondary" mb={4}>
Explore all submitted fixes for maps from the community.
</Typography>
<div
className="grid"
style={{
@@ -107,6 +113,7 @@ export default function MapfixInfoPage() {
/>
))}
</div>
<Box display="flex" justifyContent="center" my={4}>
<div style={{marginTop: '1rem', marginBottom: '1rem'}}>
<Pagination
count={totalPages}
@@ -116,7 +123,9 @@ export default function MapfixInfoPage() {
shape="rounded"
/>
</div>
</Box>
</main>
</Container>
</Webpage>
)
}

View File

@@ -7,7 +7,7 @@ import Webpage from "@/app/_components/webpage";
import "./(styles)/page.scss";
import {ListSortConstants} from "../ts/Sort";
import {Breadcrumbs, Pagination, Typography, CircularProgress, Box} from "@mui/material";
import {Breadcrumbs, Pagination, Typography, CircularProgress, Box, Container} from "@mui/material";
import Link from "next/link";
export default function SubmissionInfoPage() {
@@ -68,12 +68,12 @@ export default function SubmissionInfoPage() {
return (
<Webpage>
<Container maxWidth="lg" sx={{ py: 6 }}>
<main
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
padding: '1rem',
width: '100%',
maxWidth: '100vw',
@@ -82,12 +82,18 @@ export default function SubmissionInfoPage() {
}}
>
<Breadcrumbs separator="" aria-label="breadcrumb"
style={{alignSelf: 'flex-start', marginLeft: '1rem', marginBottom: '1rem'}}>
style={{alignSelf: 'flex-start', marginBottom: '1rem'}}>
<Link href="/" style={{textDecoration: 'none', color: 'inherit'}}>
<Typography component="span">Home</Typography>
</Link>
<Typography color="textPrimary">Submissions</Typography>
</Breadcrumbs>
<Typography variant="h3" component="h1" fontWeight="bold" mb={2}>
Submissions
</Typography>
<Typography variant="subtitle1" color="text.secondary" mb={4}>
Explore all submitted maps from the community.
</Typography>
<div
className="grid"
style={{
@@ -113,6 +119,7 @@ export default function SubmissionInfoPage() {
/>
))}
</div>
<Box display="flex" justifyContent="center" my={4}>
<div style={{marginTop: '1rem', marginBottom: '1rem'}}>
<Pagination
count={totalPages}
@@ -122,7 +129,9 @@ export default function SubmissionInfoPage() {
shape="rounded"
/>
</div>
</Box>
</main>
</Container>
</Webpage>
)
}