Align open info buttons

equinor · Nov 28, 2024 · 8bbe1b1 · 8bbe1b1
1 parent cc776a7
commit 8bbe1b1
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 48 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -37,7 +37,6 @@ const StyledSmallScreenMissionCard = styled.div`
     align-items: flex-start;
     align-self: stretch;
     padding: 8px;
-    gap: 8px;
 
     @media (min-width: 960px) {
         display: none;

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
@@ -53,9 +53,22 @@ const StyledNoneImageBody = styled.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 4px;
-    flex: 1 0 0;
     align-self: stretch;
+
+    @media (min-width: 960px) {
+        gap: 16px;
+    }
+`
+
+const StyledMainBody = styled.div`
+    align-self: stretch;
+
+    @media (min-width: 960px) {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
 `
 
 const StyledHeader = styled.div`
@@ -112,54 +125,56 @@ export const RobotCard = ({ robot }: { robot: Robot }) => {
                 <RobotImage robotType={robot.model.type} height="88px" />
             </HiddenOnSmallScreen>
             <StyledNoneImageBody>
-                <StyledHeader>
-                    <LongTypography variant="h5">
-                        {robot.name}
-                        {' ('}
-                        {getRobotModel(robot.model.type)}
-                        {')'}
-                    </LongTypography>
-                    <HiddenOnLargeScreen>
-                        <Button variant="ghost_icon" onClick={goToRobot}>
-                            <Icon name={Icons.RightCheveron} size={24} />
-                        </Button>
-                    </HiddenOnLargeScreen>
-                </StyledHeader>
-                <HorizontalContent>
-                    <VerticalContent>
-                        <AttributeTitleTypography>{TranslateText('Status')}</AttributeTitleTypography>
-                        <RobotStatusChip
-                            status={robot.status}
-                            flotillaStatus={robot.flotillaStatus}
-                            isarConnected={robot.isarConnected}
-                        />
-                    </VerticalContent>
-
-                    {robot.status !== RobotStatus.Offline ? (
-                        <>
-                            <VerticalContent>
-                                <AttributeTitleTypography>{TranslateText('Battery')}</AttributeTitleTypography>
-                                <BatteryStatusDisplay
-                                    batteryLevel={robot.batteryLevel}
-                                    batteryWarningLimit={robot.model.batteryWarningThreshold}
-                                />
-                            </VerticalContent>
-
-                            {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
+                <StyledMainBody>
+                    <StyledHeader>
+                        <LongTypography variant="h5">
+                            {robot.name}
+                            {' ('}
+                            {getRobotModel(robot.model.type)}
+                            {')'}
+                        </LongTypography>
+                        <HiddenOnLargeScreen>
+                            <Button variant="ghost_icon" onClick={goToRobot}>
+                                <Icon name={Icons.RightCheveron} size={24} />
+                            </Button>
+                        </HiddenOnLargeScreen>
+                    </StyledHeader>
+                    <HorizontalContent>
+                        <VerticalContent>
+                            <AttributeTitleTypography>{TranslateText('Status')}</AttributeTitleTypography>
+                            <RobotStatusChip
+                                status={robot.status}
+                                flotillaStatus={robot.flotillaStatus}
+                                isarConnected={robot.isarConnected}
+                            />
+                        </VerticalContent>
+
+                        {robot.status !== RobotStatus.Offline ? (
+                            <>
                                 <VerticalContent>
-                                    <AttributeTitleTypography>{TranslateText('Pressure')}</AttributeTitleTypography>
-                                    <PressureStatusDisplay
-                                        pressure={robot.pressureLevel}
-                                        upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
-                                        lowerPressureWarningThreshold={robot.model.lowerPressureWarningThreshold}
+                                    <AttributeTitleTypography>{TranslateText('Battery')}</AttributeTitleTypography>
+                                    <BatteryStatusDisplay
+                                        batteryLevel={robot.batteryLevel}
+                                        batteryWarningLimit={robot.model.batteryWarningThreshold}
                                     />
                                 </VerticalContent>
-                            )}
-                        </>
-                    ) : (
-                        <></>
-                    )}
-                </HorizontalContent>
+
+                                {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
+                                    <VerticalContent>
+                                        <AttributeTitleTypography>{TranslateText('Pressure')}</AttributeTitleTypography>
+                                        <PressureStatusDisplay
+                                            pressure={robot.pressureLevel}
+                                            upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
+                                            lowerPressureWarningThreshold={robot.model.lowerPressureWarningThreshold}
+                                        />
+                                    </VerticalContent>
+                                )}
+                            </>
+                        ) : (
+                            <></>
+                        )}
+                    </HorizontalContent>
+                </StyledMainBody>
                 <HiddenOnSmallScreen>
                     <StyledGhostButton variant="ghost" onClick={goToRobot}>
                         {TranslateText('Open robot information')}