From a4fcbb9872318d7b24c719c6661942d0cd7ae3e6 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 9 Jan 2023 14:46:59 -0600 Subject: [PATCH 1/2] Delete accounts.scss --- app/soapbox/components/display-name.tsx | 15 +--- .../account-gallery/components/media-item.tsx | 4 +- .../features/account-gallery/index.tsx | 2 +- .../components/moved-note.tsx | 2 +- .../ui/components/profile-media-panel.tsx | 2 +- app/styles/accounts.scss | 82 ------------------- app/styles/application.scss | 1 - 7 files changed, 7 insertions(+), 101 deletions(-) delete mode 100644 app/styles/accounts.scss diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx index 12a28b382..3f9d0c5de 100644 --- a/app/soapbox/components/display-name.tsx +++ b/app/soapbox/components/display-name.tsx @@ -5,8 +5,6 @@ import { useSoapboxConfig } from 'soapbox/hooks'; import { getAcct } from '../utils/accounts'; -import Icon from './icon'; -import RelativeTimestamp from './relative-timestamp'; import { HStack, Text } from './ui'; import VerificationBadge from './verification-badge'; @@ -15,19 +13,11 @@ import type { Account } from 'soapbox/types/entities'; interface IDisplayName { account: Account withSuffix?: boolean - withDate?: boolean } -const DisplayName: React.FC = ({ account, children, withSuffix = true, withDate = false }) => { +const DisplayName: React.FC = ({ account, children, withSuffix = true }) => { const { displayFqn = false } = useSoapboxConfig(); - const { created_at: createdAt, verified } = account; - - const joinedAt = createdAt ? ( -
- - -
- ) : null; + const { verified } = account; const displayName = ( @@ -39,7 +29,6 @@ const DisplayName: React.FC = ({ account, children, withSuffix = t /> {verified && } - {withDate && joinedAt} ); diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx index 6752bcdab..5a363aff8 100644 --- a/app/soapbox/features/account-gallery/components/media-item.tsx +++ b/app/soapbox/features/account-gallery/components/media-item.tsx @@ -117,14 +117,14 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia if (!visible) { icon = ( - + ); } return ( -
+
{ return ( -
+
{attachments.map((attachment, index) => attachment === null ? ( 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} /> ) : ( diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx index cfd752fc1..7cc64f5ca 100644 --- a/app/soapbox/features/account-timeline/components/moved-note.tsx +++ b/app/soapbox/features/account-timeline/components/moved-note.tsx @@ -13,7 +13,7 @@ interface IMovedNote { } const MovedNote: React.FC = ({ from, to }) => ( -
+
= ({ account }) => { if (!nineAttachments.isEmpty()) { return ( -
+
{nineAttachments.map((attachment, _index) => ( a { - display: block; - text-decoration: none; - color: inherit; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); - border-radius: 4px; - overflow: hidden; - - @media screen and (max-width: $no-gap-breakpoint) { - box-shadow: none; - } - } -} - -.account { - padding: 10px; - position: relative; - - &:not(:last-of-type) { - border-bottom: 1px solid var(--brand-color--med); - } -} - -.account-gallery__container { - display: flex; - flex-wrap: wrap; - - .empty-column-indicator { - margin: -4px -2px; - } -} - -.account-gallery__item { - @apply rounded-lg p-1; - border: 0; - box-sizing: border-box; - display: block; - position: relative; - overflow: hidden; - - a { - background: var(--brand-color--faint); - } - - video, - img { - @apply rounded-lg; - } - - &__icons { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - .svg-icon { - @apply h-6 w-6; - } - } -} - -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; - background: var(--brand-color--faint); - border-top: 1px solid var(--brand-color--med); - border-bottom: 1px solid var(--brand-color--med); -} - -.account__joined-at { - padding-left: 3px; - font-size: 14px; - display: flex; - white-space: nowrap; - flex-shrink: 0; - color: var(--primary-text-color--faint); - - .svg-icon { - padding-right: 3px; - } -} diff --git a/app/styles/application.scss b/app/styles/application.scss index 53a7a8c39..702e7a437 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -14,7 +14,6 @@ @import 'variables'; @import 'fonts'; @import 'basics'; -@import 'accounts'; @import 'loading'; @import 'ui'; @import 'emoji-picker'; From 352382cd0523fa3b395696d3a46e66f58e8d5c63 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Mon, 30 Jan 2023 11:49:34 -0500 Subject: [PATCH 2/2] Use Grid + Aspect to size MediaItem --- .../account-gallery/components/media-item.tsx | 9 +++------ app/soapbox/features/account-gallery/index.tsx | 12 ++---------- .../features/ui/components/group-media-panel.tsx | 3 +-- .../features/ui/components/profile-media-panel.tsx | 3 +-- 4 files changed, 7 insertions(+), 20 deletions(-) diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx index 5a363aff8..f980c0217 100644 --- a/app/soapbox/features/account-gallery/components/media-item.tsx +++ b/app/soapbox/features/account-gallery/components/media-item.tsx @@ -11,11 +11,10 @@ import type { Attachment } from 'soapbox/types/entities'; interface IMediaItem { attachment: Attachment, - displayWidth: number, onOpenMedia: (attachment: Attachment) => void, } -const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia }) => { +const MediaItem: React.FC = ({ attachment, onOpenMedia }) => { const settings = useSettings(); const autoPlayGif = settings.get('autoPlayGif'); const displayMedia = settings.get('displayMedia'); @@ -53,8 +52,6 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia } }; - const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`; - const height = width; const status = attachment.get('status'); const title = status.get('spoiler_text') || attachment.get('description'); @@ -124,8 +121,8 @@ const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia } return ( -
- +
+ { const isLoading = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.isLoading); const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore); - const [width, setWidth] = useState(323); const node = useRef(null); const handleScrollToBottom = () => { @@ -96,12 +95,6 @@ const AccountGallery = () => { } }; - useLayoutEffect(() => { - if (node.current) { - setWidth(node.current.offsetWidth); - } - }, [node.current]); - useEffect(() => { if (accountId && accountId !== -1) { dispatch(fetchAccount(accountId)); @@ -143,14 +136,13 @@ const AccountGallery = () => { return ( -
+
{attachments.map((attachment, index) => attachment === null ? ( 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} /> ) : ( ))} diff --git a/app/soapbox/features/ui/components/group-media-panel.tsx b/app/soapbox/features/ui/components/group-media-panel.tsx index 904ed77d5..d59b79236 100644 --- a/app/soapbox/features/ui/components/group-media-panel.tsx +++ b/app/soapbox/features/ui/components/group-media-panel.tsx @@ -50,12 +50,11 @@ const GroupMediaPanel: React.FC = ({ group }) => { if (!nineAttachments.isEmpty()) { return ( -
+
{nineAttachments.map((attachment, _index) => ( ))} diff --git a/app/soapbox/features/ui/components/profile-media-panel.tsx b/app/soapbox/features/ui/components/profile-media-panel.tsx index b958ca09a..0dbfaf7f3 100644 --- a/app/soapbox/features/ui/components/profile-media-panel.tsx +++ b/app/soapbox/features/ui/components/profile-media-panel.tsx @@ -51,12 +51,11 @@ const ProfileMediaPanel: React.FC = ({ account }) => { if (!nineAttachments.isEmpty()) { return ( -
+
{nineAttachments.map((attachment, _index) => ( ))}