OpenConceptLab/ocl_issues#1348 | fixing header and footer

OpenConceptLab · Sep 9, 2022 · 1a10465 · 1a10465
1 parent b97a689
commit 1a10465
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 10 deletions.
diff --git a/src/components/collections/CollectionForm.jsx b/src/components/collections/CollectionForm.jsx
@@ -3,7 +3,7 @@ import alertifyjs from 'alertifyjs';
 import { Divider, Button } from '@mui/material';
 import { orderBy, map, merge, cloneDeep, get, isEmpty } from 'lodash';
 import APIService from '../../services/APIService';
-import { COLLECTION_TYPES } from '../../common/constants'
+import { COLLECTION_TYPES, WHITE } from '../../common/constants'
 import FormHeader from '../common/conceptContainerFormComponents/FormHeader';
 import NameAndDescription from '../common/conceptContainerFormComponents/NameAndDescription';
 import ConfigurationForm from '../common/conceptContainerFormComponents/ConfigurationForm';
@@ -240,8 +240,8 @@ class CollectionForm extends React.Component {
             ((edit && !isEmpty(collection)) || !edit) &&
               <AdvanceSettings {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={collection} />
           }
-          <div className='col-xs-12 no-side-padding' style={{marginTop: '30px'}}>
-            <Button variant='contained' type='submit' onClick={this.onSubmit}>
+          <div className='col-xs-12 no-side-padding' style={{position: 'fixed', background: WHITE, bottom: 0}}>
+            <Button variant='contained' type='submit' onClick={this.onSubmit} style={{margin: '10px 0'}}>
               {edit ? 'Update Collection' : 'Create Collection'}
             </Button>
           </div>

diff --git a/src/components/common/CommonFormDrawer.jsx b/src/components/common/CommonFormDrawer.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Drawer, IconButton } from '@mui/material';
 import CancelIcon from '@mui/icons-material/CancelOutlined';
+import { WHITE } from '../../common/constants'
 
 const CommonFormDrawer = ({ isOpen, onClose, formComponent, size, ...rest }) => {
   const className = 'custom-drawer ' + (size || 'medium')
@@ -15,7 +16,7 @@ const CommonFormDrawer = ({ isOpen, onClose, formComponent, size, ...rest }) =>
 
   return (
     <Drawer anchor='right' open={open} onClose={onDrawerClose} classes={{paper: className}} hideBackdrop ModalProps={{disableEscapeKeyDown: true}} {...rest}>
-      <span style={{position: 'absolute', right: '10px', top: '10px', zIndex: 1}}>
+    <span style={{position: 'fixed', right: '10px', top: '75px', zIndex: '2000', background: WHITE}}>
         <IconButton onClick={onDrawerClose} color='secondary'>
           <CancelIcon />
         </IconButton>

diff --git a/src/components/common/conceptContainerFormComponents/AdvanceSettings.jsx b/src/components/common/conceptContainerFormComponents/AdvanceSettings.jsx
@@ -9,7 +9,7 @@ import Others from './Others';
 const AdvanceSettings = props => {
   const configs = props.advanceSettings
   return (
-    <div className='col-xs-12 no-side-padding'>
+    <div className='col-xs-12 no-side-padding' style={{marginBottom: '40px'}}>
       <div className='col-xs-12 no-side-padding'>
         <h2>{configs.title}</h2>
       </div>

diff --git a/src/components/common/conceptContainerFormComponents/FormHeader.jsx b/src/components/common/conceptContainerFormComponents/FormHeader.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import DynamicConfigResourceIcon from '../../common/DynamicConfigResourceIcon';
+import { WHITE } from '../../../common/constants'
 
 const FormHeader = props => {
   const iconMarginTop = props.resource === 'source' ? '8px' : '20px'
   return (
-    <div className='col-xs-12 no-side-padding' style={{display: 'flex'}}>
+    <div className='col-xs-12 no-side-padding' style={{display: 'flex', position: 'fixed', background: WHITE, zIndex: '1999'}}>
       <span style={{display: 'inline-block'}}>
         <DynamicConfigResourceIcon resource={props.resource} enableColor style={{fontSize: '4em', marginTop: iconMarginTop}} />
       </span>

diff --git a/src/components/common/conceptContainerFormComponents/NameAndDescription.jsx b/src/components/common/conceptContainerFormComponents/NameAndDescription.jsx
@@ -30,7 +30,7 @@ const NameAndDescription = props => {
   React.useEffect(() => props.edit && setFieldsForEdit(), [])
 
   return (
-    <div className='col-xs-12 no-side-padding' style={{marginTop: '10px', marginBottom: '20px'}}>
+    <div className='col-xs-12 no-side-padding' style={{marginTop: '80px', marginBottom: '20px'}}>
       <div className='col-xs-12 no-side-padding'>
         <h2>{configs.title}</h2>
       </div>

diff --git a/src/components/sources/SourceForm.jsx b/src/components/sources/SourceForm.jsx
@@ -3,7 +3,7 @@ import alertifyjs from 'alertifyjs';
 import { Divider, Button } from '@mui/material';
 import { orderBy, map, merge, cloneDeep, get, isEmpty } from 'lodash';
 import APIService from '../../services/APIService';
-import { SOURCE_TYPES } from '../../common/constants'
+import { SOURCE_TYPES, WHITE } from '../../common/constants'
 import FormHeader from '../common/conceptContainerFormComponents/FormHeader';
 import NameAndDescription from '../common/conceptContainerFormComponents/NameAndDescription';
 import ConfigurationForm from '../common/conceptContainerFormComponents/ConfigurationForm';
@@ -280,8 +280,8 @@ class SourceForm extends React.Component {
             ((edit && !isEmpty(source)) || !edit) &&
               <AdvanceSettings {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={source} />
           }
-          <div className='col-xs-12 no-side-padding' style={{marginTop: '30px'}}>
-            <Button variant='contained' type='submit' onClick={this.onSubmit}>
+          <div className='col-xs-12 no-side-padding' style={{position: 'fixed', background: WHITE, bottom: 0}}>
+            <Button variant='contained' type='submit' onClick={this.onSubmit} style={{margin: '10px 0'}}>
               {edit ? 'Update Source' : 'Create Source'}
             </Button>
           </div>