Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-09-12 20:06:18 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Redesign: Fix mobile navigation background colour (#40354)

Browse Source
This commit is contained in:
diondiondion
2026-09-02 09:11:03 +00:00
committed by GitHub
parent 2dc35e5572
commit 6b17da988c
5 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
View File

@@ -13,10 +13,10 @@
padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
margin-bottom: var(--half-bottom-spacing);
background: var(--color-bg-blend);
background: var(--navigation-background-color);
&::after {
@include mixins.scroll-gradient(top, var(--color-bg-blend));
@include mixins.scroll-gradient(top, var(--navigation-background-color));
opacity: 0;
transition: opacity ease 250ms;

8
app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
View File

@@ -70,9 +70,10 @@ function useFollowedHashtags() {
return { followedHashtags: tags };
}
export const RedesignNavigationPanel: React.FC<{ siteName?: string }> = ({
siteName,
}) => {
export const RedesignNavigationPanel: React.FC<{
siteName?: string;
mode?: 'static' | 'slide-out';
}> = ({ siteName, mode = 'static' }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { signedIn } = useIdentity();
@@ -101,6 +102,7 @@ export const RedesignNavigationPanel: React.FC<{ siteName?: string }> = ({
return (
<nav
className={classes.root}
data-mode={mode}
aria-label={intl.formatMessage(messages.main)}
>
{topSensor}

2
app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
View File

@@ -216,7 +216,7 @@ const SlideOutNavigation: React.FC = () => {
ref={overlayRef}
>
<animated.div className={classes.slideOut} {...bind()} style={{ x }}>
<RedesignNavigationPanel />
<RedesignNavigationPanel mode='slide-out' />
</animated.div>
</div>
);

2
app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
View File

@@ -35,7 +35,7 @@
}
@media (width < variables.$mobile-menu-breakpoint) {
min-height: 40px;
min-height: 48px;
}
&:hover,

10
app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
View File

@@ -15,6 +15,12 @@
--footer-height: 200px;
scroll-padding-block: var(--header-height) var(--footer-height);
--navigation-background-color: var(--color-bg-blend);
&[data-mode='slide-out'] {
--navigation-background-color: var(--color-bg-primary);
}
}
.list {
@@ -28,10 +34,10 @@
margin-top: auto;
padding: var(--space-xl);
padding-top: var(--space-2xs);
background-color: var(--color-bg-blend);
background-color: var(--navigation-background-color);
&::before {
@include mixins.scroll-gradient(bottom, var(--color-bg-blend));
@include mixins.scroll-gradient(bottom, var(--navigation-background-color));
opacity: 0;
transition: opacity ease 250ms;