Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make website mobile friendly #1815

Merged
merged 11 commits into from
Jan 10, 2025
Merged

Make website mobile friendly #1815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0ae9ead
Update Existing Navigation
CannonLock Dec 9, 2024
a64d414
Add AppBar Navigation
CannonLock Dec 11, 2024
65abb82
Make Config and Login Mobile Friendly
CannonLock Dec 12, 2024
1e134a6
Make Registry Mobile Friendly
CannonLock Dec 12, 2024
4a2237c
Make Initialization Mobile Friendly
CannonLock Dec 12, 2024
5034ba5
Make Origin Mobile Friendly
CannonLock Dec 12, 2024
7a934c8
Make Director Mobile Friendly
CannonLock Dec 12, 2024
31d4190
Linter Fixups
CannonLock Dec 12, 2024
efdba92
Add keys to iterated components
CannonLock Dec 16, 2024
06bd012
Merge upstream/main
CannonLock Dec 16, 2024
5583f87
JS linter
CannonLock Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 24 additions & 40 deletions web_ui/frontend/app/(landing)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,33 +19,21 @@
'use client';

import React, { useState, useEffect } from 'react';
import { Box, Container, Grid, Skeleton, Typography } from '@mui/material';
import {
Box,
Container,
Grid,
List,
ListItemButton,
ListItemText,
Skeleton,
Typography,
} from '@mui/material';
import Link from 'next/link';
import useSWR from 'swr';
import { getEnabledServers } from '@/helpers/util';
import { ServerType } from '@/index';

function TextCenteredBox({ text }: { text: string }) {
return (
<Box
sx={{
aspectRatio: 1,
width: '100%',
display: 'flex',
textTransform: 'capitalize',
bgcolor: 'primary.light',
borderRadius: '1rem',
}}
>
<Box m={'auto'}>
<Typography variant={'h4'} align={'center'}>
{text}
</Typography>
</Box>
</Box>
);
}

