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
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 27 deletions
src/index.css
View file @ 7cde4903
......@@ -15,6 +15,22 @@ code {
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 {
......@@ -62,6 +78,10 @@ code {
/* body */
.content {
flex: 1 0 auto;
}
.body-div {
padding-top: 50px;
}
......@@ -84,7 +104,7 @@ code {
}
.table-div {
padding: 150px;
padding: 120px;
padding-top: 20px;
}
......@@ -115,7 +135,7 @@ code {
.account {
padding: 250px 0;
padding: 50px 0;
}
......@@ -123,6 +143,10 @@ code {
/* footer */
.footer {
padding: 10px 0;
border-top: 1.5px solid orange;
padding: 5px 0;
/* 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'
const AccountPage = () => {
const { manager } = useGoogleAuth();
return (
<Center className="account">
<Box>
<Box>
<Flex>
<Box w="170px" h="10">
<Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
</Box>
<Box>
Email: {manager.email}
<Spacer />
<Box w="270px" >
<VStack
divider={<StackDivider borderColor="gray.200" />}
spacing={4}
align="stretch"
>
<Box h="40px" bg="yellow.200">
Email: {manager.email}
</Box>
<Box h="40px" bg="tomato">
First Name: {manager.firstName}
</Box>
<Box h="40px" bg="pink.100">
Last Name: {manager.lastName}
</Box>
</VStack>
</Box>
<Box>
First Name: {manager.firstName}
</Box>
<Box>
Last Name: {manager.lastName}
</Box>
</Box>
</Flex>
</Center>
)
}
......
src/router/MainRouter.tsx
View file @ 7cde4903
......@@ -11,17 +11,19 @@ const MainRouter: React.FC = () => {
<StyleProvider>
<BrowserRouter>
<GoogleAuthProvider>
<Nav />
<main>
<Switch>
<PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={HomePage} />
<PrivateRoute path="/orders/:id" component={OrderShowPage} />
<PrivateRoute path="/orders" component={OrderIndexPage} />
{/* <Route component={NotFoundPage} /> */}
</Switch>
</main>
<Footer />
<body>
<Nav />
<main className="content">
<Switch>
<PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={HomePage} />
<PrivateRoute path="/orders/:id" component={OrderShowPage} />
<PrivateRoute path="/orders" component={OrderIndexPage} />
{/* <Route component={NotFoundPage} /> */}
</Switch>
</main>
<Footer />
</body>
</GoogleAuthProvider>
</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