Skip to content

Commit

Permalink
Merge branch 'current' into runleonarun-patch-15
Browse files Browse the repository at this point in the history
  • Loading branch information
mirnawong1 authored Jan 8, 2024
2 parents f458b3c + 465cf8f commit 0f57c4d
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 22 deletions.
2 changes: 1 addition & 1 deletion website/src/components/detailsToggle/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ useEffect(() => {
onMouseLeave={handleMouseLeave}
>
<span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span>&nbsp;
<span>{alt_header}</span>
<span className={styles.headerText}>{alt_header}</span>
{/* Visual disclaimer */}
<small className={styles.disclaimer}>Hover to view</small>
</span>
Expand Down
9 changes: 6 additions & 3 deletions website/src/components/detailsToggle/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
:local(.link) {
:local(.link) :local(.headerText) {
color: var(--ifm-link-color);
transition: background-color 0.3s; /* Smooth transition for background color */
text-decoration: none;
transition: text-decoration 0.3s; /* Smooth transition */
}

:local(.link:hover), :local(.link:focus) {
:local(.link:hover) :local(.headerText),
:local(.link:focus) :local(.headerText) {
text-decoration: underline;
cursor: pointer;
}
Expand All @@ -12,6 +14,7 @@
font-size: 0.8em;
color: #666;
margin-left: 10px; /* Adjust as needed */
text-decoration: none;
}

:local(.toggle) {
Expand Down
53 changes: 37 additions & 16 deletions website/src/components/faqs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import styles from './styles.module.css';
import { usePluginData } from '@docusaurus/useGlobalData';

function FAQ({ path, alt_header = null }) {

const [isOn, setOn] = useState(false);
const [filePath, setFilePath] = useState(path)
const [fileContent, setFileContent] = useState({})
const [filePath, setFilePath] = useState(path);
const [fileContent, setFileContent] = useState({});
const [hoverTimeout, setHoverTimeout] = useState(null);

// Get all faq file paths from plugin
const { faqFiles } = usePluginData('docusaurus-build-global-data-plugin');
Expand Down Expand Up @@ -37,24 +37,45 @@ function FAQ({ path, alt_header = null }) {
}
}, [filePath])

const toggleOn = function () {
setOn(!isOn);
const handleMouseEnter = () => {
setHoverTimeout(setTimeout(() => {
setOn(true);
}, 500));
};

const handleMouseLeave = () => {
if (!isOn) {
clearTimeout(hoverTimeout);
setOn(false);
}
};

useEffect(() => {
return () => {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
};
}, [hoverTimeout]);

const toggleOn = () => {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
setOn(!isOn);
};

return (
<div className='faqs'>
<div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<span className={styles.link} onClick={toggleOn}>
<span className={styles.toggle}
style={{
transform: isOn ? null : 'rotateX(180deg)'
}}>
</span >&nbsp;
<span>{alt_header || fileContent?.meta && fileContent.meta.title}</span>
</span >
<div style={{ display: (isOn ? 'block' : 'none') }} className={styles.body}>
{fileContent?.contents && fileContent.contents}
<span className={styles.toggle} style={{ transform: isOn ? 'rotateX(0deg)' : 'rotateX(180deg)' }}></span>
<span className={styles.headerText}>{alt_header || (fileContent?.meta && fileContent.meta.title)}</span>
<small className={styles.disclaimer}>Hover to view</small>
</span>
<div style={{ display: isOn ? 'block' : 'none' }} className={styles.body}>
{fileContent?.contents}
</div>
</div >
</div>
);
}

Expand Down
14 changes: 12 additions & 2 deletions website/src/components/faqs/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@

:local(.link) {
:local(.link) :local(.headerText) {
color: var(--ifm-link-color);
text-decoration: none;
transition: text-decoration 0.3s; /* Smooth transition */
}

:local(.link:hover) {
:local(.link:hover) :local(.headerText),
:local(.link:focus) :local(.headerText) {
text-decoration: underline;
cursor: pointer;
}
Expand All @@ -24,6 +27,13 @@
filter: invert(1);
}

:local(.disclaimer) {
font-size: 0.8em;
color: #666;
margin-left: 10px; /* Adjust as needed */
text-decoration: none;
}

:local(.body) {
margin-left: 2em;
margin-bottom: 10px;
Expand Down

0 comments on commit 0f57c4d

Please sign in to comment.