mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix Microsoft Edge compatibility

Browse Source
This commit is contained in:
checktheroads
2020-05-02 13:38:00 -07:00
parent b2de8a71ac
commit 51d3804d07
4 changed files with 186 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
hyperglass/ui/components/Header.js
View File

@@ -61,7 +61,7 @@ const widthMap = {
all: ["90%", "90%", "25%", "25%"] all: ["90%", "90%", "25%", "25%"]
}; };
export default ({ layoutRef, ...props }) => { const Header = ({ layoutRef, ...props }) => {
const { colorMode, toggleColorMode } = useColorMode(); const { colorMode, toggleColorMode } = useColorMode();
const { web } = useConfig(); const { web } = useConfig();
const { mediaSize } = useMedia(); const { mediaSize } = useMedia();
@@ -175,3 +175,7 @@ export default ({ layoutRef, ...props }) => {
</Flex> </Flex>
); );
}; };
Header.displayName = "Header";
export default Header;

14
hyperglass/ui/components/Meta.js
View File

@@ -4,7 +4,7 @@ import { useTheme } from "@chakra-ui/core";
import useConfig from "~/components/HyperglassProvider"; import useConfig from "~/components/HyperglassProvider";
import { googleFontUrl } from "~/util"; import { googleFontUrl } from "~/util";
export default () => { const Meta = () => {
const config = useConfig(); const config = useConfig();
const theme = useTheme(); const theme = useTheme();
const [location, setLocation] = useState({}); const [location, setLocation] = useState({});
@@ -30,15 +30,19 @@ export default () => {
const author = config?.org_name || "Matt Love, matt@hyperglass.io"; const author = config?.org_name || "Matt Love, matt@hyperglass.io";
const language = config?.language || "en"; const language = config?.language || "en";
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const copyright = config ? `${currentYear} ${config.org_name}` : `${currentYear} hyperglass`; const copyright = config
? `${currentYear} ${config.org_name}`
: `${currentYear} hyperglass`;
const ogImage = config?.web.opengraph.image || null; const ogImage = config?.web.opengraph.image || null;
const ogImageHeight = config?.web.opengraph.height || null; const ogImageHeight = config?.web.opengraph.height || null;
const ogImageWidth = config?.web.opengraph.width || null; const ogImageWidth = config?.web.opengraph.width || null;
const primaryFont = googleFontUrl(theme.fonts.body); const primaryFont = googleFontUrl(theme.fonts.body);
const monoFont = googleFontUrl(theme.fonts.mono); const monoFont = googleFontUrl(theme.fonts.mono);
useEffect(() => { useEffect(() => {
if (typeof window !== undefined && location === {}) {
setLocation(window.location); setLocation(window.location);
}); }
}, [location]);
return ( return (
<Head> <Head>
<title>{title}</title> <title>{title}</title>
@@ -65,3 +69,7 @@ export default () => {
</Head> </Head>
); );
}; };
Meta.displayName = "Meta";
export default Meta;

5
hyperglass/ui/components/ResetButton.js
View File

@@ -2,7 +2,7 @@ import React from "react";
import { Button } from "@chakra-ui/core"; import { Button } from "@chakra-ui/core";
import { FiChevronLeft } from "react-icons/fi"; import { FiChevronLeft } from "react-icons/fi";
export default React.forwardRef(({ isSubmitting, onClick }, ref) => ( const ResetButton = React.forwardRef(({ isSubmitting, onClick }, ref) => (
<Button <Button
ref={ref} ref={ref}
aria-label="Reset Form" aria-label="Reset Form"
@@ -14,3 +14,6 @@ export default React.forwardRef(({ isSubmitting, onClick }, ref) => (
<FiChevronLeft size={24} /> <FiChevronLeft size={24} />
</Button> </Button>
)); ));
ResetButton.displayName = "ResetButton";
export default ResetButton;

49
hyperglass/ui/components/Title.js
View File

@@ -9,30 +9,41 @@ const subtitleAnimation = {
transition: { duration: 0.2, type: "tween" }, transition: { duration: 0.2, type: "tween" },
initial: { opacity: 1, scale: 1 }, initial: { opacity: 1, scale: 1 },
animate: { opacity: 1, scale: 1 }, animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.3 }, exit: { opacity: 0, scale: 0.3 }
}; };
const titleSize = { true: "2xl", false: "lg" }; const titleSize = { true: "2xl", false: "lg" };
const titleMargin = { true: 2, false: 0 }; const titleMargin = { true: 2, false: 0 };
const textAlignment = { false: ["right", "center"], true: ["left", "center"] }; const textAlignment = { false: ["right", "center"], true: ["left", "center"] };
const TitleOnly = ({ text, showSubtitle }) => ( const TitleOnly = ({ text, showSubtitle }) => (
<Heading as="h1" mb={titleMargin[showSubtitle]} size={titleSize[showSubtitle]}> <Heading
as="h1"
mb={titleMargin[showSubtitle]}
size={titleSize[showSubtitle]}
>
<Textfit mode="single">{text}</Textfit> <Textfit mode="single">{text}</Textfit>
</Heading> </Heading>
); );
const SubtitleOnly = React.forwardRef(({ text, mediaSize, size = "md", ...props }, ref) => ( const SubtitleOnly = React.forwardRef(
({ text, mediaSize, size = "md", ...props }, ref) => (
<Heading ref={ref} as="h3" size={size} {...props}> <Heading ref={ref} as="h3" size={size} {...props}>
<Textfit mode="single" max={mediaSize === "sm" ? 13 : 25}> <Textfit mode="single" max={mediaSize === "sm" ? 13 : 25}>
{text} {text}
</Textfit> </Textfit>
</Heading> </Heading>
)); )
);
const AnimatedSubtitle = motion.custom(SubtitleOnly); const AnimatedSubtitle = motion.custom(SubtitleOnly);
const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => ( const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
<Stack spacing={2} maxW="100%" textAlign={textAlignment[showSubtitle]} {...props}> <Stack
spacing={2}
maxW="100%"
textAlign={textAlignment[showSubtitle]}
{...props}
>
<Textfit mode="single" max={20}> <Textfit mode="single" max={20}>
<TitleOnly text={text.title} showSubtitle={showSubtitle} /> <TitleOnly text={text.title} showSubtitle={showSubtitle} />
</Textfit> </Textfit>
@@ -57,7 +68,12 @@ const Logo = ({ text, logo, showSubtitle }) => {
const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => ( const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
<> <>
<Logo text={text} logo={logo} showSubtitle={showSubtitle} mediaSize={mediaSize} /> <Logo
text={text}
logo={logo}
showSubtitle={showSubtitle}
mediaSize={mediaSize}
/>
<AnimatePresence> <AnimatePresence>
{showSubtitle && ( {showSubtitle && (
<AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} /> <AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} />
@@ -69,17 +85,27 @@ const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
const All = ({ text, logo, mediaSize, showSubtitle }) => ( const All = ({ text, logo, mediaSize, showSubtitle }) => (
<> <>
<Logo text={text} logo={logo} showSubtitle={showSubtitle} /> <Logo text={text} logo={logo} showSubtitle={showSubtitle} />
<TextOnly mediaSize={mediaSize} showSubtitle={showSubtitle} mt={2} text={text} /> <TextOnly
mediaSize={mediaSize}
showSubtitle={showSubtitle}
mt={2}
text={text}
/>
</> </>
); );
const modeMap = { text_only: TextOnly, logo_only: Logo, logo_subtitle: LogoSubtitle, all: All }; const modeMap = {
text_only: TextOnly,
logo_only: Logo,
logo_subtitle: LogoSubtitle,
all: All
};
const justifyMap = { const justifyMap = {
true: ["flex-end", "center", "center", "center"], true: ["flex-end", "center", "center", "center"],
false: ["flex-start", "center", "center", "center"], false: ["flex-start", "center", "center", "center"]
}; };
export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => { const Title = React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
const { web } = useConfig(); const { web } = useConfig();
const { mediaSize } = useMedia(); const { mediaSize } = useMedia();
const titleMode = web.text.title_mode; const titleMode = web.text.title_mode;
@@ -105,3 +131,6 @@ export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
</Button> </Button>
); );
}); });
Title.displayName = "Title";
export default Title;