#92 fix layout of grid containers

xchem · Mar 2, 2020 · 6b32900 · 6b32900
1 parent 09f99a2
commit 6b32900
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/js/components/nglView/nglView.js b/js/components/nglView/nglView.js
@@ -12,7 +12,6 @@ import { NglContext } from './nglProvider';
 import { handleNglViewPick } from './redux/dispatchActions';
 import { throttle } from 'lodash';
 import { BACKGROUND_COLOR, NGL_PARAMS } from './constants';
-import nglReducers from '../../reducers/ngl/nglReducers';
 
 const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents, handleNglViewPick }) => {
   // connect to NGL Stage object
@@ -102,7 +101,15 @@ const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents,
   ]);
   // End of Initialization NGL View component
 
-  return <div id={div_id} style={{ height: height || '600px', width: '100%' }} />;
+  return (
+    <div
+      id={div_id}
+      style={{
+        height: height || '600px',
+        width: 'inherit'
+      }}
+    />
+  );
 });
 
 function mapStateToProps(state) {

diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js
@@ -26,6 +26,21 @@ const useStyles = makeStyles(theme => ({
   },
   inheritWidth: {
     width: 'inherit'
+  },
+  nglViewWidth: {
+    width: 'inherit'
+  },
+  hitColumn: {
+    [theme.breakpoints.between('lg', 'xl')]: {
+      maxWidth: 504,
+      marginRight: theme.spacing(1) / 4
+    }
+  },
+  summaryColumn: {
+    [theme.breakpoints.between('lg', 'xl')]: {
+      maxWidth: 504,
+      minWidth: 400
+    }
   }
 }));
 
@@ -44,7 +59,7 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
 
   const [viewControlsHeight, setViewControlsHeight] = useState(0);
 
-  const screenHeight = `calc(100vh - ${headerHeight}px - ${theme.spacing(2)}px - ${viewControlsHeight}px)`;
+  const screenHeight = `calc(100vh - ${headerHeight}px - ${theme.spacing(2)}px - ${viewControlsHeight}px )`;
 
   const [summaryViewHeight, setSummaryViewHeight] = useState(0);
 
@@ -60,7 +75,7 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
   return (
     <Fragment>
       <Grid container justify="space-between" className={classes.root} spacing={1}>
-        <Grid item sm={12} md={5} lg={4} xl={3} container direction="column" spacing={1}>
+        <Grid item sm={12} md={5} lg xl container direction="column" spacing={1} className={classes.hitColumn}>
           {/* Hit cluster selector */}
           <Grid item>
             <MolGroupSelector isStateLoaded={isStateLoaded} handleHeightChange={setMolGroupsHeight} />
@@ -74,9 +89,9 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
             />
           </Grid>
         </Grid>
-        <Grid item sm={12} md={7} lg={5} xl={6}>
-          <Grid container direction="column" spacing={1}>
-            <Grid item className={classes.inheritWidth}>
+        <Grid item sm={12} md={5} lg xl>
+          <Grid container direction="column" spacing={1} className={classes.nglViewWidth}>
+            <Grid item>
               <NGLView div_id={VIEWS.MAJOR_VIEW} height={screenHeight} />
             </Grid>
             <Grid item ref={nglViewerControlsRef}>
@@ -90,7 +105,7 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
             </Grid>
           </Grid>
         </Grid>
-        <Grid item sm={12} md={6} lg={3} xl={3} container direction="column" spacing={1}>
+        <Grid item sm={12} md={6} lg xl container direction="column" spacing={1} className={classes.summaryColumn}>
           <Grid item>
             <SummaryView setSummaryViewHeight={setSummaryViewHeight} summaryViewHeight={summaryViewHeight} />
           </Grid>

diff --git a/js/components/preview/moleculeGroups/redux/dispatchActions.js b/js/components/preview/moleculeGroups/redux/dispatchActions.js
@@ -23,7 +23,6 @@ import { getUrl, loadFromServer } from '../../../../utils/genericList';
 import { OBJECT_TYPE } from '../../../nglView/constants';
 import { SCENES } from '../../../../reducers/ngl/constants';
 import { setSortDialogOpen } from '../../molecule/redux/actions';
-import { selectFirstMolecule } from '../../molecule/redux/dispatchActions';
 
 export const clearAfterDeselectingMoleculeGroup = ({ molGroupId, majorViewStage }) => (dispatch, getState) => {
   dispatch(setObjectSelection([molGroupId]));

diff --git a/js/components/session/downloadPdb.js b/js/components/session/downloadPdb.js
@@ -68,7 +68,7 @@ const DownloadPdb = memo(({ targetOn, targetOnName, key }) => {
   } else {
     return (
       <Button key={key} color="primary" onClick={handlePdbDownload} startIcon={<CloudDownload />}>
-        Download {targetOnName.toString()} structures
+        Download structures
       </Button>
     );
   }