Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Merge pull request #12 from Accords-Library/develop 

Small improvements to the RecorderChip and the Transcript lines
This commit is contained in:
DrMint 2022-03-13 18:25:35 +01:00 committed by GitHub
parent 55c267490a 6082e83f54
commit ccaea20b7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Markdown/Markdawn.tsx
View File

@ -1,5 +1,6 @@
import HorizontalLine from "components/HorizontalLine";
import InsetBox from "components/InsetBox";
import ToolTip from "components/ToolTip";
import { useAppLayout } from "contexts/AppLayoutContext";
import Markdown from "markdown-to-jsx";
import { slugify } from "queries/helpers";
@ -28,28 +29,60 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
children: React.ReactNode;
}) => {
return (
<h2
id={props.id}
className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]"
style={props.style}
>
{props.children}
<abbr title="Copy anchor link">
<span
className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(
process.env.NEXT_PUBLIC_URL_SELF +
window.location.pathname +
"#" +
props.id
);
}}
>
link
</span>
</abbr>
</h2>
<div className="flex flex-row place-items-center place-content-center gap-3">
<h2 id={props.id} style={props.style}>
{props.children}
</h2>
<ToolTip content={"Copy anchor link"} trigger="mouseenter">
<ToolTip content={"Copied! 👍"} trigger="click">
<span
className="material-icons transition-color hover:text-dark cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(
process.env.NEXT_PUBLIC_URL_SELF +
window.location.pathname +
"#" +
props.id
);
}}
>
link
</span>
</ToolTip>
</ToolTip>
</div>
);
},
},
h3: {
component: (props: {
id: string;
style: React.CSSProperties;
children: React.ReactNode;
}) => {
return (
<div className="flex flex-row place-items-center place-content-center gap-3">
<h3 id={props.id} style={props.style}>
{props.children}
</h3>
<ToolTip content={"Copy anchor link"} trigger="mouseenter">
<ToolTip content={"Copied! 👍"} trigger="click">
<span
className="material-icons transition-color hover:text-dark cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(
process.env.NEXT_PUBLIC_URL_SELF +
window.location.pathname +
"#" +
props.id
);
}}
>
link
</span>
</ToolTip>
</ToolTip>
</div>
);
},
},
@ -82,7 +115,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
Transcript: {
component: (props) => {
return (
<div className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2">
<div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2">
{props.children}
</div>
);
@ -92,7 +125,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
component: (props) => {
return (
<>
<strong className="text-dark opacity-60">
<strong className="text-dark opacity-60 mobile:!-mb-4">
{props.name}
</strong>
<p className="whitespace-pre-line">{props.children}</p>

4
src/components/Markdown/TOC.tsx
View File

@ -15,8 +15,8 @@ export default function TOC(props: TOCProps): JSX.Element {
return (
<div>
<h3 className="text-xl">Table of content</h3>
<ol className="text-left">
<li className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap">
<ol className="text-left max-w-[14.5rem]">
<li className="my-2 overflow-x-hidden relative text-ellipsis whitespace-nowrap">
<a className="" onClick={() => router.replace(`#${toc.slug}`)}>
{<abbr title={toc.title}>{toc.title}</abbr>}
</a>

51
src/components/RecorderChip.tsx
View File

@ -3,6 +3,7 @@ import {
GetContentTextQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import Button from "./Button";
import Img, { ImageQuality } from "./Img";
import ToolTip from "./ToolTip";
@ -19,38 +20,42 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
return (
<ToolTip
content={
<div className="p-2 py-5 grid gap-2">
<div className="grid grid-flow-col gap-2 place-items-center place-content-start">
<div className="text-left p-2 py-5 grid gap-8">
<div className="grid grid-flow-col gap-6 place-items-center place-content-start">
{recorder.attributes.avatar.data && (
<Img
className="w-8 rounded-full"
className="w-20 rounded-full border-4 border-mid"
image={recorder.attributes.avatar.data.attributes}
quality={ImageQuality.Small}
rawImg
/>
)}
<h3 className="text-xl">{recorder.attributes.username}</h3>
<div className="grid gap-2">
<h3 className=" text-2xl">{recorder.attributes.username}</h3>
{recorder.attributes.languages.data.length > 0 && (
<div className="flex flex-row flex-wrap gap-1">
<p>{langui.languages}:</p>
{recorder.attributes.languages.data.map((language) => (
<Chip key={language.attributes.code}>
{language.attributes.code.toUpperCase()}
</Chip>
))}
</div>
)}
{recorder.attributes.pronouns && (
<div className="flex flex-row flex-wrap gap-1">
<p>{langui.pronouns}:</p>
<Chip>{recorder.attributes.pronouns}</Chip>
</div>
)}
</div>
</div>
{recorder.attributes.languages.data.length > 0 && (
<div className="flex flex-row flex-wrap gap-1">
<p>{langui.languages}:</p>
{recorder.attributes.languages.data.map((language) => (
<Chip key={language.attributes.code}>
{language.attributes.code.toUpperCase()}
</Chip>
))}
</div>
{recorder.attributes.bio.length > 0 && (
<p>{recorder.attributes.bio[0].bio}</p>
)}
{recorder.attributes.pronouns && (
<div className="flex flex-row flex-wrap gap-1">
<p>{langui.pronouns}:</p>
<Chip>{recorder.attributes.pronouns}</Chip>
</div>
)}
<p>
{recorder.attributes.bio.length > 0 &&
recorder.attributes.bio[0].bio}
</p>
<Button className="cursor-not-allowed">View profile</Button>
</div>
}
placement="top"

2
src/components/ToolTip.tsx
View File

@ -12,7 +12,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
if (newProps.animation === undefined) newProps.animation = "scale-subtle";
return (
<Tippy {...newProps}>
<Tippy className={`text-[80%] ${newProps.className}`} {...newProps}>
<div>{props.children}</div>
</Tippy>
);