Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 16:40:03 +02: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}
href={props.href}
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
? "text-dropdown-highlight hover:text-dropdown-highlightHover"
: "text-dropdown-text hover:text-white",
@ -72,7 +72,7 @@ function CircleDropdownLink(props: { icon: Icons; href: string }) {
return (
<GoToLink
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} />
</GoToLink>
@ -100,12 +100,18 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
}, []);
const toggleOpen = useCallback(() => {
console.log("yay");
setOpen((s) => !s);
}, []);
return (
<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}
</div>
<Transition animation="slide-down" show={open}>

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

@ -14,7 +14,7 @@ function FooterLink(props: {
<a
href={props.href}
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"
>
<Icon icon={props.icon} className="text-2xl" />
@ -50,7 +50,7 @@ export function Footer() {
</h3>
<p className="mt-3">{t("footer.legal.disclaimerText")}</p>
</div>
<div className="space-x-[2rem]">
<div className="space-x-[0.5rem] -ml-3">
<FooterLink icon={Icons.GITHUB} href={conf().GITHUB_LINK}>
{t("footer.links.github")}
</FooterLink>
@ -61,7 +61,7 @@ export function Footer() {
<Dmca />
</div>
</div>
<div className="hidden items-center justify-end md:flex">
<div className="hidden items-center justify-end md:flex -mr-3">
<Dmca />
</div>
</WideContainer>

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

@ -65,14 +65,14 @@ export function Navigation(props: NavigationProps) {
</div>
<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">
<Link className="block" to="/">
<Link className="block tabbable rounded-full" to="/">
<BrandPill clickable />
</Link>
<a
href={conf().DISCORD_LINK}
target="_blank"
rel="noreferrer"
className="text-xl text-white"
className="text-xl text-white tabbable rounded-full"
>
<IconPatch icon={Icons.DISCORD} clickable downsized />
</a>
@ -80,7 +80,7 @@ export function Navigation(props: NavigationProps) {
href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
className="text-xl text-white"
className="text-xl text-white tabbable rounded-full"
>
<IconPatch icon={Icons.GITHUB} clickable downsized />
</a>

5
src/setup/index.css
View File

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