Hide some columns in inspectionTable on phone

frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx

@@ -4,12 +4,15 @@ import { Icons } from 'utils/icons'
 import { useRef } from 'react'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import styled from 'styled-components'
+import { tokens } from '@equinor/eds-tokens'
 
 const StyledButton = styled(Button)`
     display: flex;
     align-items: center;
     gap: 8px;
     border-radius: 4px;
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
 `
 
 export const CreateEchoMissionButton = (): JSX.Element => {

frontend/src/components/Pages/InspectionPage/InspectionOverview.tsx

@@ -15,6 +15,7 @@ import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { EchoMissionDefinition } from 'models/MissionDefinition'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'
 import { Icons } from 'utils/icons'
+import { tokens } from '@equinor/eds-tokens'
 
 const StyledContent = styled.div`
     display: flex;
@@ -34,6 +35,11 @@ const StyledView = styled.div`
     align-items: flex-start;
 `
 
+const StyledButton = styled(Button)`
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
+`
+
 export const InspectionOverviewSection = () => {
     const { TranslateText } = useLanguageContext()
     const { installationCode } = useInstallationContext()
@@ -89,14 +95,14 @@ export const InspectionOverviewSection = () => {
     }
 
     const AddPredefinedMissionsButton = () => (
-        <Button
+        <StyledButton
             onClick={onClickScheduleMission}
             disabled={enabledRobots.length === 0 || installationCode === ''}
             ref={anchorRef}
         >
             <Icon name={Icons.Add} size={16} />
             {TranslateText('Add predefined Echo mission')}
-        </Button>
+        </StyledButton>
     )
 
     return (

frontend/src/components/Pages/InspectionPage/InspectionTable.tsx

@@ -12,7 +12,6 @@ import { compareInspections } from './InspectionUtilities'
 import { getDeadlineInDays } from 'utils/StringFormatting'
 import { AlreadyScheduledMissionDialog, ScheduleMissionDialog } from './ScheduleMissionDialogs'
 import { useEffect, useState } from 'react'
-import { TranslateTextWithContext } from 'components/Contexts/LanguageContext'
 import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 
 const StyledIcon = styled(Icon)`
@@ -45,6 +44,40 @@ const StyledCircle = styled.div`
     border-radius: 50px;
 `
 
+enum InspectionTableColumns {
+    Status = 'Status',
+    Name = 'Name',
+    Description = 'Description',
+    Area = 'Area',
+    LastCompleted = 'LastCompleted',
+    Deadline = 'Deadline',
+    AddToQueue = 'AddToQueue',
+}
+
+const HideColumnsOnSmallScreen = styled.div`
+    #SmallScreenInfoText {
+        display: none;
+    }
+    @media (max-width: 500px) {
+        #${InspectionTableColumns.Description} {
+            display: none;
+        }
+        #${InspectionTableColumns.LastCompleted} {
+            display: none;
+        }
+        #${InspectionTableColumns.Deadline} {
+            display: none;
+        }
+        #SmallScreenInfoText {
+            display: grid;
+            grid-template-columns: auto auto;
+            gap: 0.3em;
+            align-items: center;
+            padding-bottom: 1rem;
+        }
+    }
+`
+
 interface IProps {
     deck: Deck
     inspections: Inspection[]
@@ -144,20 +177,22 @@ const InspectionRow = ({ inspection, openDialog, setMissions, openScheduledDialo
 
     return (
         <Table.Row key={mission.id}>
-            <Table.Cell>{status}</Table.Cell>
-            <Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Status}>{status}</Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Name}>
                 <Typography
                     link
                     onClick={() => navigate(`${config.FRONTEND_BASE_ROUTE}/mission-definition/${mission.id}`)}
                 >
                     {mission.name}
                 </Typography>
             </Table.Cell>
-            <Table.Cell>{mission.comment}</Table.Cell>
-            <Table.Cell>{mission.area ? mission.area.areaName : '-'}</Table.Cell>
-            <Table.Cell>{lastCompleted}</Table.Cell>
-            <Table.Cell>{inspection.deadline ? formatDateString(inspection.deadline.toISOString()) : ''}</Table.Cell>
-            <Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Description}>{mission.comment}</Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Area}>{mission.area ? mission.area.areaName : '-'}</Table.Cell>
+            <Table.Cell id={InspectionTableColumns.LastCompleted}>{lastCompleted}</Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Deadline}>
+                {inspection.deadline ? formatDateString(inspection.deadline.toISOString()) : ''}
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.AddToQueue}>
                 {!isScheduled && (
                     <Button
                         variant="ghost_icon"
@@ -170,7 +205,6 @@ const InspectionRow = ({ inspection, openDialog, setMissions, openScheduledDialo
                             color={`${tokens.colors.interactive.focus.rgba}`}
                             name={Icons.AddOutlined}
                             size={24}
-                            title={TranslateTextWithContext('Add to queue')}
                         />
                     </Button>
                 )}
@@ -186,7 +220,6 @@ const InspectionRow = ({ inspection, openDialog, setMissions, openScheduledDialo
                             color={`${tokens.colors.interactive.focus.hex}`}
                             name={Icons.AddOutlined}
                             size={24}
-                            title={TranslateTextWithContext('Add to queue')}
                         />
                     </Button>
                 )}
@@ -195,7 +228,15 @@ const InspectionRow = ({ inspection, openDialog, setMissions, openScheduledDialo
     )
 }
 
-const columns = ['Status', 'Name', 'Description', 'Area', 'Last completed', 'Deadline', 'Add to queue']
+const SmallScreenInfoText = () => {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <div id="SmallScreenInfoText">
+            <Icon name={Icons.Info} size={24}></Icon>
+            <Typography>{TranslateText('Small screen info text')}</Typography>
+        </div>
+    )
+}
 
 export const InspectionTable = ({ deck, inspections, openDialog, setSelectedMissions }: IProps) => {
     const { TranslateText } = useLanguageContext()
@@ -225,21 +266,26 @@ export const InspectionTable = ({ deck, inspections, openDialog, setSelectedMiss
 
     return (
         <StyledTable>
-            <Table>
-                <Table.Caption>
-                    <Typography variant="h3" style={{ marginBottom: '14px' }}>
-                        {TranslateText('Inspection Missions') + ' ' + TranslateText('for') + ' ' + deck.deckName}
-                    </Typography>
-                </Table.Caption>
-                <Table.Head sticky>
-                    <Table.Row>
-                        {columns.map((col) => (
-                            <Table.Cell key={col}>{TranslateText(col)}</Table.Cell>
-                        ))}
-                    </Table.Row>
-                </Table.Head>
-                <Table.Body>{cellValues}</Table.Body>
-            </Table>
+            <HideColumnsOnSmallScreen>
+                <Table>
+                    <Table.Caption>
+                        <Typography variant="h3" style={{ marginBottom: '14px' }}>
+                            {TranslateText('Inspection Missions') + ' ' + TranslateText('for') + ' ' + deck.deckName}
+                        </Typography>
+                        <SmallScreenInfoText />
+                    </Table.Caption>
+                    <Table.Head sticky>
+                        <Table.Row>
+                            {Object.values(InspectionTableColumns).map((col) => (
+                                <Table.Cell id={col} key={col}>
+                                    {TranslateText(col)}
+                                </Table.Cell>
+                            ))}
+                        </Table.Row>
+                    </Table.Head>
+                    <Table.Body>{cellValues}</Table.Body>
+                </Table>
+            </HideColumnsOnSmallScreen>
             {isScheduledDialogOpen && (
                 <AlreadyScheduledMissionDialog openDialog={openDialog} closeDialog={closeScheduleDialog} />
             )}
@@ -306,28 +352,35 @@ export const AllInspectionsTable = ({ inspections }: ITableProps) => {
 
     return (
         <StyledTable>
-            <Table>
-                <Table.Head sticky>
-                    <Table.Row>
-                        {columns.map((col) => (
-                            <Table.Cell key={col}>{TranslateText(col)}</Table.Cell>
-                        ))}
-                    </Table.Row>
-                </Table.Head>
-                <Table.Body>{cellValues}</Table.Body>
-            </Table>
-            {isDialogOpen && (
-                <ScheduleMissionDialog
-                    missions={selectedMissions!}
-                    closeDialog={closeDialog}
-                    setMissions={setSelectedMissions}
-                    unscheduledMissions={unscheduledMissions}
-                    isAlreadyScheduled={isAlreadyScheduled}
-                />
-            )}
-            {isScheduledDialogOpen && (
-                <AlreadyScheduledMissionDialog openDialog={openDialog} closeDialog={closeScheduleDialog} />
-            )}
+            <HideColumnsOnSmallScreen>
+                <Table>
+                    <Table.Caption>
+                        <SmallScreenInfoText />
+                    </Table.Caption>
+                    <Table.Head sticky>
+                        <Table.Row>
+                            {Object.values(InspectionTableColumns).map((col) => (
+                                <Table.Cell id={col} key={col}>
+                                    {TranslateText(col)}
+                                </Table.Cell>
+                            ))}
+                        </Table.Row>
+                    </Table.Head>
+                    <Table.Body>{cellValues}</Table.Body>
+                </Table>
+                {isDialogOpen && (
+                    <ScheduleMissionDialog
+                        missions={selectedMissions!}
+                        closeDialog={closeDialog}
+                        setMissions={setSelectedMissions}
+                        unscheduledMissions={unscheduledMissions}
+                        isAlreadyScheduled={isAlreadyScheduled}
+                    />
+                )}
+                {isScheduledDialogOpen && (
+                    <AlreadyScheduledMissionDialog openDialog={openDialog} closeDialog={closeScheduleDialog} />
+                )}
+            </HideColumnsOnSmallScreen>
         </StyledTable>
     )
 }

frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx

@@ -13,6 +13,7 @@ import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { ScheduleMissionWithLocalizationVerificationDialog } from 'components/Displays/LocalizationVerification/ScheduleMissionWithLocalizationVerification'
+import { tokens } from '@equinor/eds-tokens'
 
 interface IProps {
     missions: CondensedMissionDefinition[]
@@ -52,7 +53,7 @@ const StyledDangerContent = styled.div`
 const StyledButton = styled(Button)`
     display: inline-block;
     height: auto;
-    min-height: 35px;
+    min-height: ${tokens.shape.button.minHeight};
 `
 
 export const ScheduleMissionDialog = (props: IProps): JSX.Element => {

frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx

@@ -15,8 +15,8 @@ const feedbackTimer = 10000 // Clear feedback after 10 seconds
 
 const StyledButton = styled.div`
     display: flex;
-    justifycontent: center;
-    margintop: auto;
+    justify-content: end;
+    margin-top: 8px;
 `
 
 export const MoveRobotArm = ({ robot, armPosition, isRobotAvailable }: RobotProps) => {

frontend/src/language/en.json

@@ -116,9 +116,9 @@
     "Filter error": "Filter error",
     "or": "or",
     "Show only active installations": "Show only active installations",
-    "Last completed": "Last completed",
+    "LastCompleted": "Last completed",
     "Deadline": "Deadline",
-    "Add to queue": "Add to queue",
+    "AddToQueue": "Add to queue",
     "Add mission to the queue": "Add mission to the queue",
     "Not yet performed": "Not yet performed",
     "Never": "Never",
@@ -202,5 +202,6 @@
     "The robot": "The robot",
     "is blocked and cannot perform tasks": "is blocked and cannot perform tasks",
     "Blocked": "Blocked",
-    "Several robots are blocked and cannot perform tasks.": "Several robots are blocked and cannot perform tasks."
+    "Several robots are blocked and cannot perform tasks.": "Several robots are blocked and cannot perform tasks.",
+    "Small screen info text": "Some columns in the table are hidden due to small screen. Rotate the screen to show more."
 }

frontend/src/language/no.json

@@ -116,9 +116,9 @@
     "Filter error": "Filter feilmelding",
     "or": "eller",
     "Show only active installations": "Vis kun aktive anlegg",
-    "Last completed": "Sist fullført",
+    "LastCompleted": "Sist fullført",
     "Deadline": "Frist",
-    "Add to queue": "Legg til i kø",
+    "AddToQueue": "Legg til i kø",
     "Add mission to the queue": "Legg til oppdrag i kø",
     "Not yet performed": "Aldri kjørt",
     "Never": "Aldri",
@@ -203,5 +203,6 @@
     "The robot": "Roboten",
     "is blocked and cannot perform tasks": "er blokkert og kan ikke utføre oppgaver",
     "Blocked": "Blokkert",
-    "Several robots are blocked and cannot perform tasks.": "Flere roboter er blokkerte og kan ikke utføre oppgaver."
+    "Several robots are blocked and cannot perform tasks.": "Flere roboter er blokkerte og kan ikke utføre oppgaver.",
+    "Small screen info text": "Noen kolonner i tabellen er skjult pga liten skjerm. Roter skjermen for å vise flere kolonner."
 }

frontend/src/utils/icons.tsx

@@ -39,6 +39,7 @@ import {
     library_add,
     play,
     edit,
+    info_circle,
 } from '@equinor/eds-icons'
 
 Icon.add({
@@ -81,6 +82,7 @@ Icon.add({
     library_add,
     play,
     edit,
+    info_circle,
 })
 
 export enum Icons {
@@ -123,4 +125,5 @@ export enum Icons {
     LibraryAdd = 'library_add',
     PlayTriangle = 'play',
     Edit = 'edit',
+    Info = 'info_circle',
 }