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%"]
};
export default ({ layoutRef, ...props }) => {
const Header = ({ layoutRef, ...props }) => {
const { colorMode, toggleColorMode } = useColorMode();
const { web } = useConfig();
const { mediaSize } = useMedia();
@@ -175,3 +175,7 @@ export default ({ layoutRef, ...props }) => {
</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 { googleFontUrl } from "~/util";
export default () => {
const Meta = () => {
const config = useConfig();
const theme = useTheme();
const [location, setLocation] = useState({});
@@ -30,15 +30,19 @@ export default () => {
const author = config?.org_name || "Matt Love, matt@hyperglass.io";
const language = config?.language || "en";
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 ogImageHeight = config?.web.opengraph.height || null;
const ogImageWidth = config?.web.opengraph.width || null;
const primaryFont = googleFontUrl(theme.fonts.body);
const monoFont = googleFontUrl(theme.fonts.mono);
useEffect(() => {
if (typeof window !== undefined && location === {}) {
setLocation(window.location);
});
}
}, [location]);
return (
<Head>
<title>{title}</title>
@@ -65,3 +69,7 @@ export default () => {
</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 { FiChevronLeft } from "react-icons/fi";
export default React.forwardRef(({ isSubmitting, onClick }, ref) => (
const ResetButton = React.forwardRef(({ isSubmitting, onClick }, ref) => (
<Button
ref={ref}
aria-label="Reset Form"
@@ -14,3 +14,6 @@ export default React.forwardRef(({ isSubmitting, onClick }, ref) => (
<FiChevronLeft size={24} />
</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" },
initial: { 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 titleMargin = { true: 2, false: 0 };
const textAlignment = { false: ["right", "center"], true: ["left", "center"] };
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>
</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}>
<Textfit mode="single" max={mediaSize === "sm" ? 13 : 25}>
{text}
</Textfit>
</Heading>
));
)
);
const AnimatedSubtitle = motion.custom(SubtitleOnly);
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}>
<TitleOnly text={text.title} showSubtitle={showSubtitle} />
</Textfit>
@@ -57,7 +68,12 @@ const Logo = ({ text, logo, showSubtitle }) => {
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>
{showSubtitle && (
<AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} />
@@ -69,17 +85,27 @@ const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
const All = ({ text, logo, mediaSize, 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 = {
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 { mediaSize } = useMedia();
const titleMode = web.text.title_mode;
@@ -105,3 +131,6 @@ export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
</Button>
);
});
Title.displayName = "Title";
export default Title;