ShareX
/
micro
mirror of https://github.com/sylv/micro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: text embeds being fixed height

This commit is contained in:
sylv 2022-11-01 19:47:03 +08:00
parent 5ec8396a8b
commit d3de37a11b
4 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/components/embed/embed.tsx
View File

@ -13,7 +13,7 @@ interface EmbedProps {
}
export const MAX_HEIGHT = 'max-h-[70vh]';
export const BASE_EMBED_CLASSES = `min-h-[150px] bg-dark-200 rounded-lg w-full ${MAX_HEIGHT}`;
export const BASE_EMBED_CLASSES = `min-h-[150px] bg-dark-200 rounded-lg w-full`;
export const Embed: FC<EmbedProps> = memo(({ data }) => {
const isText = useMemo(() => EmbedText.embeddable(data), [data]);

9
packages/web/src/components/embed/variants/embed-default.tsx
View File

@ -1,9 +1,14 @@
import classNames from 'classnames';
import { BASE_EMBED_CLASSES } from '../embed';
import { BASE_EMBED_CLASSES, MAX_HEIGHT } from '../embed';
import type { Embeddable } from '../embeddable';
export const EmbedDefault = ({ data }: { data: Embeddable }) => {
const classes = classNames('flex flex-col items-center justify-center w-full select-none h-44', BASE_EMBED_CLASSES);
const classes = classNames(
'flex flex-col items-center justify-center w-full select-none h-44',
BASE_EMBED_CLASSES,
MAX_HEIGHT
);
return (
<div className={classes}>
<h1 className="flex items-center mb-2 text-xl font-bold">{data.type}</h1>

6
packages/web/src/components/embed/variants/embed-image.tsx
View File

@ -5,8 +5,12 @@ import { BASE_EMBED_CLASSES, MAX_HEIGHT } from '../embed';
import type { Embeddable } from '../embeddable';
export const EmbedImage = ({ data }: { data: Embeddable }) => {
const containerClasses = classNames('flex items-center justify-center relative overflow-hidden', BASE_EMBED_CLASSES);
const imageClasses = classNames(`object-contain`, MAX_HEIGHT);
const containerClasses = classNames(
'flex items-center justify-center relative overflow-hidden',
BASE_EMBED_CLASSES,
MAX_HEIGHT
);
return (
<Fragment>

4
packages/web/src/components/embed/variants/embed-video.tsx
View File

@ -1,9 +1,9 @@
import classNames from 'classnames';
import { BASE_EMBED_CLASSES } from '../embed';
import { BASE_EMBED_CLASSES, MAX_HEIGHT } from '../embed';
import type { Embeddable } from '../embeddable';
export const EmbedVideo = ({ file }: { file: Embeddable }) => {
const classes = classNames('outline-none', BASE_EMBED_CLASSES);
const classes = classNames('outline-none', BASE_EMBED_CLASSES, MAX_HEIGHT);
return (
<video
controls