update footer design, add links
notable layout change is that the text content will now try to center itself, and we push the buttons off to the right. we also needed to tweak the layout code a bit to get the buttons to feel centered with the top two lines, bc centering against the full block just feels wrong, they want to be top-y in terms of positioning, but still feel centered-y in terms of visual balance
This commit is contained in:
parent
34112b30df
commit
c52b5f0039
1 changed files with 51 additions and 9 deletions
|
@ -3,31 +3,51 @@ import {
|
|||
Box,
|
||||
IconButton,
|
||||
HStack,
|
||||
Link as ChakraLink,
|
||||
Tooltip,
|
||||
useColorMode,
|
||||
} from "@chakra-ui/core";
|
||||
import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
|
||||
import { SiGithub } from "react-icons/si";
|
||||
import { useRouteMatch } from "react-router-dom";
|
||||
|
||||
function GlobalFooter() {
|
||||
const classicDTIUrl = useClassicDTIUrl();
|
||||
|
||||
return (
|
||||
<Box as="footer" display="flex" alignItems="flex-start">
|
||||
<Box
|
||||
as="footer"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Box textAlign="center" fontSize="xs" opacity="0.75">
|
||||
// This empty box grows at the same rate as the box on the right, so
|
||||
// the middle box will be centered, if there's space!
|
||||
flex="1 0 0"
|
||||
/>
|
||||
<Box textAlign="center" fontSize="xs">
|
||||
<HStack spacing="4" justifyContent="center">
|
||||
<ChakraLink href="https://impress.openneo.net/terms">
|
||||
Terms of Use
|
||||
</ChakraLink>
|
||||
<ChakraLink href={classicDTIUrl}>Classic DTI</ChakraLink>
|
||||
</HStack>
|
||||
<Box as="p" opacity="0.75">
|
||||
Images © 2000–{new Date().getFullYear()} Neopets, Inc. All Rights
|
||||
Reserved. Used With Permission.
|
||||
</Box>
|
||||
</Box>
|
||||
<HStack
|
||||
flex="1 0 0"
|
||||
spacing="2"
|
||||
marginLeft="3"
|
||||
justifyContent="flex-end"
|
||||
opacity="0.75"
|
||||
transition="opacity 0.2s"
|
||||
_hover={{ opacity: "1" }}
|
||||
_focusWithin={{ opacity: "1" }}
|
||||
// This will center our content against the top two lines of text to
|
||||
// our left, which ends up feeling like the right visual balance, even
|
||||
// when the text wraps to 3 lines on mobile.
|
||||
// 2 lines at 1.5 line height = 3em.
|
||||
fontSize="xs"
|
||||
minHeight="3em"
|
||||
>
|
||||
<Tooltip label="Email">
|
||||
<IconButton
|
||||
|
@ -72,4 +92,26 @@ function ColorModeButton() {
|
|||
);
|
||||
}
|
||||
|
||||
function useClassicDTIUrl() {
|
||||
const itemPageMatch = useRouteMatch("/items/:itemId");
|
||||
const userItemsPageMatch = useRouteMatch("/user/:userId/items");
|
||||
const modelingPageMatch = useRouteMatch("/modeling");
|
||||
|
||||
if (itemPageMatch) {
|
||||
const { itemId } = itemPageMatch.params;
|
||||
return `https://impress.openneo.net/items/${itemId}`;
|
||||
}
|
||||
|
||||
if (userItemsPageMatch) {
|
||||
const { userId } = userItemsPageMatch.params;
|
||||
return `https://impress.openneo.net/user/${userId}/closet`;
|
||||
}
|
||||
|
||||
if (modelingPageMatch) {
|
||||
return "https://impress.openneo.net/modeling";
|
||||
}
|
||||
|
||||
return "https://impress.openneo.net/";
|
||||
}
|
||||
|
||||
export default GlobalFooter;
|
||||
|
|
Loading…
Reference in a new issue