Skip to content

Commit

Permalink
Merge pull request #1815 from CannonLock/responsive
Browse files Browse the repository at this point in the history 
Make website mobile friendly
  • Loading branch information
@CannonLock
CannonLock authored Jan 10, 2025
2 parents b74e120 + 5583f87 commit 5f9d427
Show file tree
Hide file tree
Showing 41 changed files with 1,170 additions and 517 deletions.
64 changes: 24 additions & 40 deletions web_ui/frontend/app/(landing)/page.tsx
View file
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
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
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
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
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
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

0 comments on commit 5f9d427

Please sign in to comment.