Make the classifier's subject viewer sticky (#6103)

* Sticky subject viewer for NoMaxWidth and MaxWidth layouts * fix CenteredLayout's sticky task area * when 'size' is small, don't use sticky styling
zooniverse · May 29, 2024 · 952fdb6 · 952fdb6
1 parent de180dc
commit 952fdb6
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 63 deletions.
diff --git a/...r/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js b/...r/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Box, ResponsiveContext } from 'grommet'
 
 import Banners from '@components/Classifier/components/Banners'
@@ -15,10 +15,23 @@ export const Relative = styled(Box)`
   position: relative; // Used for QuickTalk and FeedbackModal positioning
 `
 
+const StickySubjectViewer = styled(Box)`
+  ${props =>
+    props.size !== 'small' &&
+    css`
+      position: sticky;
+      top: 10px;
+    `}
+`
+
 const StickyTaskArea = styled(Box)`
   flex: initial; // Don't stretch vertically
-  position: sticky;
-  top: 10px;
+  ${props =>
+    props.size !== 'small' &&
+    css`
+      position: sticky;
+      top: 10px;
+    `}
 `
 
 const StickyImageToolbar = styled(ImageToolbar)`
@@ -50,26 +63,25 @@ export default function CenteredLayout({ separateFramesView = false }) {
           direction='row'
           margin={size === 'small' ? 'auto' : 'none'}
         >
-          <Box>
+          <StickySubjectViewer size={size}>
             <Banners />
             <SubjectViewer />
             <MetaTools />
-          </Box>
+          </StickySubjectViewer>
           {!separateFramesView && (
             <Box width='3rem' fill='vertical' style={{ minWidth: '3rem' }}>
               <StickyImageToolbar />
             </Box>
           )}
         </Box>
-        <Box
+        <StickyTaskArea
           width={size === 'small' ? '100%' : '25rem'}
           fill={size === 'small' ? 'horizontal' : 'vertical'}
+          size={size}
         >
-          <StickyTaskArea>
-            <TaskArea />
-            {separateFramesView && <FieldGuide />}
-          </StickyTaskArea>
-        </Box>
+          <TaskArea />
+          {separateFramesView && <FieldGuide />}
+        </StickyTaskArea>
       </Box>
       <FeedbackModal />
       <QuickTalk />

diff --git a/...ib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js b/...ib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Box, Grid, ResponsiveContext } from 'grommet'
 
 import Banners from '@components/Classifier/components/Banners'
@@ -21,13 +21,31 @@ export const ContainerGrid = styled(Grid)`
   }
 `
 
+export const ViewerGrid = styled(Grid)`
+  ${props =>
+    props.size !== 'small' &&
+    css`
+      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 StyledTaskAreaContainer = styled.div`
   grid-area: task;
 `
 
 const StyledTaskArea = styled(Box)`
-  position: sticky;
-  top: 10px;
+  ${props =>
+    props.size !== 'small' &&
+    css`
+      position: sticky;
+      top: 10px;
+    `}
 `
 
 const StyledImageToolbarContainer = styled.div`
@@ -39,21 +57,6 @@ const StyledImageToolbar = styled(ImageToolbar)`
   top: 10px;
 `
 
-export function ViewerGrid({ children }) {
-  return (
-    <Grid
-      as='section'
-      areas={[['subject', 'toolbar']]}
-      columns={['auto', 'clamp(3rem, 10%, 4.5rem)']}
-      gridArea='viewer'
-      height='fit-content'
-      rows={['auto']}
-    >
-      {children}
-    </Grid>
-  )
-}
-
 export const verticalLayout = {
   areas: [['viewer'], ['task']],
   columns: ['100%'],
@@ -87,7 +90,7 @@ export default function MaxWidth({
           <MetaTools />
         </Box>
       ) : (
-        <ViewerGrid>
+        <ViewerGrid forwardedAs='section' size={size}>
           <Box gridArea='subject'>
             <Banners />
             <SubjectViewer />
@@ -99,7 +102,7 @@ export default function MaxWidth({
         </ViewerGrid>
       )}
       <StyledTaskAreaContainer>
-        <StyledTaskArea>
+        <StyledTaskArea size={size}>
           <TaskArea />
           {separateFramesView && <FieldGuide />}
         </StyledTaskArea>

diff --git a/...lassifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js b/...lassifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { Box, Grid, ResponsiveContext } from 'grommet'
 
 import Banners from '@components/Classifier/components/Banners'
@@ -21,13 +21,31 @@ const ContainerGrid = styled(Grid)`
   }
 `
 
+export const ViewerGrid = styled(Grid)`
+  ${props =>
+    props.size !== 'small' &&
+    css`
+      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 StyledTaskAreaContainer = styled.div`
   grid-area: task;
 `
 
 const StyledTaskArea = styled(Box)`
-  position: sticky;
-  top: 10px;
+  ${props =>
+    props.size !== 'small' &&
+    css`
+      position: sticky;
+      top: 10px;
+    `}
 `
 
 const StyledImageToolbarContainer = styled.div`
@@ -39,39 +57,26 @@ const StyledImageToolbar = styled(ImageToolbar)`
   top: 10px;
 `
 
-export function ViewerGrid({ children }) {
-  return (
-    <Grid
-      as='section'
-      areas={[['subject', 'toolbar']]}
-      columns={['auto', 'clamp(3rem, 10%, 4.5rem)']}
-      gridArea='viewer'
-      height='fit-content'
-      rows={['auto']}
-    >
-      {children}
-    </Grid>
-  )
+const verticalLayout = {
+  areas: [['viewer'], ['task']],
+  columns: ['100%'],
+  gap: 'small',
+  margin: 'none',
+  rows: ['auto', 'auto']
+}
+
+const horizontalLayout = {
+  areas: [['viewer', 'task']],
+  columns: ['auto', '25rem'],
+  gap: 'medium',
+  rows: ['auto']
 }
 
 export default function NoMaxWidth({
   className = '',
   separateFramesView = false
 }) {
   const size = useContext(ResponsiveContext)
-  const verticalLayout = {
-    areas: [['viewer'], ['task']],
-    columns: ['100%'],
-    gap: 'small',
-    margin: 'none',
-    rows: ['auto', 'auto']
-  }
-  const horizontalLayout = {
-    areas: [['viewer', 'task']],
-    columns: ['auto', '25rem'],
-    gap: 'medium',
-    rows: ['auto']
-  }
   const containerGridProps =
     size === 'small' ? verticalLayout : horizontalLayout
 
@@ -84,7 +89,7 @@ export default function NoMaxWidth({
           <MetaTools />
         </Box>
       ) : (
-        <ViewerGrid>
+        <ViewerGrid forwardedAs='section' size={size}>
           <Box gridArea='subject'>
             <Banners />
             <SubjectViewer />
@@ -96,7 +101,7 @@ export default function NoMaxWidth({
         </ViewerGrid>
       )}
       <StyledTaskAreaContainer>
-        <StyledTaskArea>
+        <StyledTaskArea size={size}>
           <TaskArea />
           {separateFramesView && <FieldGuide />}
         </StyledTaskArea>

diff --git a/...lib-classifier/src/components/Classifier/components/Layout/helpers/getLayout/getLayout.js b/...lib-classifier/src/components/Classifier/components/Layout/helpers/getLayout/getLayout.js
@@ -4,7 +4,6 @@ export default function getLayout(layout) {
   if (layouts[layout]) {
     return layouts[layout]
   } else {
-    console.warn(`Couldn't find a layout for '${layout}', falling back to default`)
     return defaultLayout
   }
 }