cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-19 17:47:18 -04:00
Code Issues Projects Releases Packages Wiki Activity

Attempt to fix attachments not showing up on Samsung Internet.

Browse source
This commit is contained in:
Paul 2021-08-16 15:16:54 +01:00
parent dcb038f986
commit 72e9cda844
2 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 1c7f5e749f22204a1350b32ff57f4d97e487a0a6
Subproject commit 76f335d8928f5f3c33dbb9c6b05888ff7d2f12ef

45
src/components/common/messaging/attachments/Grid.tsx
View file

@ -2,17 +2,38 @@ import styled from "styled-components";
import { Children } from "../../../../types/Preact";
const Grid = styled.div`
const Grid = styled.div<{ width: number; height: number }>`
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(var(--height), var(--attachment-max-height));
max-height: min(${(props) => props.height}px, 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;
display: block;
max-width: 100%;
@ -44,24 +65,16 @@ type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "style"
> & {
style?: JSX.CSSProperties;
children?: Children;
width: number;
height: number;
};
export function SizedGrid(props: Props) {
const { width, height, children, style, ...divProps } = props;
const { width, height, children, ...divProps } = props;
return (
<Grid
{...divProps}
style={{
...style,
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": `${width} / ${height}`,
}}>
<Grid {...divProps} width={width} height={height}>
{children}
</Grid>
);