Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2025-01-26 10:05:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Tabbable styles in header & footer

Browse Source
This commit is contained in:
Jip Fr 2023-11-21 18:03:08 +01:00
parent 9c1195e131
commit d3184113cc
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/LinksDropdown.tsx
View File

@ -55,7 +55,7 @@ function DropdownLink(props: {
onClick={props.onClick} onClick={props.onClick}
href={props.href} href={props.href}
className={classNames( className={classNames(
"cursor-pointer flex gap-3 items-center m-4 font-medium transition-colors duration-100", "tabbable cursor-pointer flex gap-3 items-center m-3 p-1 rounded font-medium transition-colors duration-100",
props.highlight props.highlight
? "text-dropdown-highlight hover:text-dropdown-highlightHover" ? "text-dropdown-highlight hover:text-dropdown-highlightHover"
: "text-dropdown-text hover:text-white", : "text-dropdown-text hover:text-white",
@ -72,7 +72,7 @@ function CircleDropdownLink(props: { icon: Icons; href: string }) {
return ( return (
<GoToLink <GoToLink
href={props.href} href={props.href}
className="w-11 h-11 rounded-full bg-dropdown-contentBackground text-dropdown-text hover:text-white transition-colors duration-100 flex justify-center items-center" className="tabbable w-11 h-11 rounded-full bg-dropdown-contentBackground text-dropdown-text hover:text-white transition-colors duration-100 flex justify-center items-center"
> >
<Icon className="text-2xl" icon={props.icon} /> <Icon className="text-2xl" icon={props.icon} />
</GoToLink> </GoToLink>
@ -100,12 +100,18 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
}, []); }, []);
const toggleOpen = useCallback(() => { const toggleOpen = useCallback(() => {
console.log("yay");
setOpen((s) => !s); setOpen((s) => !s);
}, []); }, []);
return ( return (
<div className="relative is-dropdown"> <div className="relative is-dropdown">
<div className="cursor-pointer" onClick={toggleOpen}> <div
className="cursor-pointer tabbable rounded-full"
tabIndex={0}
onClick={toggleOpen}
onKeyUp={(evt) => evt.key === "Enter" && toggleOpen()}
>
{props.children} {props.children}
</div> </div>
<Transition animation="slide-down" show={open}> <Transition animation="slide-down" show={open}>

6
src/components/layout/Footer.tsx
View File

@ -14,7 +14,7 @@ function FooterLink(props: {
<a <a
href={props.href} href={props.href}
target="_blank" target="_blank"
className="inline-flex items-center space-x-3 transition-colors duration-200 hover:text-type-emphasis" className="tabbable rounded py-2 px-3 inline-flex items-center space-x-3 transition-colors duration-200 hover:text-type-emphasis"
rel="noreferrer" rel="noreferrer"
> >
<Icon icon={props.icon} className="text-2xl" /> <Icon icon={props.icon} className="text-2xl" />
@ -50,7 +50,7 @@ export function Footer() {
</h3> </h3>
<p className="mt-3">{t("footer.legal.disclaimerText")}</p> <p className="mt-3">{t("footer.legal.disclaimerText")}</p>
</div> </div>
<div className="space-x-[2rem]"> <div className="space-x-[0.5rem] -ml-3">
<FooterLink icon={Icons.GITHUB} href={conf().GITHUB_LINK}> <FooterLink icon={Icons.GITHUB} href={conf().GITHUB_LINK}>
{t("footer.links.github")} {t("footer.links.github")}
</FooterLink> </FooterLink>
@ -61,7 +61,7 @@ export function Footer() {
<Dmca /> <Dmca />
</div> </div>
</div> </div>
<div className="hidden items-center justify-end md:flex"> <div className="hidden items-center justify-end md:flex -mr-3">
<Dmca /> <Dmca />
</div> </div>
</WideContainer> </WideContainer>

6
src/components/layout/Navigation.tsx
View File

@ -65,14 +65,14 @@ export function Navigation(props: NavigationProps) {
</div> </div>
<div className="pointer-events-auto px-7 py-5 relative flex flex-1 items-center"> <div className="pointer-events-auto px-7 py-5 relative flex flex-1 items-center">
<div className="flex items-center flex-1 space-x-3"> <div className="flex items-center flex-1 space-x-3">
<Link className="block" to="/"> <Link className="block tabbable rounded-full" to="/">
<BrandPill clickable /> <BrandPill clickable />
</Link> </Link>
<a <a
href={conf().DISCORD_LINK} href={conf().DISCORD_LINK}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-xl text-white" className="text-xl text-white tabbable rounded-full"
> >
<IconPatch icon={Icons.DISCORD} clickable downsized /> <IconPatch icon={Icons.DISCORD} clickable downsized />
</a> </a>
@ -80,7 +80,7 @@ export function Navigation(props: NavigationProps) {
href={conf().GITHUB_LINK} href={conf().GITHUB_LINK}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-xl text-white" className="text-xl text-white tabbable rounded-full"
> >
<IconPatch icon={Icons.GITHUB} clickable downsized /> <IconPatch icon={Icons.GITHUB} clickable downsized />
</a> </a>

5
src/setup/index.css
View File

@ -213,4 +213,9 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
.grecaptcha-badge { .grecaptcha-badge {
display: none !important; display: none !important;
}
.tabbable:focus {
outline: 1px solid theme('colors.themePreview.primary');
box-shadow: 0 0 10px theme('colors.themePreview.secondary');
} }