When flex and grid dont work, use float (#208)

FuturePortal · Mar 22, 2024 · ee60500 · ee60500
1 parent ed5fec3
commit ee60500
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 78 deletions.
diff --git a/frontend/App/Statuses/Status/ProjectImage/ProjectImage.style.tsx b/frontend/App/Statuses/Status/ProjectImage/ProjectImage.style.tsx
diff --git a/frontend/App/Statuses/Status/ProjectImage/ProjectImage.tsx b/frontend/App/Statuses/Status/ProjectImage/ProjectImage.tsx
diff --git a/frontend/App/Statuses/Status/ProjectImage/index.tsx b/frontend/App/Statuses/Status/ProjectImage/index.tsx
diff --git 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<StatusProps>`
 
 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
@@ -1,14 +1,13 @@
-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';
 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 (
 		<Container key={status.id} state={status.state}>
 			<Body>
-				{status.projectImage && <ProjectImage url={status.projectImage} alt="Project image" />}
+				{status.projectImage && !projectAvatarFailed && (
+					<ProjectImage
+						src={status.projectImage}
+						alt={status.project}
+						onError={() => setProjectAvatarFailed(true)}
+					/>
+				)}
+				{!!status.userImage && showAvatars && <UserImage src={status.userImage} alt={status.username} />}
 				<Details>
 					<Project>{status.project}</Project>
 					<Boxes>
@@ -67,11 +74,6 @@ const Statuses = ({ status }: Props): ReactElement => {
 						</Box>
 					</Boxes>
 				</Details>
-				{!!status.userImage && showAvatars && (
-					<UserImage>
-						<img src={status.userImage} alt="User" />
-					</UserImage>
-				)}
 			</Body>
 			{status.processes && status.processes.map((process) => <Process key={process.id} process={process} />)}
 		</Container>