Skip to content

O
order-management-react
Commit 7cde4903 authored by Shanelle Valencia's avatar Shanelle Valencia
Browse files
Options

[AFP-98] 💄 Set footer to sticky [@svalencia]

parent 2d0ba0a3
Show whitespace changes
Inline Side-by-side
Showing with 62 additions and 27 deletions
src/index.css
View file @ 7cde4903
...@@ -15,6 +15,22 @@ code { ...@@ -15,6 +15,22 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
} }
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
min-height: calc(100vh - 70px);
}
/* homepage */ /* homepage */
.homepage { .homepage {
...@@ -62,6 +78,10 @@ code { ...@@ -62,6 +78,10 @@ code {
/* body */ /* body */
.content {
flex: 1 0 auto;
}
.body-div { .body-div {
padding-top: 50px; padding-top: 50px;
} }
...@@ -84,7 +104,7 @@ code { ...@@ -84,7 +104,7 @@ code {
} }
.table-div { .table-div {
padding: 150px; padding: 120px;
padding-top: 20px; padding-top: 20px;
} }
...@@ -115,7 +135,7 @@ code { ...@@ -115,7 +135,7 @@ code {
.account { .account {
padding: 250px 0; padding: 50px 0;
} }
...@@ -123,6 +143,10 @@ code { ...@@ -123,6 +143,10 @@ code {
/* footer */ /* footer */
.footer { .footer {
padding: 10px 0; padding: 5px 0;
border-top: 1.5px solid orange; /* border-top: 1.5px solid orange; */
background-color: rgba(253, 165, 0, 0.404);
flex-shrink: 0;
font-size: 12px;
/* height: 50px; */
} }
\ No newline at end of file
src/pages/AccountPage.tsx
View file @ 7cde4903
import { Box, Avatar, Center } from '@chakra-ui/react' import { Box, Avatar, Center, VStack, StackDivider, Spacer, Flex } from '@chakra-ui/react'
import {useGoogleAuth} from 'hooks' import {useGoogleAuth} from 'hooks'
const AccountPage = () => { const AccountPage = () => {
const { manager } = useGoogleAuth(); const { manager } = useGoogleAuth();
return ( return (
<Center className="account"> <Center className="account">
<Box> <Flex>
<Box> <Box w="170px" h="10">
<Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" /> <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
</Box> </Box>
<Box> <Spacer />
<Box w="270px" >
<VStack
divider={<StackDivider borderColor="gray.200" />}
spacing={4}
align="stretch"
>
<Box h="40px" bg="yellow.200">
Email: {manager.email} Email: {manager.email}
</Box> </Box>
<Box> <Box h="40px" bg="tomato">
First Name: {manager.firstName} First Name: {manager.firstName}
</Box> </Box>
<Box> <Box h="40px" bg="pink.100">
Last Name: {manager.lastName} Last Name: {manager.lastName}
</Box> </Box>
</VStack>
</Box> </Box>
</Flex>
</Center> </Center>
) )
} }
......
src/router/MainRouter.tsx
View file @ 7cde4903
...@@ -11,8 +11,9 @@ const MainRouter: React.FC = () => { ...@@ -11,8 +11,9 @@ const MainRouter: React.FC = () => {
<StyleProvider> <StyleProvider>
<BrowserRouter> <BrowserRouter>
<GoogleAuthProvider> <GoogleAuthProvider>
<body>
<Nav /> <Nav />
<main> <main className="content">
<Switch> <Switch>
<PrivateRoute path="/account" component={AccountPage} /> <PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={HomePage} /> <PublicRoute exact path="/" component={HomePage} />
...@@ -22,6 +23,7 @@ const MainRouter: React.FC = () => { ...@@ -22,6 +23,7 @@ const MainRouter: React.FC = () => {
</Switch> </Switch>
</main> </main>
<Footer /> <Footer />
</body>
</GoogleAuthProvider> </GoogleAuthProvider>
</BrowserRouter> </BrowserRouter>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment