OpenConceptLab/ocl_issues#1203 | Concept/Mapping details | removed ve…

…rtical scrolls within sections | added horizontal scrolls for smaller screens
OpenConceptLab · Mar 30, 2022 · 3b6a654 · 3b6a654
1 parent 8f63ac0
commit 3b6a654
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 7 deletions.
diff --git a/src/components/common/SourceChildCollections.jsx b/src/components/common/SourceChildCollections.jsx
@@ -16,7 +16,7 @@ const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
 }
 const ACCORDIAN_DETAILS_STYLES = {
-  maxHeight: '300px', overflow: 'auto', width: '100%', padding: '0'
+  width: '100%', padding: '0', overflowX: 'auto'
 }
 
 const None = () => (<div style={{padding: '5px 15px', fontWeight: '300'}}>None</div>);

diff --git a/src/components/common/VersionList.jsx b/src/components/common/VersionList.jsx
@@ -17,7 +17,7 @@ const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
 }
 const ACCORDIAN_DETAILS_STYLES = {
-  maxHeight: '300px', overflow: 'auto', display: 'inline-block', width: '100%', padding: '0'
+  overflowX: 'auto', display: 'inline-block', width: '100%', padding: '0'
 }
 
 const None = () => {

diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
@@ -241,6 +241,7 @@ class ConceptHome extends React.Component {
     const currentURL = this.getConceptURLFromPath()
     const isVersionedObject = this.isVersionedObject()
     const hasError = notFound || accessDenied || permissionDenied;
+    const detailsMargin = this.getContentMarginTop()
     const conceptDetails = (
       <div style={isLoading ? {textAlign: 'center', marginTop: '40px'} : {}}>
         { isLoading && <CircularProgress color='primary' /> }
@@ -275,7 +276,7 @@ class ConceptHome extends React.Component {
                 header={has(this.props, 'header') ? this.props.header : true}
               />
             }
-            <div className='col-xs-12' style={{position: 'relative', marginTop: this.getContentMarginTop()}}>
+            <div className='col-xs-12' style={{position: 'relative', marginTop: detailsMargin, marginBottom: detailsMargin}}>
               <ConceptHomeDetails
                 scoped={this.props.scoped}
                 singleColumn={this.props.singleColumn}

diff --git a/src/components/concepts/ConceptHomeDetails.jsx b/src/components/concepts/ConceptHomeDetails.jsx
@@ -10,7 +10,7 @@ const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
 }
 const ACCORDIAN_DETAILS_STYLES = {
-  maxHeight: '300px', overflow: 'auto', display: 'inline-block', width: '100%', padding: '0'
+  overflowX: 'auto', width: '100%', padding: '0'
 }
 
 const ConceptHomeDetails = ({ concept, isLoadingMappings, isLoadingCollections, source, childConcepts, parentConcepts, isLoadingChildren, isLoadingParents, singleColumn, versions, scoped }) => {

diff --git a/src/components/concepts/HomeLocales.jsx b/src/components/concepts/HomeLocales.jsx
@@ -14,7 +14,7 @@ const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
 }
 const ACCORDIAN_DETAILS_STYLES = {
-  maxHeight: '300px', overflow: 'auto', width: '100%', padding: '0'
+  width: '100%', padding: '0', overflowX: 'auto'
 }
 
 const None = () => {

diff --git a/src/components/concepts/HomeMappings.jsx b/src/components/concepts/HomeMappings.jsx
@@ -22,7 +22,7 @@ const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
 }
 const ACCORDIAN_DETAILS_STYLES = {
-  width: '100%', padding: '0'
+  width: '100%', padding: '0', overflowX: 'auto'
 }
 
 const None = () => {

diff --git a/src/components/mappings/MappingHomeDetails.jsx b/src/components/mappings/MappingHomeDetails.jsx
@@ -7,7 +7,7 @@ const ACCORDIAN_HEADING_STYLES = {
   fontWeight: 'bold',
 }
 const ACCORDIAN_DETAILS_STYLES = {
-  maxHeight: '300px', overflow: 'auto', display: 'inline-block', width: '100%', padding: '0'
+  overflowX: 'auto', width: '100%', padding: '0'
 }
 
 const MappingHomeDetails = ({ mapping, singleColumn, versions, isLoadingCollections, scoped }) => {