diff --git a/frontend/App/Statuses/Status/ProjectImage/ProjectImage.style.tsx b/frontend/App/Statuses/Status/ProjectImage/ProjectImage.style.tsx deleted file mode 100644 index e7f926b..0000000 --- a/frontend/App/Statuses/Status/ProjectImage/ProjectImage.style.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import styled, { css } from 'styled-components'; - -import { fromSize } from '/frontend/style/size'; - -export const ProjectAvatar = styled.img` - border-radius: 0.25rem; - width: 3rem; - height: 3rem; - grid-row: 1; - grid-column: 1; - - ${fromSize.medium(css` - width: 6rem; - height: 6rem; - `)} -`; diff --git a/frontend/App/Statuses/Status/ProjectImage/ProjectImage.tsx b/frontend/App/Statuses/Status/ProjectImage/ProjectImage.tsx deleted file mode 100644 index 0477825..0000000 --- a/frontend/App/Statuses/Status/ProjectImage/ProjectImage.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ReactElement, useState } from 'react'; - -import { ProjectAvatar } from './ProjectImage.style'; - -type Props = { - url: string; - alt: string; -}; - -const ProjectImage = ({ url, alt }: Props): ReactElement | null => { - const [isNotLoading, setNotLoading] = useState(false); - - if (isNotLoading) { - return null; - } - - return setNotLoading(true)} />; -}; - -export default ProjectImage; diff --git a/frontend/App/Statuses/Status/ProjectImage/index.tsx b/frontend/App/Statuses/Status/ProjectImage/index.tsx deleted file mode 100644 index 43351a4..0000000 --- a/frontend/App/Statuses/Status/ProjectImage/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProjectImage'; diff --git a/frontend/App/Statuses/Status/Status.style.tsx b/frontend/App/Statuses/Status/Status.style.tsx index 57c6b76..ee5e0c4 100644 --- a/frontend/App/Statuses/Status/Status.style.tsx +++ b/frontend/App/Statuses/Status/Status.style.tsx @@ -43,16 +43,6 @@ export const LinkBox = styled.a` ${boxBase}; `; -export const Details = styled.div` - min-width: 5rem; - grid-column: 2; - grid-row: 1 / 3; - - ${fromSize.medium(css` - grid-row: 1; - `)} -`; - export const Project = styled.h1` margin-bottom: 0.5rem; font-size: 1.5em; @@ -98,36 +88,47 @@ export const Container = styled.div` export const Body = styled.div` padding: 0.75rem; - display: grid; - grid-template-columns: 1fr 50fr; - grid-template-rows: 3rem 1fr; - gap: 0.5rem; + + &::after { + content: ' '; + display: block; + clear: both; + } +`; + +const ImageBase = styled.img` + width: 3rem; + height: 3rem; ${fromSize.medium(css` - grid-template-columns: 1fr 50fr 1fr; - grid-template-rows: 1fr; - gap: 1rem; + width: 6rem; + height: 6rem; `)} `; -export const UserImage = styled.div` - flex-shrink: 0; - grid-column: 1; - grid-row: 2; +export const ProjectImage = styled(ImageBase)` + border-radius: 0.25rem; + float: left; + margin: 0 0.5rem 0.5rem 0; ${fromSize.medium(css` - grid-column: 3; - grid-row: 1; + margin: 0 1rem 0 0; `)} +`; - img { - border-radius: 50%; - width: 3rem; - height: 3rem; +export const UserImage = styled(ImageBase)` + border-radius: 50%; + float: left; + clear: left; + margin-right: 0.5rem; - ${fromSize.medium(css` - width: 6rem; - height: 6rem; - `)} - } + ${fromSize.medium(css` + clear: none; + float: right; + margin: 0 0 0 1rem; + `)} +`; + +export const Details = styled.div` + min-width: 5rem; `; diff --git a/frontend/App/Statuses/Status/Status.tsx b/frontend/App/Statuses/Status/Status.tsx index 92d60a1..ea84fce 100644 --- a/frontend/App/Statuses/Status/Status.tsx +++ b/frontend/App/Statuses/Status/Status.tsx @@ -1,6 +1,6 @@ -import { ReactElement } from 'react'; +import { ReactElement, useState } from 'react'; -import { Body, Box, Boxes, Container, Details, LinkBox, Project, UserImage } from './Status.style'; +import { Body, Box, Boxes, Container, Details, LinkBox, Project, ProjectImage, UserImage } from './Status.style'; import RunTime from '/frontend/App/Statuses/Status/RunTime'; import Icon from '/frontend/components/Icon'; @@ -8,7 +8,6 @@ import useSetting from '/frontend/hooks/useSetting'; import Merge from './Merge'; import Process from './Process'; -import ProjectImage from './ProjectImage'; import Source from './Source'; import TimePassed from './TimePassed'; import User from './User'; @@ -28,13 +27,21 @@ const pettyUrl = (url: string) => const Statuses = ({ status }: Props): ReactElement => { const showAvatars = useSetting('showAvatars'); + const [projectAvatarFailed, setProjectAvatarFailed] = useState(false); const activeProcess = status.processes[0] || null; return ( - {status.projectImage && } + {status.projectImage && !projectAvatarFailed && ( + setProjectAvatarFailed(true)} + /> + )} + {!!status.userImage && showAvatars && }
{status.project} @@ -67,11 +74,6 @@ const Statuses = ({ status }: Props): ReactElement => {
- {!!status.userImage && showAvatars && ( - - User - - )} {status.processes && status.processes.map((process) => )}