bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'square' into 'develop'

Browse source 
Letterbox images taller than 1:1

See merge request soapbox-pub/soapbox!2027
This commit is contained in:
Alex Gleason 2022-12-23 16:26:59 +00:00
commit 622b90daee
5 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Posts: move instance favicon beside username instead of post timestamp. - Posts: move instance favicon beside username instead of post timestamp.
- Posts: changed the behavior of content warnings. CWs and sensitive media are unified into one design. - Posts: changed the behavior of content warnings. CWs and sensitive media are unified into one design.
- Posts: redesigned interaction counters to use text instead of icons. - Posts: redesigned interaction counters to use text instead of icons.
- Posts: letterbox images taller than 1:1.
- Profile: overhauled user profiles to be consistent with the rest of the UI. - Profile: overhauled user profiles to be consistent with the rest of the UI.
- Composer: move emoji button alongside other composer buttons, add numerical counter. - Composer: move emoji button alongside other composer buttons, add numerical counter.
- Birthdays: move today's birthdays out of notifications into right sidebar. - Birthdays: move today's birthdays out of notifications into right sidebar.

2
app/soapbox/components/media-gallery.tsx
View file

@ -294,7 +294,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined; const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined;
const getHeight = () => { const getHeight = () => {
if (!aspectRatio) return w * 9 / 16; if (!aspectRatio) return w;
if (isPanoramic(aspectRatio)) return Math.floor(w / maximumAspectRatio); if (isPanoramic(aspectRatio)) return Math.floor(w / maximumAspectRatio);
if (isPortrait(aspectRatio)) return Math.floor(w / minimumAspectRatio); if (isPortrait(aspectRatio)) return Math.floor(w / minimumAspectRatio);
return Math.floor(w / aspectRatio); return Math.floor(w / aspectRatio);

2
app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
View file

@ -29,7 +29,7 @@ const PlaceholderMediaGallery: React.FC<IPlaceholderMediaGallery> = ({ media, de
let itemsDimensions: Record<string, string>[] = []; let itemsDimensions: Record<string, string>[] = [];
if (size === 1) { if (size === 1) {
style.height = width! * 9 / 16; style.height = width;
itemsDimensions = [ itemsDimensions = [
{ w: '100%', h: '100%' }, { w: '100%', h: '100%' },

2
app/soapbox/features/status/components/card.tsx
View file

@ -111,7 +111,7 @@ const Card: React.FC<ICard> = ({
// Constrain to a sane limit // Constrain to a sane limit
// https://en.wikipedia.org/wiki/Aspect_ratio_(image) // https://en.wikipedia.org/wiki/Aspect_ratio_(image)
return Math.min(Math.max(9 / 16, ratio), 4); return Math.min(Math.max(1, ratio), 4);
}; };
const interactive = card.type !== 'link'; const interactive = card.type !== 'link';

2
app/soapbox/utils/media-aspect-ratio.ts
View file

@ -1,4 +1,4 @@
export const minimumAspectRatio = 9 / 16; // Portrait phone export const minimumAspectRatio = 1; // Square
export const maximumAspectRatio = 10; // Generous min-height export const maximumAspectRatio = 10; // Generous min-height
export const isPanoramic = (ar: number) => { export const isPanoramic = (ar: number) => {