yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: caption positioning

Browse Source
This commit is contained in:
Tom Moor
2024-06-03 21:42:23 -04:00
parent 20e275c0b9
commit e7602f8f1b
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
shared/editor/components/ImageZoom.tsx
View File

@@ -4,6 +4,8 @@ import styled, { createGlobalStyle } from "styled-components";
import { s } from "../../styles"; import { s } from "../../styles";
import { EditorStyleHelper } from "../styles/EditorStyleHelper"; import { EditorStyleHelper } from "../styles/EditorStyleHelper";
const Zoom = React.lazy(() => import("react-medium-image-zoom"));
type Props = { type Props = {
/** An optional caption to display below the image */ /** An optional caption to display below the image */
caption?: string; caption?: string;
@@ -14,7 +16,6 @@ type Props = {
* Component that wraps an image with the ability to zoom in * Component that wraps an image with the ability to zoom in
*/ */
export const ImageZoom = ({ caption, children }: Props) => { export const ImageZoom = ({ caption, children }: Props) => {
const Zoom = React.lazy(() => import("react-medium-image-zoom"));
const [isActivated, setIsActivated] = React.useState(false); const [isActivated, setIsActivated] = React.useState(false);
const handleActivated = React.useCallback(() => { const handleActivated = React.useCallback(() => {
@@ -53,18 +54,22 @@ const Lightbox = ({
modalState: string; modalState: string;
img: React.ReactNode; img: React.ReactNode;
}) => ( }) => (
<figure> <Figure>
{img} {img}
<Caption $loaded={modalState === "LOADED"}>{caption}</Caption> <Caption $loaded={modalState === "LOADED"}>{caption}</Caption>
</figure> </Figure>
); );
const Figure = styled("figure")`
margin: 0;
`;
const Caption = styled("figcaption")<{ $loaded: boolean }>` const Caption = styled("figcaption")<{ $loaded: boolean }>`
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
margin-bottom: ${EditorStyleHelper.padding}px; margin-bottom: 4px;
font-size: 15px; font-size: 15px;
opacity: ${(props) => (props.$loaded ? 1 : 0)}; opacity: ${(props) => (props.$loaded ? 1 : 0)};
transition: opacity 250ms; transition: opacity 250ms;