aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-08 08:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix the modals scroll functionality

Browse Source 
switch modals scroll from internal to be the same as a body scroll
This commit is contained in:
=Mtg_Dev
2021-12-18 15:17:44 +02:00
parent c006deeadf
commit 089e3af154
7 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@@ -24,6 +24,7 @@
"framer-motion": "^5.3.0",
"graphql": "^16.0.1",
"invoices": "^2.0.2",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"prisma": "3.5.0",
"react": "^17.0.2",
@@ -19885,6 +19886,7 @@
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"node_modules/lodash.get": {
@@ -68360,6 +68362,7 @@
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.get": {

1
package.json
View File

@@ -20,6 +20,7 @@
"framer-motion": "^5.3.0",
"graphql": "^16.0.1",
"invoices": "^2.0.2",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"prisma": "3.5.0",
"react": "^17.0.2",

2
src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx
View File

@@ -41,7 +41,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
useEffect(() => {
const listener = _throttle(() => {
setCarouselItmsCnt(calcNumItems());
}, 1000);
}, 250);
window.addEventListener('resize', listener)
return () => {

10
src/Components/Project/ProjectCard.tsx
View File

@@ -87,7 +87,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
initial='initial'
animate="animate"
exit='exit'
className="modal-card max-w-[710px] max-h-[80vh]"
className="modal-card max-w-[710px]"
>
<div className="relative h-[80px] lg:h-[152px]">
@@ -131,16 +131,16 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
<h3 className="text-h5 font-bold mb-16">Screenshots</h3>
<div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
<div className="w-full relative pt-[56%]">
<div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
<div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
</div>
<div className="w-full relative pt-[56%]">
<div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
<div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
</div>
<div className="w-full relative pt-[56%]">
<div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
<div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
</div>
<div className="w-full relative pt-[56%]">
<div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
<div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
</div>
</div>
</div>

15
src/Components/Shared/Modal/Modal.tsx
View File

@@ -16,14 +16,19 @@ export default function Modal({ onClose, children, ...props }: Props) {
initial={false}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className='w-screen h-full fixed inset-0 py-32 px-16 md:py-64 flex flex-col justify-center items-center overflow-x-hidden overflow-y-hidden no-scrollbar'
className='fixed w-screen h-screen items-center overflow-x-hidden no-scrollbar'
{...props}
>
<div
className="w-screen h-full bg-gray-300 bg-opacity-50 absolute inset-0"
onClick={onClose}
></div>
{children}
className='w-screen min-h-screen relative flex flex-col justify-center items-center py-32 px-16 md:py-64 overflow-x-hidden no-scrollbar'
>
<div
className="absolute w-full h-full top-0 left-0 bg-gray-300 bg-opacity-50 "
onClick={onClose}
></div>
{children}
</div>
</motion.div>
)
}

2
src/Components/Shared/ModalsContainer/ModalsContainer.tsx
View File

@@ -101,7 +101,7 @@ export default function ModalsContainer() {
<AnimatePresence exitBeforeEnter>
{isOpen &&
<motion.div
className="w-screen h-scree fixed inset-0"
className="w-screen fixed inset-0 overflow-x-hidden"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{

11
src/index.css
View File

@@ -36,7 +36,7 @@
}
.modal-card {
@apply rounded-[40px] bg-gray-50 overflow-y-scroll w-full max-w-[600px] shadow-2xl z-10;
@apply rounded-[40px] bg-gray-50 overflow-hidden w-full max-w-[600px] shadow-2xl z-10;
}
}
@@ -50,7 +50,14 @@ svg {
/* width */
::-webkit-scrollbar {
width: 12px;
width: 4px;
}
@media screen and (min-width: 668px) {
/* width */
::-webkit-scrollbar {
width: 12px;
}
}
/* Track */