export default function Home() {
const { data: enabledServers, isLoading } = useSWR<ServerType[]>(
'getEnabledServers',
Expand All @@ -56,30 +44,26 @@ export default function Home() {
<Box width={'100%'} pt={5}>
<Container maxWidth={'xl'}>
<Typography pb={5} textAlign={'center'} variant={'h3'}>
Pelican Services
Active Pelican Services
</Typography>
<Grid container justifyContent={'center'} spacing={2}>
{isLoading && (
<Grid item xs={2}>
<Skeleton
variant={'rectangular'}
width={150}
height={150}
sx={{ borderRadius: 2 }}
/>
</Grid>
)}
<List>
{enabledServers &&
enabledServers.map((service) => {
return (
<Grid key={service} item xs={2}>
<Link href={`./${service}/`}>
<TextCenteredBox text={service} />
</Link>
</Grid>
<ListItemButton
key={service}
component={Link}
href={`./${service}/`}
sx={{ p: 0 }}
>
<ListItemText
primary={service}
sx={{ textAlign: 'center', textTransform: 'capitalize' }}
/>
</ListItemButton>
);
})}
</Grid>
</List>
</Container>
</Box>
);
Expand Down
4 changes: 2 additions & 2 deletions web_ui/frontend/app/(login)/components/CodeInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@ export default function CodeInput({
<TextField
inputProps={{
sx: {
width: '50px',
width: { xs: '30px', md: '50px' },
borderWidth: '3px',
fontSize: '3rem',
fontSize: { xs: '1.8rem', md: '3rem' },
textAlign: 'center',
padding: '.5rem',
backgroundColor: 'secondary.main',
Expand Down
12 changes: 5 additions & 7 deletions web_ui/frontend/app/(login)/components/PasswordInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,14 @@ export default function PasswordInput({
};

return (
<FormControl
sx={{ mt: 1, width: '50ch' }}
variant='outlined'
{...FormControlProps}
>
<FormControl sx={{ mt: 1 }} variant='outlined' {...FormControlProps}>
<TextField
label='Password'
label='Admin Password'
id='outlined-start-adornment'
size={'small'}
sx={{ m: 1, width: '50ch' }}
sx={{ m: 1 }}
autoComplete={'current-password'}
name={'password'}
type={showPassword ? 'text' : 'password'}
{...TextFieldProps}
InputProps={{
Expand Down
7 changes: 4 additions & 3 deletions web_ui/frontend/app/(login)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import { Box } from '@mui/material';

import { Header } from '@/components/layout/Header';
import { Main, PaddedContent } from '@/components/layout';

export const metadata = {
title: 'Pelican Login',
Expand All @@ -33,9 +34,9 @@ export default function RootLayout({
return (
<>
<Header text={'Pelican Platform'} />
<Box component={'main'} pt={'75px'} display={'flex'} minHeight={'100vh'}>
{children}
</Box>
<Main>
<PaddedContent>{children}</PaddedContent>
</Main>
</>
);
}
83 changes: 42 additions & 41 deletions web_ui/frontend/app/(login)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,8 @@ const AdminLogin = () => {
<form onSubmit={onSubmit} action='#'>
<Box display={'flex'} justifyContent={'center'}>
<PasswordInput
FormControlProps={{
sx: { width: '50%' },
}}
TextFieldProps={{
InputProps: {
sx: { width: '50%' },
onChange: (e) => {
setPassword(e.target.value);
},
Expand Down Expand Up @@ -143,15 +139,13 @@ const AdminLogin = () => {
) {
return (
<Box display={'flex'} flexDirection={'column'} justifyContent={'center'}>
<Box m={'auto'}>
<Button
size={'small'}
variant={'text'}
onClick={() => setToggled(!toggled)}
>
Server Admin Login
</Button>
</Box>
<Button
size={'small'}
variant={'text'}
onClick={() => setToggled(!toggled)}
>
Server Admin Login
</Button>
<Collapse in={toggled}>{LoginComponent}</Collapse>
</Box>
);
Expand Down Expand Up @@ -205,39 +199,46 @@ export default function Home() {
Login
</Typography>
<Box color={'grey'} mt={1} mb={2}>
<Typography textAlign={'center'} variant={'h6'} component={'p'}>
<Typography
variant={'h6'}
component={'p'}
sx={{
textAlign: 'center',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
Administer your Pelican Platform
</Typography>
</Box>
</Box>
<Box mx={'auto'}>
{serverIntersect &&
(serverIntersect.includes('registry') ||
serverIntersect.includes('origin') ||
serverIntersect.includes('cache') ||
serverIntersect.includes('director')) && (
<>
<Box display={'flex'} justifyContent={'center'} mb={1}>
<Button
size={'large'}
href={`/api/v1.0/auth/oauth/login?nextUrl=${returnUrl ? returnUrl : '/'}`}
variant={'contained'}
>
Login with OAuth
</Button>
</Box>
</>
)}
{serverIntersect && <AdminLogin />}
{!serverIntersect && (
<Skeleton
variant={'rectangular'}
height={90}
width={400}
sx={{ borderRadius: 2 }}
/>
{serverIntersect &&
(serverIntersect.includes('registry') ||
serverIntersect.includes('origin') ||
serverIntersect.includes('cache') ||
serverIntersect.includes('director')) && (
<>
<Box display={'flex'} justifyContent={'center'} mb={1}>
<Button
size={'large'}
href={`/api/v1.0/auth/oauth/login?nextUrl=${returnUrl ? returnUrl : '/'}`}
variant={'contained'}
>
Login with OAuth
</Button>
</Box>
</>
)}
</Box>
{serverIntersect && <AdminLogin />}
{!serverIntersect && (
<Skeleton
variant={'rectangular'}
height={90}
width={'100%'}
sx={{ borderRadius: 2 }}
/>
)}
</Box>
</>
);
Expand Down
23 changes: 5 additions & 18 deletions web_ui/frontend/app/cache/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,12 @@
*
***************************************************************/

import { Box, Tooltip } from '@mui/material';
import { Box } from '@mui/material';

import { ButtonLink, Sidebar } from '@/components/layout/Sidebar';
import Link from 'next/link';
import Image from 'next/image';
import PelicanLogo from '@/public/static/images/PelicanPlatformLogo_Icon.png';
import IconButton from '@mui/material/IconButton';
import BuildIcon from '@mui/icons-material/Build';
import Main from '@/components/layout/Main';
import { PaddedContent } from '@/components/layout';
import { Dashboard, MapOutlined } from '@mui/icons-material';
import { Navigation } from '@/components/layout/Navigation';
import NavigationConfiguration from '@/app/navigation';

export const metadata = {
title: 'Pelican Cache',
Expand All @@ -39,18 +34,10 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<Box display={'flex'} flexDirection={'row'}>
<Sidebar>
<ButtonLink title={'Cache'} href={'/cache/'}>
<Dashboard />
</ButtonLink>
<ButtonLink title={'Config'} href={'/config/'}>
<BuildIcon />
</ButtonLink>
</Sidebar>
<Navigation config={NavigationConfiguration['cache']}>
<Main>
<PaddedContent>{children}</PaddedContent>
</Main>
</Box>
</Navigation>
);
}
Loading
Loading