Skip to content

Commit

Permalink
layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@MooKorea
MooKorea committed Aug 29, 2023
1 parent 7cfba48 commit c27302d
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 90 deletions.
13 changes: 7 additions & 6 deletions src/assets/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,14 @@ export default function Navbar() {

const [isOpened, setIsOpened] = useState(false);

const handleDropDownState = (e) => {
if (isOpened && !e.target.closest(".collapse-button")) {
setIsOpened(false);
}
};


useEffect(() => {
const handleDropDownState = (e) => {
// console.log(e.target)
if (isOpened && !e.target.closest(".collapse-button")) {
setIsOpened(false);
}
};
window.addEventListener("click", handleDropDownState);
return () => window.removeEventListener("click", handleDropDownState);
}, []);
Expand Down
193 changes: 112 additions & 81 deletions src/assets/pages/features/Section.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import parse from "html-react-parser";
import { motion, AnimatePresence } from "framer-motion";
import { motion, AnimatePresence, useAnimation } from "framer-motion";
import useMeasure from "react-use-measure";

export default function Section({ data }) {
const [carousel, setCarousel] = useState([]);
const [images, setImages] = useState([]);
const [content, setContent] = useState();
const [current, setCurrent] = useState(0);
const [isFullScreen, setIsFullScreen] = useState(false);
const [emptyContainerHeight, setEmptyContainerHeight] = useState(0);

useEffect(() => {
setContent(parse(data, parseText));
Expand Down Expand Up @@ -47,101 +49,130 @@ export default function Section({ data }) {
}
};

const [isMissingImage, setIsMissingImage] = useState(false)
const [isMissingImage, setIsMissingImage] = useState(false);
const [direction, setDirection] = useState("100%");
const handleSlide = (add) => {
setIsMissingImage(false)
setIsMissingImage(false);
setCurrent((prev) => (prev + add) % carousel.length);
add === 1 ? setDirection("100%") : setDirection("-100%");
};

let [ref, { height }] = useMeasure();
let containerRef = useRef();

const controls = useAnimation();
const handleFullScreen = () => {
setEmptyContainerHeight(containerRef.current.offsetHeight);
controls.set({ opacity: 0 });
controls.start({ opacity: 1 });
setIsFullScreen(!isFullScreen);
};

// useEffect(() => {
// console.log(containerRef.current.offsetHeight)
// }, [emptyContainerHeight])

return (
<>
<div className="feature-summary">{content}</div>
<div className="carousel-container">
{carousel?.length > 1 && (
<div className="buttons">
<div className="left" onClick={() => handleSlide(carousel.length - 1)}>
<svg
id="a"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64"
<div
className="carousel-container"
style={isFullScreen ? { height: emptyContainerHeight } : null}
>
<motion.div
animate={controls}
ref={containerRef}
className={isFullScreen ? "carousel-fit" : null}
>
{carousel?.length > 1 && (
<div className="buttons">
<div
className={isFullScreen ? "left fullscreen-btn" : "left"}
onClick={() => handleSlide(carousel.length - 1)}
>
<path
d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
fill="#fff"
stroke="#000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="7"
/>
</svg>
</div>
<div className="right" onClick={() => handleSlide(1)}>
<svg
id="a"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64"
<svg
id="a"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64"
>
<path
d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
fill="#fff"
stroke="#000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="7"
/>
</svg>
</div>
<div
className={isFullScreen ? "right fullscreen-btn" : "right"}
onClick={() => handleSlide(1)}
>
<path
d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
fill="#fff"
stroke="#000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="7"
/>
</svg>
</div>
</div>
)}
<div className="carousel">
<AnimatePresence>
<div className="image-container">
{isMissingImage && <div>Image missing</div>}
<motion.img
onError={() => setIsMissingImage(true)}
className="featured-image"
src={`/Features${images[current]?.src}`}
alt={images[current]?.alt}
key={current}
initial={{ x: direction, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ ease: [0, 0.89, 0.08, 1], opacity: { duration: 0.3 } }}
/>
<svg
id="a"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64"
>
<path
d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
fill="#fff"
stroke="#000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="7"
/>
</svg>
</div>
</div>
<motion.div animate={{ height }}>
<div ref={ref}>
{carousel[0] &&
carousel[current]?.map((e, i) => {
return (
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
{captionParse(e)}
</motion.span>
);
})}
)}
<div className="carousel">
<AnimatePresence>
<div className="image-container">
{isMissingImage && <div>Image missing</div>}
<motion.img
onError={() => setIsMissingImage(true)}
onClick={() => handleFullScreen()}
className="featured-image"
src={`/Features${images[current]?.src}`}
alt={images[current]?.alt}
key={current}
initial={{ x: direction, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ ease: [0, 0.89, 0.08, 1], opacity: { duration: 0.3 } }}
/>
</div>
</motion.div>
</AnimatePresence>
<div className="dots">
{carousel[0] &&
carousel?.map((e, i) => {
return <div key={i} className={current === i ? "active" : ""}></div>;
})}
<motion.div animate={{ height }}>
<div ref={ref}>
{carousel[0] &&
carousel[current]?.map((e, i) => {
return (
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
{captionParse(e)}
</motion.span>
);
})}
</div>
</motion.div>
</AnimatePresence>
<div className="dots">
{carousel[0] &&
carousel?.map((e, i) => {
return <div key={i} className={current === i ? "active" : ""}></div>;
})}
</div>
</div>
</div>
</motion.div>
</div>
<div className="line"></div>
</>
Expand Down
2 changes: 0 additions & 2 deletions src/assets/styles/documentation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
@media (min-width: 1200px) {
width: 760px;
}
width: calc(100vw - $documentation-sidebar-width - 8em);
background-color: rgb(228, 228, 228);
code {
font-family: "Courier New", Courier, monospace;
Expand All @@ -40,7 +39,6 @@
@media (min-width: 1200px) {
width: 780px;
}
// width: calc(100vw - $documentation-sidebar-width - 4em);
width: calc(100vw - 4em);
&:hover {
cursor: zoom-in;
Expand Down
31 changes: 30 additions & 1 deletion src/assets/styles/features.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ main.features {
position: relative;
left: 0;
transform: translate(-50%, 0%);
&:hover {
cursor:zoom-in;
}
}

.carousel-container {
Expand All @@ -53,6 +56,21 @@ main.features {
margin-block: 2em;
}

.carousel-fit {
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(221, 221, 221, 0.781);
text-shadow: rgb(255, 255, 255) 0px 0 5px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: fixed;
}

.carousel {
padding-block: 2em;
margin-block: 2em;
Expand All @@ -78,14 +96,14 @@ main.features {
width: 60px;
height: 60px;
top: 210px;
left: 0;
transform: translate(-50%, -50%);
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px rgb(196, 196, 196);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
svg {
width: 35px;
height: 35px;
Expand All @@ -102,12 +120,23 @@ main.features {
}

.right {
left: auto;
right: 0;
transform: translate(50%, -50%);
svg {
transform: translateX(2px);
}
}

.fullscreen-btn {
top: 50%;
left: 50px;
}

.right.fullscreen-btn {
left: auto;
right: 50px;
}
}

.dots {
Expand Down

0 comments on commit c27302d

Please sign in to comment.