mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-25 23:22:06 -05:00
Attempt to fix attachments not showing up on Samsung Internet.
This commit is contained in:
parent
dcb038f986
commit
72e9cda844
2 changed files with 30 additions and 17 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
||||||
Subproject commit 1c7f5e749f22204a1350b32ff57f4d97e487a0a6
|
Subproject commit 76f335d8928f5f3c33dbb9c6b05888ff7d2f12ef
|
|
@ -2,15 +2,36 @@ import styled from "styled-components";
|
||||||
|
|
||||||
import { Children } from "../../../../types/Preact";
|
import { Children } from "../../../../types/Preact";
|
||||||
|
|
||||||
const Grid = styled.div`
|
const Grid = styled.div<{ width: number; height: number }>`
|
||||||
display: grid;
|
display: grid;
|
||||||
|
aspect-ratio: ${(props) => props.width} / ${(props) => props.height};
|
||||||
|
|
||||||
aspect-ratio: var(--aspect-ratio);
|
max-width: min(
|
||||||
|
100%,
|
||||||
|
${(props) => props.width}px,
|
||||||
|
var(--attachment-max-width)
|
||||||
|
);
|
||||||
|
|
||||||
max-width: min(100%, var(--width), var(--attachment-max-width));
|
max-height: min(${(props) => props.height}px, var(--attachment-max-height));
|
||||||
max-height: min(var(--height), var(--attachment-max-height));
|
|
||||||
|
|
||||||
img, video {
|
@supports not (
|
||||||
|
aspect-ratio: ${(props) => props.width} / ${(props) => props.height}
|
||||||
|
) {
|
||||||
|
div::before {
|
||||||
|
float: left;
|
||||||
|
padding-top: ${(props) => (props.height / props.width) * 100}%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
div::after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
video {
|
||||||
grid-area: 1 / 1;
|
grid-area: 1 / 1;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -44,24 +65,16 @@ type Props = Omit<
|
||||||
JSX.HTMLAttributes<HTMLDivElement>,
|
JSX.HTMLAttributes<HTMLDivElement>,
|
||||||
"children" | "as" | "style"
|
"children" | "as" | "style"
|
||||||
> & {
|
> & {
|
||||||
style?: JSX.CSSProperties;
|
|
||||||
children?: Children;
|
children?: Children;
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function SizedGrid(props: Props) {
|
export function SizedGrid(props: Props) {
|
||||||
const { width, height, children, style, ...divProps } = props;
|
const { width, height, children, ...divProps } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid
|
<Grid {...divProps} width={width} height={height}>
|
||||||
{...divProps}
|
|
||||||
style={{
|
|
||||||
...style,
|
|
||||||
"--width": `${width}px`,
|
|
||||||
"--height": `${height}px`,
|
|
||||||
"--aspect-ratio": `${width} / ${height}`,
|
|
||||||
}}>
|
|
||||||
{children}
|
{children}
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue