System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 22:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1219 from hackclub/cjdenio/add-scroll-snap-to-projects-gallery

Browse source 
Add scroll-snapping to projects gallery
This commit is contained in:
Caleb Denio 2024-06-10 16:46:32 +00:00 • committed by GitHub
commit 67425da714
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/slack/project.js
View file

@ -16,7 +16,8 @@ export default function Project({ title, description, color, img, itemId }) {
transformOrigin: 'center',
mr: 16,
// this is v janky please ignore, thank you.
ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`]
ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`],
scrollSnapAlign: 'center'
}}
itemId={itemId}
>

3
pages/slack.js
View file

@ -27,6 +27,7 @@ const SlackPage = () => {
{`
.react-horizontal-scrolling-menu--scroll-container {
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
@ -97,7 +98,7 @@ const SlackPage = () => {
}}
>
<Box onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
<ScrollMenu Footer={Arrows} transitionDuration={900}>
<ScrollMenu Footer={Arrows} transitionBehavior="smooth" noPolyfill>
{projects.map((project, i) => (
<Project
title={project.title}