From 1d8e9f9c6b6c49afe28e5562bebe79c02512743d Mon Sep 17 00:00:00 2001 From: Mathias Oppedal Heggelund <98742460+mheggelund@users.noreply.github.com> Date: Mon, 4 Mar 2024 08:23:57 +0100 Subject: [PATCH] Fix/stylings (#247) * fix: Remove scroll on table. Center column headers. * fix: Responsive scaling of result image dialog on viewport zoom. * fix: Responsive scaling of area coordinate dialog on viewport zoom. * fix: Responsive scaling of add/edit model dialog on viewport zoom. * fix: Change font for numeric data in result table. --- .../AreaCoordinates.styled.tsx | 11 ++++- .../AddModelDialog/AddModelDialog.styled.ts | 11 ++++- src/features/ModelTable/ModelTable.styled.ts | 12 +++++- .../ChannelResultTable.styled.tsx | 2 +- .../ImageResult/ImageResult.styled.ts | 39 +++++++++++++++++- .../ImageResult/ImageResult.tsx | 41 ++++++++----------- .../VariogramResultTable.styled.ts | 2 +- 7 files changed, 86 insertions(+), 32 deletions(-) diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx index 169ec7f1..eb8c1e20 100644 --- a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx +++ b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx @@ -5,6 +5,13 @@ import { theme } from '../../tokens/theme'; export const StyledDialog = styled(Dialog)` width: fit-content; + max-width: 90vw; + max-height: 90vh; + + @media (min-width: 700px) { + max-height: 90vh; + overflow-x: scroll; + } `; export const ContentSplitter = styled.div` @@ -19,7 +26,9 @@ export const Selects = styled.div` row-gap: ${spacings.XXX_LARGE}; - min-width: 450px; + @media (min-width: 750px) { + min-width: 450px; + } `; export const CoordinateFields = styled.div` diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts b/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts index 09bd1ca4..dce60ded 100644 --- a/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts +++ b/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts @@ -3,8 +3,17 @@ import styled from 'styled-components'; import { spacings } from '../../../tokens/spacings'; const StyledDialog = styled(Dialog)` - min-width: 600px; overflow-y: scroll; + width: fit-content; + max-width: 90vw; + max-height: 90vh; + + @media (min-width: 650px) { + min-width: 600px; + + max-height: 90vh; + overflow-x: scroll; + } `; const StyledDialogCustomContent = styled(Dialog.CustomContent)` diff --git a/src/features/ModelTable/ModelTable.styled.ts b/src/features/ModelTable/ModelTable.styled.ts index 7ba00e7d..999cf714 100644 --- a/src/features/ModelTable/ModelTable.styled.ts +++ b/src/features/ModelTable/ModelTable.styled.ts @@ -2,13 +2,21 @@ import styled from 'styled-components'; import { spacings } from '../../tokens/spacings'; export const Table = styled.div` - overflow-x: auto; padding-bottom: ${spacings.MEDIUM}; max-width: 1750px; - > div { + height: 100%; + overflow: hidden; > table { min-width: 90% !important; + + > thead { + > tr { + > th { + vertical-align: middle !important; + } + } + } } > div { margin-top: 2rem; diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx index 357d6ece..742e7f78 100644 --- a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx +++ b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx @@ -18,7 +18,7 @@ export const DataCell = styled(Table.Cell)` border: solid 0.5px ${theme.light.ui.background.medium}; width: 150px; white-space: nowrap; - font-family: Equinor Mono; + font-family: cell_numeric_monospaced; > div { display: flex; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts index d93c9614..06153d19 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts @@ -2,10 +2,12 @@ import { Dialog } from '@equinor/eds-core-react'; import styled from 'styled-components'; import { spacings } from '../../../../../../tokens/spacings'; +import { theme } from '../../../../../../tokens/theme'; + export const StyledDialog = styled(Dialog)` width: fit-content; - min-width: 500px; - min-height: 500px; + max-width: 90vw; + max-height: 90vh; `; export const Content = styled(Dialog.CustomContent)` @@ -16,3 +18,36 @@ export const Content = styled(Dialog.CustomContent)` `; export { StyledDialog as Dialog }; + +export const ImageWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + border-style: solid; + border-width: 1px; + border-color: ${theme.light.ui.background.medium}; + + > h5 { + font-weight: normal; + padding: ${spacings.SMALL}; + } + + > .image { + width: fit-content; + max-width: 80vw; + max-height: 70vh; + padding: ${spacings.SMALL}; + + @media (max-width: 1200px) { + width: fit-content; + max-width: 70vw; + max-height: 60vh; + } + @media (max-width: 800px) { + width: fit-content; + max-width: 60vw; + max-height: 50vh; + } + } +`; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx index 7aee564b..6f752260 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx @@ -1,7 +1,6 @@ -import { Button, Dialog } from '@equinor/eds-core-react'; +import { Button, Dialog, Typography } from '@equinor/eds-core-react'; import { useQuery } from '@tanstack/react-query'; import { getVariogramImage } from '../../../../../../api/custom/getImageById'; -import { ImageView } from '../../../../../../components/ImageView/ImageView'; import * as Styled from './ImageResult.styled'; export const ImageResult = ({ @@ -20,28 +19,22 @@ export const ImageResult = ({ }); return ( - <> - - - Result image - - - {isLoading && <>Loading ...} - {data && ( - - )} - + + + {isLoading && <>Loading ...} + {data && ( + + Case results + Case results + + )} + - - - - - + + + + ); }; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts index 4ca337ea..119fa755 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts @@ -37,7 +37,7 @@ export const Quality = styled.span` display: flex; flex-direction: column; align-items: end; - font-family: Equinor Mono; + font-family: cell_numeric_monospaced; `; export { StyledDialog as Dialog };