Skip to content

Commit

Permalink
Refactor shared styled containers
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcbouslog
mcbouslog committed Jan 17, 2025
1 parent 947c6bf commit 6ef453e
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 189 deletions.
63 changes: 9 additions & 54 deletions ...r/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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';
Expand All @@ -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,
Expand Down
108 changes: 27 additions & 81 deletions ...ib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down
62 changes: 8 additions & 54 deletions ...lassifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
56 changes: 56 additions & 0 deletions ...ssifier/src/components/Classifier/components/Layout/components/shared/StyledContainers.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
`}
`

0 comments on commit 6ef453e

Please sign in to comment.