Start mobile changes
This commit is contained in:
parent
7f33bbdabd
commit
fa1ad02690
|
@ -45,7 +45,7 @@
|
||||||
|
|
||||||
.selectedMarker {
|
.selectedMarker {
|
||||||
background-color: var(--blue-2);
|
background-color: var(--blue-2);
|
||||||
width: 0.22rem;
|
width: calc(4rem / 16);
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -37,7 +37,7 @@ export const OrganizedContent: React.FC<Props> = ({
|
||||||
? headings[currentIndex + 1]
|
? headings[currentIndex + 1]
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
const isMobile = true;
|
const isMobile = false;
|
||||||
|
|
||||||
if (!isMobile) {
|
if (!isMobile) {
|
||||||
return (
|
return (
|
||||||
|
@ -146,6 +146,79 @@ export const OrganizedContent: React.FC<Props> = ({
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return <div>Test</div>;
|
return (
|
||||||
|
<div>
|
||||||
|
{!isReadAll ? (
|
||||||
|
<h2 className={styles.contentHeading}>
|
||||||
|
{headings[currentIndex].name}
|
||||||
|
</h2>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{headings
|
||||||
|
.filter(
|
||||||
|
(heading: { name: string }) => heading.name !== "Read All"
|
||||||
|
)
|
||||||
|
.map((heading) => (
|
||||||
|
<div key={heading.url}>
|
||||||
|
<h2 className={styles.contentHeading}>{heading.name}</h2>
|
||||||
|
{heading.content}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{children}
|
||||||
|
<div className={styles.footer}>
|
||||||
|
{prevHeading && (
|
||||||
|
<div className={styles.clickable}>
|
||||||
|
<Link url={prevHeading.url}>
|
||||||
|
<div className={styles.footerSection}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="9"
|
||||||
|
viewBox="0 0 14 9"
|
||||||
|
className={styles.arrow + " " + styles.prevArrow}
|
||||||
|
>
|
||||||
|
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<div className={styles.prevNext}>Previous</div>
|
||||||
|
<div className={styles.arrowHeading}>
|
||||||
|
{prevHeading.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div></div>
|
||||||
|
{nextHeading && (
|
||||||
|
<div className={styles.clickable}>
|
||||||
|
<Link url={nextHeading.url}>
|
||||||
|
<div className={styles.footerSection}>
|
||||||
|
<div>
|
||||||
|
<div className={styles.prevNext + " " + styles.nextText}>
|
||||||
|
Next
|
||||||
|
</div>
|
||||||
|
<div className={styles.arrowHeading}>
|
||||||
|
{nextHeading.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="9"
|
||||||
|
viewBox="0 0 14 9"
|
||||||
|
className={styles.arrow + " " + styles.nextArrow}
|
||||||
|
>
|
||||||
|
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -67,6 +67,6 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
|
||||||
|
|
||||||
## `<OrganizedContent />`
|
## `<OrganizedContent />`
|
||||||
|
|
||||||
Works without JS!
|
Codey is supposed to say something here...
|
||||||
|
|
||||||
<OrganizedContentDemo />
|
<OrganizedContentDemo />
|
||||||
|
|
Loading…
Reference in New Issue