Skip to content

Fix movement on hover when only links. #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 8, 2025
Merged

Fix movement on hover when only links. #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .storybook/ThemeSwapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
}, [context.globals.themeMode]);

return (
<div style={{ backgroundColor: mode === "light" ? "#fafafa" : "#050505" }}>
<div style={{ backgroundColor: mode === "light" ? "#fafafaaa" : "#000a" }}>
{children}
</div>
);
Expand Down
22 changes: 17 additions & 5 deletions changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
Changelog
=========
SciReactUI Changelog
====================

[0.0.3] - 2024-01-27
[vNext] - date
--------------------

### Fixed
- Stopped flicker between themes when starting an app in dark mode.
- Footer links stopped from moving on hover when only showing links.
- Footer links now correctly center horizontally.

### Changed
- Footer links now align with copyright when there is no logo.


[v0.0.3] - 2024-01-27
--------------------

### Fixed
Expand All @@ -11,14 +23,14 @@ Changelog
- Return key now submits VisitInput (but that can be turned off).


[0.0.2] - 2024-01-20
[v0.0.2] - 2024-01-20
--------------------

### Fixed
- Not importing correctly in some external projects.


[0.0.1] - 2024-12-19
[v0.0.1] - 2024-12-19
--------------------
### Added
- Components added:
Expand Down
73 changes: 42 additions & 31 deletions src/components/Footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,28 @@ const meta: Meta<typeof Footer> = {
export default meta;
type Story = StoryObj<typeof meta>;

const footerLinks = [
<FooterLinks key="footer-links">
<FooterLink href="#TheMoon" key="the-moon">
The Moon
</FooterLink>
<FooterLink href="#Phobos" key="phobos">
Phobos
</FooterLink>
<FooterLink href="#Ganymede" key="ganymede">
Ganymede
</FooterLink>
<FooterLink href="#Titan" key="titan">
Titan
</FooterLink>
</FooterLinks>,
];

export const All: Story = {
args: {
logo: "theme",
copyright: "Company",
children: [
<FooterLinks key="footer-links">
<FooterLink href="#TheMoon" key="the-moon">
The Moon
</FooterLink>
<FooterLink href="#Phobos" key="phobos">
Phobos
</FooterLink>
<FooterLink href="#Ganymede" key="ganymede">
Ganymede
</FooterLink>
<FooterLink href="#Titan" key="titan">
Titan
</FooterLink>
</FooterLinks>,
],
children: footerLinks,
},
};

Expand All @@ -54,31 +56,40 @@ export const CopyrightAndLogo: Story = {
},
};

export const WithOneLink: Story = {
export const LinksAndCopyright: Story = {
args: {
copyright: "Company",
children: [
<FooterLinks key="footer-links">
<FooterLink href="#" key="first-footer-link">
Link one
</FooterLink>
</FooterLinks>,
],
children: footerLinks,
},
};

export const WithTwoLinks: Story = {
export const LinksOnly: Story = {
args: {
children: footerLinks,
},
};

export const LinksOnlyCentred: Story = {
args: {
copyright: "Company",
children: [
<FooterLinks key="footer-links">
<FooterLink href="#" key="first-footer-link">
Link one
<FooterLinks
key="footer-links"
style={{ float: "unset", textAlign: "center" }}
>
<FooterLink href="#TheMoon" key="the-moon">
The Moon
</FooterLink>
<FooterLink href="#" key="second-footer-link">
Link two
<FooterLink href="#Phobos" key="phobos">
Phobos
</FooterLink>
<FooterLink href="#Ganymede" key="ganymede">
Ganymede
</FooterLink>
<FooterLink href="#Titan" key="titan">
Titan
</FooterLink>
</FooterLinks>,
],
},
};
LinksOnlyCentred.storyName = "Links Only, Centred";
55 changes: 35 additions & 20 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
ImageColorSchemeSwitchType,
} from "./ImageColorSchemeSwitch";

interface FooterLinksProps {
interface FooterLinksProps extends React.HTMLProps<HTMLDivElement> {
children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
}

Expand All @@ -18,7 +18,7 @@ interface FooterProps extends React.HTMLProps<HTMLDivElement> {
children?: React.ReactElement | React.ReactElement[];
}

const FooterLinks = ({ children }: FooterLinksProps) => {
const FooterLinks = ({ children, ...props }: FooterLinksProps) => {
return (
<div
style={{
Expand All @@ -29,6 +29,7 @@ const FooterLinks = ({ children }: FooterLinksProps) => {
display: "flex",
flexWrap: "wrap",
}}
{...props}
>
{children}
</div>
Expand All @@ -48,7 +49,11 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
textDecoration: "none",
color: theme.palette.primary.contrastText,
marginLeft: "1.5rem",
marginBottom: "4px",
paddingBottom: "4px",
lineHeight: 1,
cursor: "pointer",
borderBottom: "solid transparent 4px",
}}
{...props}
>
Expand Down Expand Up @@ -80,35 +85,45 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
>
<Grid container>
<Grid
size={{ xs: 6, md: 8 }}
size={logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }}
style={{
alignContent: "center",
}}
>
{children}
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<div
style={{
float: "right",
paddingTop: "10px",
paddingRight: "15px",
textAlign: "right",
paddingLeft: "15px",
}}
>
{logo && <ImageColorSchemeSwitch image={logo} />}
{copyright ? (
<Typography
style={{
margin: 0,
color: theme.palette.primary.contrastText,
}}
>
{`Copyright © ${new Date().getFullYear()} ${copyright}`}
</Typography>
) : null}
{children}
</div>
</Grid>

{(logo || copyright) && (
<Grid size={{ xs: 6, md: 4 }}>
<div
style={{
float: "right",
paddingTop: "10px",
paddingRight: "15px",
textAlign: "right",
}}
>
{logo && <ImageColorSchemeSwitch image={logo} />}
{copyright && (
<Typography
style={{
margin: "0 0 10px 0",
color: theme.palette.primary.contrastText,
}}
>
{`Copyright © ${new Date().getFullYear()} ${copyright}`}
</Typography>
)}
</div>
</Grid>
)}
</Grid>
</footer>
);
Expand Down