Skip to content

Commit 5f9d427

Browse files
CannonLockCannonLock
authored
Merge pull request #1815 from CannonLock/responsive
Make website mobile friendly
2 parents b74e120 + 5583f87 commit 5f9d427

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1170
-517
lines changed

‎web_ui/frontend/app/(landing)/page.tsx‎

Lines changed: 24 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -19,33 +19,21 @@
1919
'use client';
2020

2121
import React, { useState, useEffect } from 'react';
22-
import { Box, Container, Grid, Skeleton, Typography } from '@mui/material';
22+
import {
23+
Box,
24+
Container,
25+
Grid,
26+
List,
27+
ListItemButton,
28+
ListItemText,
29+
Skeleton,
30+
Typography,
31+
} from '@mui/material';
2332
import Link from 'next/link';
2433
import useSWR from 'swr';
2534
import { getEnabledServers } from '@/helpers/util';
2635
import { ServerType } from '@/index';
2736

28-
function TextCenteredBox({ text }: { text: string }) {
29-
return (
30-
<Box
31-
sx={{
32-
aspectRatio: 1,
33-
width: '100%',
34-
display: 'flex',
35-
textTransform: 'capitalize',
36-
bgcolor: 'primary.light',
37-
borderRadius: '1rem',
38-
}}
39-
>
40-
<Box m={'auto'}>
41-
<Typography variant={'h4'} align={'center'}>
42-
{text}
43-
</Typography>
44-
</Box>
45-
</Box>
46-
);
47-
}
48-
4937
export default function Home() {
5038
const { data: enabledServers, isLoading } = useSWR<ServerType[]>(
5139
'getEnabledServers',
@@ -56,30 +44,26 @@ export default function Home() {
5644
<Box width={'100%'} pt={5}>
5745
<Container maxWidth={'xl'}>
5846
<Typography pb={5} textAlign={'center'} variant={'h3'}>
59-
Pelican Services
47+
Active Pelican Services
6048
</Typography>
61-
<Grid container justifyContent={'center'} spacing={2}>
62-
{isLoading && (
63-
<Grid item xs={2}>
64-
<Skeleton
65-
variant={'rectangular'}
66-
width={150}
67-
height={150}
68-
sx={{ borderRadius: 2 }}
69-
/>
70-
</Grid>
71-
)}
49+
<List>
7250
{enabledServers &&
7351
enabledServers.map((service) => {
7452
return (
75-
<Grid key={service} item xs={2}>
76-
<Link href={`./${service}/`}>
77-
<TextCenteredBox text={service} />
78-
</Link>
79-
</Grid>
53+
<ListItemButton
54+
key={service}
55+
component={Link}
56+
href={`./${service}/`}
57+
sx={{ p: 0 }}
58+
>
59+
<ListItemText
60+
primary={service}
61+
sx={{ textAlign: 'center', textTransform: 'capitalize' }}
62+
/>
63+
</ListItemButton>
8064
);
8165
})}
82-
</Grid>
66+
</List>
8367
</Container>
8468
</Box>
8569
);

‎web_ui/frontend/app/(login)/components/CodeInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,9 @@ export default function CodeInput({
140140
<TextField
141141
inputProps={{
142142
sx: {
143-
width: '50px',
143+
width: { xs: '30px', md: '50px' },
144144
borderWidth: '3px',
145-
fontSize: '3rem',
145+
fontSize: { xs: '1.8rem', md: '3rem' },
146146
textAlign: 'center',
147147
padding: '.5rem',
148148
backgroundColor: 'secondary.main',

‎web_ui/frontend/app/(login)/components/PasswordInput.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,14 @@ export default function PasswordInput({
5151
};
5252

5353
return (
54-
<FormControl
55-
sx={{ mt: 1, width: '50ch' }}
56-
variant='outlined'
57-
{...FormControlProps}
58-
>
54+
<FormControl sx={{ mt: 1 }} variant='outlined' {...FormControlProps}>
5955
<TextField
60-
label='Password'
56+
label='Admin Password'
6157
id='outlined-start-adornment'
6258
size={'small'}
63-
sx={{ m: 1, width: '50ch' }}
59+
sx={{ m: 1 }}
60+
autoComplete={'current-password'}
61+
name={'password'}
6462
type={showPassword ? 'text' : 'password'}
6563
{...TextFieldProps}
6664
InputProps={{

‎web_ui/frontend/app/(login)/layout.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
import { Box } from '@mui/material';
2020

2121
import { Header } from '@/components/layout/Header';
22+
import { Main, PaddedContent } from '@/components/layout';
2223

2324
export const metadata = {
2425
title: 'Pelican Login',
@@ -33,9 +34,9 @@ export default function RootLayout({
3334
return (
3435
<>
3536
<Header text={'Pelican Platform'} />
36-
<Box component={'main'} pt={'75px'} display={'flex'} minHeight={'100vh'}>
37-
{children}
38-
</Box>
37+
<Main>
38+
<PaddedContent>{children}</PaddedContent>
39+
</Main>
3940
</>
4041
);
4142
}

‎web_ui/frontend/app/(login)/login/page.tsx‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,8 @@ const AdminLogin = () => {
108108
<form onSubmit={onSubmit} action='#'>
109109
<Box display={'flex'} justifyContent={'center'}>
110110
<PasswordInput
111-
FormControlProps={{
112-
sx: { width: '50%' },
113-
}}
114111
TextFieldProps={{
115112
InputProps: {
116-
sx: { width: '50%' },
117113
onChange: (e) => {
118114
setPassword(e.target.value);
119115
},
@@ -143,15 +139,13 @@ const AdminLogin = () => {
143139
) {
144140
return (
145141
<Box display={'flex'} flexDirection={'column'} justifyContent={'center'}>
146-
<Box m={'auto'}>
147-
<Button
148-
size={'small'}
149-
variant={'text'}
150-
onClick={() => setToggled(!toggled)}
151-
>
152-
Server Admin Login
153-
</Button>
154-
</Box>
142+
<Button
143+
size={'small'}
144+
variant={'text'}
145+
onClick={() => setToggled(!toggled)}
146+
>
147+
Server Admin Login
148+
</Button>
155149
<Collapse in={toggled}>{LoginComponent}</Collapse>
156150
</Box>
157151
);
@@ -205,39 +199,46 @@ export default function Home() {
205199
Login
206200
</Typography>
207201
<Box color={'grey'} mt={1} mb={2}>
208-
<Typography textAlign={'center'} variant={'h6'} component={'p'}>
202+
<Typography
203+
variant={'h6'}
204+
component={'p'}
205+
sx={{
206+
textAlign: 'center',
207+
whiteSpace: 'nowrap',
208+
overflow: 'hidden',
209+
textOverflow: 'ellipsis',
210+
}}
211+
>
209212
Administer your Pelican Platform
210213
</Typography>
211214
</Box>
212215
</Box>
213-
<Box mx={'auto'}>
214-
{serverIntersect &&
215-
(serverIntersect.includes('registry') ||
216-
serverIntersect.includes('origin') ||
217-
serverIntersect.includes('cache') ||
218-
serverIntersect.includes('director')) && (
219-
<>
220-
<Box display={'flex'} justifyContent={'center'} mb={1}>
221-
<Button
222-
size={'large'}
223-
href={`/api/v1.0/auth/oauth/login?nextUrl=${returnUrl ? returnUrl : '/'}`}
224-
variant={'contained'}
225-
>
226-
Login with OAuth
227-
</Button>
228-
</Box>
229-
</>
230-
)}
231-
{serverIntersect && <AdminLogin />}
232-
{!serverIntersect && (
233-
<Skeleton
234-
variant={'rectangular'}
235-
height={90}
236-
width={400}
237-
sx={{ borderRadius: 2 }}
238-
/>
216+
{serverIntersect &&
217+
(serverIntersect.includes('registry') ||
218+
serverIntersect.includes('origin') ||
219+
serverIntersect.includes('cache') ||
220+
serverIntersect.includes('director')) && (
221+
<>
222+
<Box display={'flex'} justifyContent={'center'} mb={1}>
223+
<Button
224+
size={'large'}
225+
href={`/api/v1.0/auth/oauth/login?nextUrl=${returnUrl ? returnUrl : '/'}`}
226+
variant={'contained'}
227+
>
228+
Login with OAuth
229+
</Button>
230+
</Box>
231+
</>
239232
)}
240-
</Box>
233+
{serverIntersect && <AdminLogin />}
234+
{!serverIntersect && (
235+
<Skeleton
236+
variant={'rectangular'}
237+
height={90}
238+
width={'100%'}
239+
sx={{ borderRadius: 2 }}
240+
/>
241+
)}
241242
</Box>
242243
</>
243244
);

‎web_ui/frontend/app/cache/layout.tsx‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,12 @@
1616
*
1717
***************************************************************/
1818

19-
import { Box, Tooltip } from '@mui/material';
19+
import { Box } from '@mui/material';
2020

21-
import { ButtonLink, Sidebar } from '@/components/layout/Sidebar';
22-
import Link from 'next/link';
23-
import Image from 'next/image';
24-
import PelicanLogo from '@/public/static/images/PelicanPlatformLogo_Icon.png';
25-
import IconButton from '@mui/material/IconButton';
26-
import BuildIcon from '@mui/icons-material/Build';
2721
import Main from '@/components/layout/Main';
2822
import { PaddedContent } from '@/components/layout';
29-
import { Dashboard, MapOutlined } from '@mui/icons-material';
23+
import { Navigation } from '@/components/layout/Navigation';
24+
import NavigationConfiguration from '@/app/navigation';
3025

3126
export const metadata = {
3227
title: 'Pelican Cache',
@@ -39,18 +34,10 @@ export default function RootLayout({
3934
children: React.ReactNode;
4035
}) {
4136
return (
42-
<Box display={'flex'} flexDirection={'row'}>
43-
<Sidebar>
44-
<ButtonLink title={'Cache'} href={'/cache/'}>
45-
<Dashboard />
46-
</ButtonLink>
47-
<ButtonLink title={'Config'} href={'/config/'}>
48-
<BuildIcon />
49-
</ButtonLink>
50-
</Sidebar>
37+
<Navigation config={NavigationConfiguration['cache']}>
5138
<Main>
5239
<PaddedContent>{children}</PaddedContent>
5340
</Main>
54-
</Box>
41+
</Navigation>
5542
);
5643
}

0 commit comments

Comments
 (0)