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.
equinor · Mar 4, 2024 · 1d8e9f9 · 1d8e9f9
1 parent 28d1361
commit 1d8e9f9
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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/...seResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx b/...seResult/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/...s/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts b/...s/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/...eatures/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/...eatures/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 (
-    <>
-      <Styled.Dialog open={open} isDismissable>
-        <Dialog.Header>
-          <Dialog.Title>Result image</Dialog.Title>
-        </Dialog.Header>
-        <Styled.Content>
-          {isLoading && <>Loading ...</>}
-          {data && (
-            <ImageView
-              text="Case results"
-              img={data ? data : ''}
-              altText="Case results"
-            ></ImageView>
-          )}
-        </Styled.Content>
+    <Styled.Dialog open={open} isDismissable>
+      <Styled.Content>
+        {isLoading && <>Loading ...</>}
+        {data && (
+          <Styled.ImageWrapper>
+            <img className="image" alt="Case results" src={data ? data : ''} />
+            <Typography variant="h5">Case results</Typography>
+          </Styled.ImageWrapper>
+        )}
+      </Styled.Content>
 
-        <Dialog.Actions>
-          <Button variant="ghost" onClick={() => setOpen(!open)}>
-            Close
-          </Button>
-        </Dialog.Actions>
-      </Styled.Dialog>
-    </>
+      <Dialog.Actions>
+        <Button variant="ghost" onClick={() => setOpen(!open)}>
+          Close
+        </Button>
+      </Dialog.Actions>
+    </Styled.Dialog>
   );
 };
diff --git a/...lt/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts b/...lt/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 };