Browse Source

css fixes

bioinsilico 3 years ago
parent
commit
ccbcf68e0e
2 changed files with 17 additions and 20 deletions
  1. 8 4
      src/RcsbFv3D/RcsbFv3DComponent.tsx
  2. 9 16
      src/styles/RcsbFvStyle.module.scss

+ 8 - 4
src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -52,7 +52,6 @@ export class RcsbFv3DComponent extends React.Component <RcsbFv3DComponentInterfa
     render(): JSX.Element {
         return (
             <div style={RcsbFv3DComponent.mainDivCssConfig(this.props.cssConfig?.rootPanel)} className={ this.props.fullScreen ? classes.fullScreen+" "+classes.rcsbFvMain : classes.rcsbFvMain} >
-                <div>
                     <div style={this.structureCssConfig(this.props.cssConfig?.structurePanel)} className={classes.rcsbFvCell}>
                         <RcsbFvStructure
                             {...this.state.structurePanelConfig}
@@ -73,7 +72,6 @@ export class RcsbFv3DComponent extends React.Component <RcsbFv3DComponentInterfa
                             unmount={this.props.unmount}
                         />
                     </div>
-                </div>
             </div>
         );
     }
@@ -87,11 +85,17 @@ export class RcsbFv3DComponent extends React.Component <RcsbFv3DComponentInterfa
     }
 
     private structureCssConfig(css: CSSProperties | undefined): CSSProperties{
-        return {...{width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%", height:"100%", zIndex:100}, ...css };
+        const widthFr: number = Math.round((1-this.pfvScreenFraction)*100);
+        const cssWidth: string = widthFr.toString()+"%";
+        const cssHeight: string = "100%";
+        return {...{width:cssWidth, height:cssHeight, zIndex:100}, ...css };
     }
 
     private sequenceCssConfig(css: CSSProperties | undefined): CSSProperties{
-        return {...{width:Math.round((this.pfvScreenFraction)*100).toString()+"%", height:"100%", overflow:"auto", paddingBottom:5}, ...css };
+        const widthFr: number = Math.round((this.pfvScreenFraction)*100);
+        const cssWidth: string = widthFr.toString()+"%";
+        const cssHeight: string = "100%";
+        return {...{width:cssWidth, height:cssHeight, overflow:"auto", paddingBottom:5}, ...css };
     }
 
     private static mainDivCssConfig(css: CSSProperties | undefined): CSSProperties{

+ 9 - 16
src/styles/RcsbFvStyle.module.scss

@@ -1,34 +1,27 @@
 .fullScreen {
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.rcsbFvMain * {
+  box-sizing: border-box;
 }
 
 .rcsbFvMain {
-  display: flex;
-  flex-wrap: nowrap;
   width: 100%;
   height: 100%;
   background-color: #fff;
   z-index: 10;
-}
-
-.rcsbFvMain > div {
-  width: 100%;
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  flex-flow: row-reverse wrap;
-}
-
-.rcsbFvMain * {
-  box-sizing: border-box;
+  flex-wrap: nowrap;
+  flex-direction: row-reverse;
 }
 
 .rcsbFvCell {
-
 }
 
 .rcsbFvSubtitle {