Fix size of help panel

aframevr · Feb 9, 2017 · 64a3127 · 64a3127
1 parent 4a442d0
commit 64a3127
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/components/modals/Modal.js b/src/components/modals/Modal.js
@@ -2,6 +2,7 @@ var React = require('react');
 
 export default class Modal extends React.Component {
   static propTypes = {
+    id: React.PropTypes.string,
     children: React.PropTypes.oneOfType([
       React.PropTypes.array,
       React.PropTypes.element
@@ -76,7 +77,7 @@ export default class Modal extends React.Component {
 
   render () {
     return (
-      <div className={this.state.isOpen ? 'modal' : 'modal hide'}>
+      <div id={this.props.id} className={this.state.isOpen ? 'modal' : 'modal hide'}>
         <div className='modal-content' ref='self'>
           <div className='modal-header'>
             <span className='close' onClick={this.close}>×</span>

diff --git a/src/components/modals/ModalTextures.js b/src/components/modals/ModalTextures.js
@@ -302,7 +302,7 @@ export default class ModalTextures extends React.Component {
     let addNewAssetButton = this.state.addNewDialogOpened ? 'BACK' : 'LOAD TEXTURE';
 
     return (
-      <Modal title="Textures" isOpen={isOpen} onClose={this.onClose} closeOnClickOutside={false}>
+      <Modal id="texture-modal" title="Textures" isOpen={isOpen} onClose={this.onClose} closeOnClickOutside={false}>
         <button onClick={this.toggleNewDialog}>{addNewAssetButton}</button>
         <div className={this.state.addNewDialogOpened ? '' : 'hide'}>
           <div className="newimage">

diff --git a/src/css/main.css b/src/css/main.css
@@ -448,17 +448,21 @@ a.button:hover {
   margin: 0.6em 0;
 }
 
+
+#texture-modal .modal-content {
+  height: calc(100% - 50px);
+  width: calc(100% - 50px);  
+}
+
 .modal-content {
   animation: animatetop 0.2s ease-out;
   animation-duration: 0.2s;
   animation-name: animatetop;
   background-color: #232323;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
-  height: calc(100% - 50px);
   margin: auto;
   overflow: hidden;
   padding: 0;
-  width: calc(100% - 50px);
 }
 
 @keyframes animateopacity {