matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: Modify media styles

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-09-30 23:17:53 +02:00
parent 0aa70b6789
commit e04fe6a685
4 changed files with 55 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
packages/pl-fe/src/components/media-gallery.tsx
View File

@ -152,10 +152,7 @@ const Item: React.FC<IItem> = ({
return (
<div
className={clsx('media-gallery__item', {
standalone,
'rounded-md': total > 1,
})}
className={clsx('media-gallery__item', standalone)}
key={attachment.id}
style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
>
@ -250,10 +247,7 @@ const Item: React.FC<IItem> = ({
return (
<div
className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, {
standalone,
'rounded-md': total > 1,
})}
className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, standalone)}
key={attachment.id}
style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
>
@ -351,34 +345,34 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
if (isPortrait(ar1) && isPortrait(ar2)) {
itemsDimensions = [
{ w: 50, h: '100%', r: '2px' },
{ w: 50, h: '100%', l: '2px' },
{ w: 50, h: '100%', r: '1px' },
{ w: 50, h: '100%', l: '1px' },
];
} else if (isPanoramic(ar1) && isPanoramic(ar2)) {
itemsDimensions = [
{ w: 100, h: panoSize_px, b: '2px' },
{ w: 100, h: panoSize_px, t: '2px' },
{ w: 100, h: panoSize_px, b: '1px' },
{ w: 100, h: panoSize_px, t: '1px' },
];
} else if (
(isPanoramic(ar1) && isPortrait(ar2)) ||
(isPanoramic(ar1) && isNonConformingRatio(ar2))
) {
itemsDimensions = [
{ w: 100, h: `${(w / maximumAspectRatio)}px`, b: '2px' },
{ w: 100, h: `${(w * 0.6)}px`, t: '2px' },
{ w: 100, h: `${(w / maximumAspectRatio)}px`, b: '1px' },
{ w: 100, h: `${(w * 0.6)}px`, t: '1px' },
];
} else if (
(isPortrait(ar1) && isPanoramic(ar2)) ||
(isNonConformingRatio(ar1) && isPanoramic(ar2))
) {
itemsDimensions = [
{ w: 100, h: `${(w * 0.6)}px`, b: '2px' },
{ w: 100, h: `${(w / maximumAspectRatio)}px`, t: '2px' },
{ w: 100, h: `${(w * 0.6)}px`, b: '1px' },
{ w: 100, h: `${(w / maximumAspectRatio)}px`, t: '1px' },
];
} else {
itemsDimensions = [
{ w: 50, h: '100%', r: '2px' },
{ w: 50, h: '100%', l: '2px' },
{ w: 50, h: '100%', r: '1px' },
{ w: 50, h: '100%', l: '1px' },
];
}
} else if (size === 3) {
@ -392,9 +386,9 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
if (isPanoramic(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) {
itemsDimensions = [
{ w: 100, h: '50%', b: '2px' },
{ w: 50, h: '50%', t: '2px', r: '2px' },
{ w: 50, h: '50%', t: '2px', l: '2px' },
{ w: 100, h: '50%', b: '1px' },
{ w: 50, h: '50%', t: '1px', r: '1px' },
{ w: 50, h: '50%', t: '1px', l: '1px' },
];
} else if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) {
itemsDimensions = [
@ -404,13 +398,13 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
];
} else if (isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) {
itemsDimensions = [
{ w: 50, h: '100%', r: '2px' },
{ w: 50, h: '50%', b: '2px', l: '2px' },
{ w: 50, h: '50%', t: '2px', l: '2px' },
{ w: 50, h: '100%', r: '1px' },
{ w: 50, h: '50%', b: '1px', l: '1px' },
{ w: 50, h: '50%', t: '1px', l: '1px' },
];
} else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPortrait(ar3)) {
itemsDimensions = [
{ w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 50, h: '50%', b: '1px', r: '1px' },
{ w: 50, h: '50%', l: '-2px', b: '-2px', pos: 'absolute', float: 'none' },
{ w: 50, h: '100%', r: '-2px', t: '0px', b: '0px', pos: 'absolute', float: 'none' },
];
@ -419,33 +413,33 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
(isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3))
) {
itemsDimensions = [
{ w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 50, h: '100%', l: '2px', float: 'right' },
{ w: 50, h: '50%', t: '2px', r: '2px' },
{ w: 50, h: '50%', b: '1px', r: '1px' },
{ w: 50, h: '100%', l: '1px', float: 'right' },
{ w: 50, h: '50%', t: '1px', r: '1px' },
];
} else if (
(isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3)) ||
(isPanoramic(ar1) && isPanoramic(ar2) && isPortrait(ar3))
) {
itemsDimensions = [
{ w: 50, h: panoSize_px, b: '2px', r: '2px' },
{ w: 50, h: panoSize_px, b: '2px', l: '2px' },
{ w: 100, h: `${w - panoSize}px`, t: '2px' },
{ w: 50, h: panoSize_px, b: '1px', r: '1px' },
{ w: 50, h: panoSize_px, b: '1px', l: '1px' },
{ w: 100, h: `${w - panoSize}px`, t: '1px' },
];
} else if (
(isNonConformingRatio(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) ||
(isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3))
) {
itemsDimensions = [
{ w: 100, h: `${w - panoSize}px`, b: '2px' },
{ w: 50, h: panoSize_px, t: '2px', r: '2px' },
{ w: 50, h: panoSize_px, t: '2px', l: '2px' },
{ w: 100, h: `${w - panoSize}px`, b: '1px' },
{ w: 50, h: panoSize_px, t: '1px', r: '1px' },
{ w: 50, h: panoSize_px, t: '1px', l: '1px' },
];
} else {
itemsDimensions = [
{ w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 50, h: '50%', b: '2px', l: '2px' },
{ w: 100, h: '50%', t: '2px' },
{ w: 50, h: '50%', b: '1px', r: '1px' },
{ w: 50, h: '50%', b: '1px', l: '1px' },
{ w: 100, h: '50%', t: '1px' },
];
}
} else if (size >= 4) {
@ -470,34 +464,34 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
if (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) {
itemsDimensions = [
{ w: 50, h: panoSize_px, b: '2px', r: '2px' },
{ w: 50, h: panoSize_px, b: '2px', l: '2px' },
{ w: 50, h: `${(w / 2)}px`, t: '2px', r: '2px' },
{ w: 50, h: `${(w / 2)}px`, t: '2px', l: '2px' },
{ w: 50, h: panoSize_px, b: '1px', r: '1px' },
{ w: 50, h: panoSize_px, b: '1px', l: '1px' },
{ w: 50, h: `${(w / 2)}px`, t: '1px', r: '1px' },
{ w: 50, h: `${(w / 2)}px`, t: '1px', l: '1px' },
];
} else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPanoramic(ar3) && isPanoramic(ar4)) {
itemsDimensions = [
{ w: 50, h: `${(w / 2)}px`, b: '2px', r: '2px' },
{ w: 50, h: `${(w / 2)}px`, b: '2px', l: '2px' },
{ w: 50, h: panoSize_px, t: '2px', r: '2px' },
{ w: 50, h: panoSize_px, t: '2px', l: '2px' },
{ w: 50, h: `${(w / 2)}px`, b: '1px', r: '1px' },
{ w: 50, h: `${(w / 2)}px`, b: '1px', l: '1px' },
{ w: 50, h: panoSize_px, t: '1px', r: '1px' },
{ w: 50, h: panoSize_px, t: '1px', l: '1px' },
];
} else if (
(isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) ||
(isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3) && isPanoramic(ar4))
) {
itemsDimensions = [
{ w: 67, h: '100%', r: '2px' },
{ w: 33, h: '33%', b: '4px', l: '2px' },
{ w: 33, h: '33%', l: '2px' },
{ w: 33, h: '33%', t: '4px', l: '2px' },
{ w: 67, h: '100%', r: '1px' },
{ w: 33, h: '33%', b: '4px', l: '1px' },
{ w: 33, h: '33%', l: '1px' },
{ w: 33, h: '33%', t: '4px', l: '1px' },
];
} else {
itemsDimensions = [
{ w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 50, h: '50%', b: '2px', l: '2px' },
{ w: 50, h: '50%', t: '2px', r: '2px' },
{ w: 50, h: '50%', t: '2px', l: '2px' },
{ w: 50, h: '50%', b: '1px', r: '1px' },
{ w: 50, h: '50%', b: '1px', l: '1px' },
{ w: 50, h: '50%', t: '1px', r: '1px' },
{ w: 50, h: '50%', t: '1px', l: '1px' },
];
}
}
@ -557,7 +551,9 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
return (
<div
className={clsx(className, 'media-gallery', { 'media-gallery--compact !h-12 bg-transparent': compact })}
className={clsx(className, 'media-gallery overflow-hidden rounded-md', {
'media-gallery--compact !h-12 bg-transparent': compact,
})}
style={sizeData.style}
ref={node}
>

2
packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx
View File

@ -54,7 +54,7 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
if (!nineAttachments.isEmpty()) {
return (
<div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
<div className='grid grid-cols-3 gap-0.5 overflow-hidden rounded-md'>
{nineAttachments.map((attachment, index) => (
<MediaItem
key={`${attachment.status.id}+${attachment.id}`}

2
packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx
View File

@ -52,7 +52,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
if (!nineAttachments.isEmpty()) {
return (
<div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
<div className='grid grid-cols-3 gap-0.5 overflow-hidden rounded-md'>
{nineAttachments.map((attachment, index) => (
<MediaItem
key={`${attachment.status.id}+${attachment.id}`}

6
packages/pl-fe/src/styles/components/media-gallery.scss
View File

@ -2,7 +2,7 @@
@apply rounded-lg box-border overflow-hidden isolate relative w-full h-auto;
&__item {
@apply rounded-sm border-0 box-border block float-left relative overflow-hidden;
@apply border-0 box-border block float-left relative overflow-hidden;
&__icons {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
@ -60,10 +60,10 @@
}
&--compact {
@apply rounded-sm;
@apply flex rounded-sm w-fit gap-0.5;
.media-gallery__item {
@apply h-12 w-12 inset-auto float-left mr-[5px] #{!important};
@apply h-12 w-12 inset-auto float-left #{!important};
&-overflow {
@apply text-xl;