Skip to content

Commit

Permalink
Fix typos, minor clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@o-jorgensen
o-jorgensen committed Dec 11, 2024
1 parent 9f6ce28 commit 1947069
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 61 deletions.
80 changes: 44 additions & 36 deletions ...s/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,55 @@ import styled from 'styled-components';
import { spacings } from '../../../../../../tokens/spacings';

export const StyledDialog = styled(Dialog)`
width: min(1500px, 90vw);
height: min(1000px, 90vh);
grid-template-rows: auto 52px;
`;
--image-width: 1500px;
--image-height: 1000px;
export const Content = styled(Dialog.CustomContent)`
display: flex;
flex-direction: column;
row-gap: ${spacings.SMALL};
.tabs {
display: flex;
flex-direction: column;
height: 100%;
}
width: min(var(--image-width), 90vw);
height: min(var(--image-height), 90vh);
grid-template-rows: auto 52px;
.tabs-panels {
flex: 1;
.dialog-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.tabs-panel {
align-self: center;
row-gap: ${spacings.SMALL};
.tabs {
display: flex;
flex-direction: column;
height: 100%;
}
.tabs-panels {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.tabs-panel {
align-self: center;
}
.image-wrapper {
margin: 0;
}
.image {
display: block;
width: 100%;
object-fit: contain;
/* Tweak the content height inside the dialog minus tabs, actions, padding, etc. */
max-height: calc(
min(var(--image-height), 90vh) -
(16px + 48px + 16px + 16px + 52px + 16px)
);
}
.placeholder-text {
text-align: center;
}
}
`;

export { StyledDialog as Dialog };

export const ImageWrapper = styled.div`
.image {
display: block;
width: 100%;
object-fit: contain;
max-height: calc(
min(1000px, 90vh) - 16px - 48px - 16px - 16px - 52px - 16px
); /* Tweaking the height to match the content area minus patting, tab bars, action bar, etc. */
}
.placeholder-text {
text-align: center;
}
`;
50 changes: 25 additions & 25 deletions ...eatures/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const ImageResult = ({

return (
<Styled.Dialog open={open} isDismissable>
<Styled.Content>
<Dialog.CustomContent className="dialog-content">
<Tabs activeTab={activeTab} onChange={handleChange} className="tabs">
<Tabs.List>
<Tabs.Tab>Variogram slice</Tabs.Tab>
Expand All @@ -106,17 +106,17 @@ export const ImageResult = ({
)}

{loadedVariogramSlicesImage.data && (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<img
className="image"
alt="Case results"
alt="Variogram x/y/z slice"
src={
loadedVariogramSlicesImage.data
? loadedVariogramSlicesImage.data
: ''
}
/>
</Styled.ImageWrapper>
</figure>
)}
</>
</Tabs.Panel>
Expand All @@ -135,28 +135,28 @@ export const ImageResult = ({
</>
)}
{loadedSphericalImage.data && (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<img
className="image"
alt="Spherical"
alt="Spherical variogram (empirical and fitted)"
src={
loadedSphericalImage.data
? loadedSphericalImage.data
: ''
}
/>
</Styled.ImageWrapper>
</figure>
)}
</>
) : (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
Spherical variogram model is not included in the result
</Typography>
</Styled.ImageWrapper>
</figure>
)}
</>
</Tabs.Panel>
Expand All @@ -175,28 +175,28 @@ export const ImageResult = ({
</>
)}
{loadedGaussianImage.data && (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<img
className="image"
alt="Gaussian"
alt="Gaussian variogram (empirical and fitted)"
src={
loadedGaussianImage.data
? loadedGaussianImage.data
: ''
}
/>
</Styled.ImageWrapper>
</figure>
)}
</>
) : (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
Gaussian variogram model is not included in the result
</Typography>
</Styled.ImageWrapper>
</figure>
)}
</>
</Tabs.Panel>
Expand All @@ -217,29 +217,29 @@ export const ImageResult = ({
</>
)}
{loadedGeneralExponentialImage.data && (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<img
className="image"
alt="General Exponential"
alt="General Exponential variogram (empirical and fitted)"
src={
loadedGeneralExponentialImage.data
? loadedGeneralExponentialImage.data
: ''
}
/>
</Styled.ImageWrapper>
</figure>
)}
</>
) : (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
General exponential variogram model is not included in the
result
</Typography>
</Styled.ImageWrapper>
</figure>
)}
</>
</Tabs.Panel>
Expand All @@ -258,34 +258,34 @@ export const ImageResult = ({
</>
)}
{loadedExponentialImage.data && (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<img
className="image"
alt="Exponential"
alt="Exponential variogram (empirical and fitted)"
src={
loadedExponentialImage.data
? loadedExponentialImage.data
: ''
}
/>
</Styled.ImageWrapper>
</figure>
)}
</>
) : (
<Styled.ImageWrapper>
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
Exponential variogram model is not included in the result
</Typography>
</Styled.ImageWrapper>
</figure>
)}
</>
</Tabs.Panel>
</Tabs.Panels>
</Tabs>
</Styled.Content>
</Dialog.CustomContent>

<Dialog.Actions>
<Button variant="contained" onClick={() => setOpen(!open)}>
Expand Down

0 comments on commit 1947069

Please sign in to comment.