From 178edc371dace24df6b6d806439d19c09347ea26 Mon Sep 17 00:00:00 2001
From: loi <loi@ipac.caltech.edu>
Date: Tue, 2 Aug 2016 13:50:42 -0700
Subject: [PATCH] DM-7090: fix IrsaViewer catalog panel style so labels and
 fields do not move during user's input.

---
 src/firefly/js/ui/CatalogSearchMethodType.jsx | 18 +++----
 src/firefly/js/ui/TargetPanel.jsx             | 25 +++++-----
 src/firefly/js/ui/VoSearchPanel.css           | 36 +++-----------
 src/firefly/js/ui/VoSearchPanel.jsx           | 47 ++++++++++---------
 4 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/src/firefly/js/ui/CatalogSearchMethodType.jsx b/src/firefly/js/ui/CatalogSearchMethodType.jsx
index bc819cef7e..612d360dda 100644
--- a/src/firefly/js/ui/CatalogSearchMethodType.jsx
+++ b/src/firefly/js/ui/CatalogSearchMethodType.jsx
@@ -219,16 +219,18 @@ function renderTargetPanel(groupKey, searchType) {
     const visible = searchType === SpatialMethod.Cone.value || searchType === SpatialMethod.Box.value || searchType === SpatialMethod.Elliptical.value;
     return (
         visible && <div className='intarget'>
-            <TargetPanel wrapperStyle={{width:'200px'}} labelWidth={90} groupKey={groupKey}/>
-            <ListBoxInputField
-                fieldKey='targettry'
-                options={[{label: 'Try NED then Simbad', value: 'NED'},
+            <TargetPanel labelWidth={100} groupKey={groupKey}>
+                <ListBoxInputField
+                    fieldKey='targettry'
+                    options={[{label: 'Try NED then Simbad', value: 'NED'},
                                    {label: 'Try Simbad then NED', value: 'simbad'}
                               ]}
-                multiple={false}
-                label=''
-                labelWidth={3}
-            />
+                    multiple={false}
+                    label=''
+                    labelWidth={3}
+                    wrapperStyle={{display: 'inline-block'}}
+                />
+            </TargetPanel>
         </div>
     );
 
diff --git a/src/firefly/js/ui/TargetPanel.jsx b/src/firefly/js/ui/TargetPanel.jsx
index 8f38f5e110..1f30732c89 100644
--- a/src/firefly/js/ui/TargetPanel.jsx
+++ b/src/firefly/js/ui/TargetPanel.jsx
@@ -22,19 +22,22 @@ class TargetPanelView extends Component {
     }
 
     render() {
-        const {showHelp, feedback, valid, message, onChange, value, labelWidth}= this.props;
+        const {showHelp, feedback, valid, message, onChange, value, labelWidth, children}= this.props;
+        var positionField = (<InputFieldView
+                                valid={valid}
+                                visible= {true}
+                                message={message}
+                                onChange={onChange}
+                                label='Name or Position:'
+                                value={value}
+                                tooltip='Enter a target'
+                                labelWidth={labelWidth}
+                            />);
+        positionField = children ? (<div style={{display: 'flex'}}>{positionField} {children}</div>) : positionField;
+
         return (
             <div>
-                <InputFieldView
-                    valid={valid}
-                    visible= {true}
-                    message={message}
-                    onChange={onChange}
-                    label='Name or Position:'
-                    value={value}
-                    tooltip='Enter a target'
-                    labelWidth={labelWidth}
-                />
+                {positionField}
                 <TargetFeedback showHelp={showHelp} feedback={feedback}/>
             </div>
         );
diff --git a/src/firefly/js/ui/VoSearchPanel.css b/src/firefly/js/ui/VoSearchPanel.css
index 1508cddc5a..1cc1aac336 100644
--- a/src/firefly/js/ui/VoSearchPanel.css
+++ b/src/firefly/js/ui/VoSearchPanel.css
@@ -1,35 +1,11 @@
 div.vopanel  {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 750px;
     background: white;
-    /*
-        border-left: 20px solid #c8c8c8;
-        border-right: 20px solid #c8c8c8;
-    */
-}
-div.section {
-    margin-top: 10px;
-    padding-left: 15%;
-}
-
-div.intarget {
-    height: 75px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
+    width: 70%;
+    margin: auto;
 }
 
-div.size {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    margin-left: 30%;
-    height: 60px;
-}
-
-div.voarea {
-    margin-top: 10px;
-    padding-left: 15%;
+.vopanel__wrapper {
+    width: 750px;
+    padding: 20px 0;
+    box-sizing: border-box;
 }
-
diff --git a/src/firefly/js/ui/VoSearchPanel.jsx b/src/firefly/js/ui/VoSearchPanel.jsx
index eb039aa1ae..adf6d9c791 100644
--- a/src/firefly/js/ui/VoSearchPanel.jsx
+++ b/src/firefly/js/ui/VoSearchPanel.jsx
@@ -32,18 +32,20 @@ export class VoSearchPanel extends React.Component {
     render() {
         const fields = this.state;
         return (
-            <div className={'vopanel'}>
-                <div className={'section'}>
-                    {targetPanelArea()}
-                </div>
-                <div className={'size'}>
-                    { sizeArea()}
-                </div>
-                <div className={'voarea'}>
-                    { voSearchArea() }
-                    <div style={{padding:'20px 0 20px 0'}}>
-                        <a target='_blank' href='http://nvo.stsci.edu/vor10/index.aspx'>Find Astronomical Data
-                            Resources </a>
+            <div className='vopanel__wrapper'>
+                <div className='vopanel'>
+                    <div>
+                        {targetPanelArea()}
+                    </div>
+                    <div style={{height: 60}}>
+                        { sizeArea()}
+                    </div>
+                    <div style={{marginTop: 20}}>
+                        { voSearchArea() }
+                        <div style={{padding:'20px 0 20px 0'}}>
+                            <a target='_blank' href='http://nvo.stsci.edu/vor10/index.aspx'>Find Astronomical Data
+                                Resources </a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -55,22 +57,23 @@ export class VoSearchPanel extends React.Component {
 
 function targetPanelArea() {
     return (
-        <div className={'intarget'}>
-            <TargetPanel groupKey={gkey} labelWidth={120}/>
-            <ListBoxInputField
-                fieldKey='targettry'
-                initialState={{
+        <div >
+            <TargetPanel groupKey={gkey} labelWidth={100}>
+                <ListBoxInputField
+                    fieldKey='targettry'
+                    initialState={{
                                   fieldKey:'targettry',
                                   label : '',
                                   labelWidth: 0
                               }}
-                label={''}
-                options={[
+                    label={''}
+                    options={[
                             {label: 'Try NED then Simbad', value: 'NED'},
                             {label: 'Try Simbad then NED', value: 'simbad'}
                          ]}
-                multiple={false}
-            />
+                    multiple={false}
+                />
+            </TargetPanel>
         </div>
     );
 }
@@ -99,7 +102,7 @@ var voSearchArea = () => {
                               value: '',
                               tooltip:'Enter the VO cone search URL directly (or use the link below to open external NVO search and find the VO cone search URL)',
                               label:'Cone Search URL:',
-                              labelWidth : 90,
+                              labelWidth : 100,
                               nullAllowed:false,
                               /*validator: {urlValidator}*/
                           }}