From 6ef453e905252d12637be3d28799f26a1f6797a4 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Fri, 17 Jan 2025 12:50:08 -0600 Subject: [PATCH] Refactor shared styled containers --- .../CenteredLayout/CenteredLayout.js | 63 ++-------- .../Layout/components/MaxWidth/MaxWidth.js | 108 +++++------------- .../components/NoMaxWidth/NoMaxWidth.js | 62 ++-------- .../components/shared/StyledContainers.js | 56 +++++++++ 4 files changed, 100 insertions(+), 189 deletions(-) create mode 100644 packages/lib-classifier/src/components/Classifier/components/Layout/components/shared/StyledContainers.js diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js index 8744ec8e06..70e542e734 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js @@ -3,12 +3,19 @@ import { Box, Grid } from 'grommet' import Banners from '@components/Classifier/components/Banners' import FeedbackModal from '@components/Classifier/components/Feedback' -import ImageToolbar from '@components/Classifier/components/ImageToolbar' import MetaTools from '@components/Classifier/components/MetaTools' import QuickTalk from '@components/Classifier/components/QuickTalk' import SubjectViewer from '@components/Classifier/components/SubjectViewer' import TaskArea from '@components/Classifier/components/TaskArea' import FieldGuide from '@components/Classifier/components/FieldGuide' +import { + ViewerGrid, + StyledSubjectContainer, + StyledImageToolbarContainer, + StyledImageToolbar, + StyledTaskAreaContainer, + StyledTaskArea +} from '../shared/StyledContainers' const ContainerGrid = styled(Grid)` position: relative; @@ -28,6 +35,7 @@ const ContainerGrid = styled(Grid)` margin: 0; } ` : css` + // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem @media screen and (min-width: 769px) and (max-width: 70rem) { grid-gap: 1.25rem; grid-template-areas: 'viewer task'; @@ -46,59 +54,6 @@ const ContainerGrid = styled(Grid)` } ` -export const ViewerGrid = styled(Grid)` - ${props => props.hasSurveyTask - ? css` - @media screen and (min-width: 70rem) { - position: sticky; - top: 10px; - } - ` - : css` - @media screen and (min-width: 769px) { - position: sticky; - top: 10px; - } - `} - height: fit-content; - grid-area: viewer; - grid-template-columns: auto clamp(3rem, 10%, 4.5rem); - grid-template-rows: auto; - grid-template-areas: 'subject toolbar'; -` - -const StyledSubjectContainer = styled(Box)` - grid-area: subject; - position: sticky; -` - -const StyledImageToolbarContainer = styled.div` - grid-area: toolbar; -` - -const StyledImageToolbar = styled(ImageToolbar)` - position: sticky; - top: 10px; -` - -const StyledTaskAreaContainer = styled.div` - grid-area: task; -` - -const StyledTaskArea = styled(Box)` - ${props => props.hasSurveyTask ? css` - @media screen and (min-width: 70rem) { - position: sticky; - top: 10px; - } - ` : css` - @media screen and (min-width: 769px) { - position: sticky; - top: 10px; - } - `} -` - export default function CenteredLayout({ className = '', separateFramesView = false, diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js index fdd816368a..9c071f170c 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js @@ -3,42 +3,45 @@ import { Box, Grid } from 'grommet' import Banners from '@components/Classifier/components/Banners' import FeedbackModal from '@components/Classifier/components/Feedback' -import ImageToolbar from '@components/Classifier/components/ImageToolbar' import MetaTools from '@components/Classifier/components/MetaTools' import QuickTalk from '@components/Classifier/components/QuickTalk' import SubjectViewer from '@components/Classifier/components/SubjectViewer' import TaskArea from '@components/Classifier/components/TaskArea' import FieldGuide from '@components/Classifier/components/FieldGuide' +import { + ViewerGrid, + StyledSubjectContainer, + StyledImageToolbarContainer, + StyledImageToolbar, + StyledTaskAreaContainer, + StyledTaskArea +} from '../shared/StyledContainers' export const ContainerGrid = styled(Grid)` position: relative; grid-gap: 1.875rem; grid-template-areas: 'viewer task'; - grid-template-columns: minmax(auto, 100rem) ${props => - props.hasSurveyTask ? '33.75rem' : '25rem'}; + grid-template-columns: minmax(auto, 100rem) ${props => props.hasSurveyTask ? '33.75rem' : '25rem'}; margin: auto; - ${props => - props.hasSurveyTask - ? css` - @media screen and (min-width: 769px) and (max-width: 70rem) { - grid-gap: 1.25rem; - grid-template-areas: - 'viewer' - 'task'; - grid-template-columns: 100%; - grid-template-rows: auto auto; - margin: 0; - } - ` - : css` - // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem - @media screen and (min-width: 769px) and (max-width: 70rem) { - grid-gap: 1.25rem; - grid-template-areas: 'viewer task'; - grid-template-columns: 9fr 5fr; - } - `} + ${props => props.hasSurveyTask ? css` + @media screen and (min-width: 769px) and (max-width: 70rem) { + grid-gap: 1.25rem; + grid-template-areas: + 'viewer' + 'task'; + grid-template-columns: 100%; + grid-template-rows: auto auto; + margin: 0; + } + ` : css` + // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem + @media screen and (min-width: 769px) and (max-width: 70rem) { + grid-gap: 1.25rem; + grid-template-areas: 'viewer task'; + grid-template-columns: 9fr 5fr; + } + `} @media screen and (max-width: 768px) { grid-gap: 1.25rem; @@ -51,63 +54,6 @@ export const ContainerGrid = styled(Grid)` } ` -export const ViewerGrid = styled(Grid)` - ${props => - props.hasSurveyTask - ? css` - @media screen and (min-width: 70rem) { - position: sticky; - top: 10px; - } - ` - : css` - @media screen and (min-width: 769px) { - position: sticky; - top: 10px; - } - `} - height: fit-content; - grid-area: viewer; - grid-template-columns: auto clamp(3rem, 10%, 4.5rem); - grid-template-rows: auto; - grid-template-areas: 'subject toolbar'; -` - -const StyledSubjectContainer = styled(Box)` - grid-area: subject; - position: sticky; -` - -const StyledImageToolbarContainer = styled.div` - grid-area: toolbar; -` - -const StyledImageToolbar = styled(ImageToolbar)` - position: sticky; - top: 10px; -` - -const StyledTaskAreaContainer = styled.div` - grid-area: task; -` - -const StyledTaskArea = styled(Box)` - ${props => - props.hasSurveyTask - ? css` - @media screen and (min-width: 70rem) { - position: sticky; - top: 10px; - } - ` - : css` - @media screen and (min-width: 769px) { - position: sticky; - top: 10px; - } - `} -` - export default function MaxWidth({ className = '', separateFramesView = false, diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js index 57a798520f..955aa5befa 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js @@ -3,12 +3,19 @@ import { Box, Grid } from 'grommet' import Banners from '@components/Classifier/components/Banners' import FeedbackModal from '@components/Classifier/components/Feedback' -import ImageToolbar from '@components/Classifier/components/ImageToolbar' import MetaTools from '@components/Classifier/components/MetaTools' import QuickTalk from '@components/Classifier/components/QuickTalk' import SubjectViewer from '@components/Classifier/components/SubjectViewer' import TaskArea from '@components/Classifier/components/TaskArea' import FieldGuide from '@components/Classifier/components/FieldGuide' +import { + ViewerGrid, + StyledSubjectContainer, + StyledImageToolbarContainer, + StyledImageToolbar, + StyledTaskAreaContainer, + StyledTaskArea +} from '../shared/StyledContainers' const ContainerGrid = styled(Grid)` position: relative; @@ -46,59 +53,6 @@ const ContainerGrid = styled(Grid)` } ` -export const ViewerGrid = styled(Grid)` - ${props => props.hasSurveyTask - ? css` - @media screen and (min-width: 70rem) { - position: sticky; - top: 10px; - } - ` - : css` - @media screen and (min-width: 769px) { - position: sticky; - top: 10px; - } - `} - height: fit-content; - grid-area: viewer; - grid-template-columns: auto clamp(3rem, 10%, 4.5rem); - grid-template-rows: auto; - grid-template-areas: 'subject toolbar'; -` - -const StyledSubjectContainer = styled(Box)` - grid-area: subject; - position: sticky; -` - -const StyledImageToolbarContainer = styled.div` - grid-area: toolbar; -` - -const StyledImageToolbar = styled(ImageToolbar)` - position: sticky; - top: 10px; -` - -const StyledTaskAreaContainer = styled.div` - grid-area: task; -` - -const StyledTaskArea = styled(Box)` - ${props => props.hasSurveyTask ? css` - @media screen and (min-width: 70rem) { - position: sticky; - top: 10px; - } - ` : css` - @media screen and (min-width: 769px) { - position: sticky; - top: 10px; - } - `} -` - export default function NoMaxWidth({ className = '', separateFramesView = false, diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/shared/StyledContainers.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/shared/StyledContainers.js new file mode 100644 index 0000000000..6e857ee02a --- /dev/null +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/shared/StyledContainers.js @@ -0,0 +1,56 @@ +import styled, { css } from 'styled-components' +import { Box, Grid } from 'grommet' +import ImageToolbar from '@components/Classifier/components/ImageToolbar' + +export const ViewerGrid = styled(Grid)` + ${props => props.hasSurveyTask + ? css` + @media screen and (min-width: 70rem) { + position: sticky; + top: 10px; + } + ` + : css` + @media screen and (min-width: 769px) { + position: sticky; + top: 10px; + } + `} + height: fit-content; + grid-area: viewer; + grid-template-columns: auto clamp(3rem, 10%, 4.5rem); + grid-template-rows: auto; + grid-template-areas: 'subject toolbar'; +` + +export const StyledSubjectContainer = styled(Box)` + grid-area: subject; + position: sticky; +` + +export const StyledImageToolbarContainer = styled.div` + grid-area: toolbar; +` + +export const StyledImageToolbar = styled(ImageToolbar)` + position: sticky; + top: 10px; +` + +export const StyledTaskAreaContainer = styled.div` + grid-area: task; +` + +export const StyledTaskArea = styled(Box)` + ${props => props.hasSurveyTask ? css` + @media screen and (min-width: 70rem) { + position: sticky; + top: 10px; + } + ` : css` + @media screen and (min-width: 769px) { + position: sticky; + top: 10px; + } + `} +`