Fix vertical scrolling (#909)

Fixes an issue with vertical scrolling at small resolutions, where scrolling would move the content from the right side INTO the menu on the left side. The overall layout should in general behave a little nicer for small resolutions/high zoom levels, though this by no means enough for a "mobile version" and some views will still look odd (e.g. the cutting view). Also cleans the related CSS up a bit.
opencast · Dec 23, 2022 · 7e6f91a · 7e6f91a
1 parent 89f4a54
commit 7e6f91a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 70 deletions.
diff --git a/src/main/Body.tsx b/src/main/Body.tsx
@@ -6,6 +6,8 @@ import TheEnd from './TheEnd';
 import Error from './Error';
 import Landing from "./Landing";
 
+import { css } from '@emotion/react'
+
 import { useSelector } from 'react-redux';
 import { selectIsEnd } from '../redux/endSlice'
 import { selectIsError } from "../redux/errorSlice";
@@ -42,11 +44,11 @@ const Body: React.FC<{}> = () => {
     }
   }
 
-  const bodyStyle = {
+  const bodyStyle = css({
     display: 'flex',
-    flexDirection: 'row' as const,
+    flexDirection: 'row',
     height: '100%',
-  };
+  });
 
   return (
     <React.Fragment>

diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
@@ -49,143 +49,109 @@ const MainContent: React.FC<{}> = () => {
     }
   });
 
-  const cuttingStyle = css({
+  const mainContentStyle = css({
     display: 'flex',
-    flexDirection: 'column' as const,
-    justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
+    width: '100%',
     paddingRight: '20px',
-    paddingLeft: '161px',
+    paddingLeft: '20px',
+    ...(flexGapReplacementStyle(20, false)),
     background: `${theme.background}`,
+    overflow: 'vertical',
+  })
+
+  const cuttingStyle = css({
+    flexDirection: 'column',
   })
 
   const metadataStyle = css({
-    display: 'flex',
-    // flexDirection: 'column' as const,
-    // justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
   })
 
   const trackSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
   })
 
   const subtitleSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     justifyContent: 'space-around',
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    height: '100%',
-    background: `${theme.background}`,
   })
 
   const thumbnailSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
   })
 
   const finishStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    minHeight: '100vh',
-    background: `${theme.background}`,
   })
 
   const keyboardControlsStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
-    // justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
+    flexDirection: 'column',
   })
 
   const defaultStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignItems: 'center',
     padding: '20px',
-    ...(flexGapReplacementStyle(20, false)),
   })
 
   const render = () => {
     if (mainMenuState === MainMenuStateNames.cutting) {
       return (
-        <div css={cuttingStyle}>
+        <div css={[mainContentStyle, cuttingStyle]} role="main">
           <Video />
           <CuttingActions />
           <CuttingTimeline />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.metadata) {
       return (
-        <div css={metadataStyle}>
+        <div css={[mainContentStyle, metadataStyle]} role="main">
           <Metadata />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.trackSelection) {
       return (
-        <div css={trackSelectStyle}>
+        <div css={[mainContentStyle, trackSelectStyle]} role="main">
           <TrackSelection />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.subtitles) {
       return (
-        <div css={subtitleSelectStyle}>
+        <div css={[mainContentStyle, subtitleSelectStyle]} role="main">
           <Subtitle />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.thumbnail) {
       return (
-        <div css={thumbnailSelectStyle}>
+        <div css={[mainContentStyle, thumbnailSelectStyle]} role="main">
           <Thumbnail />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.finish) {
       return (
-        <div css={finishStyle}>
+        <div css={[mainContentStyle, finishStyle]} role="main">
           <Finish />
         </div>
         )
     } else if (mainMenuState === MainMenuStateNames.keyboardControls) {
       return (
-        <div css={keyboardControlsStyle}>
+        <div css={[mainContentStyle, keyboardControlsStyle]} role="main">
           <ThemeSwitcher/>
           <KeyboardControls />
         </div>
         )
     } else {
-      <div css={defaultStyle}>
+      <div css={[mainContentStyle, defaultStyle]} role="main">
         <FontAwesomeIcon icon={faTools} size="10x" />
         Placeholder
       </div>
     }
   }
 
   return (
-     <main css={{width: '100%'}} role="main">
-      {render()}
-     </main>
+    <>{render()}</>
   );
 };
 

diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
@@ -33,15 +33,12 @@ const MainMenu: React.FC<{}> = () => {
 
   const mainMenuStyle = css({
     borderRight: `${theme.menuBorder}`,
-    width: '100px',
+    minWidth: '100px',
     display: 'flex',
-    flexDirection: 'column' as const,
-    flexShrink: 0,
+    flexDirection: 'column',
     alignItems: 'center',
     padding: '20px',
-    height: '100%',
-    position: 'fixed',
-    overflow: 'auto',
+    overflow: 'vertical',
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -151,13 +148,12 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
       backgroundColor: `${theme.button_color}`,
       color: `${theme.selected_text}`,
     },
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
   });
 
   const miniMenuButtonStyle = css({
     width: '75px',
     height: '67px',
-    marginBottom: '35px',
     outline: `${theme.menuButton_outline}`,
     ...(activeState === stateName) && {
       backgroundColor: `${theme.button_color}`,
@@ -167,7 +163,7 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
       backgroundColor: `${theme.button_color}`,
       color: `${theme.selected_text}`,
     },
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
   });
 
   return (