fix #1095 changed modal layout for both on startup and empty results

web/client/components/catalog/RecordGrid.jsx

@@ -30,7 +30,7 @@ const RecordGrid = React.createClass({
             records: [],
             onLayerAdd: () => {},
             onError: () => {},
-            column: {xs: 12, sm: 6, md: 6, lg: 6}
+            column: {xs: 12, sm: 12, md: 6, lg: 6}
         };
     },
     renderRecordItem(record) {
@@ -53,7 +53,7 @@ const RecordGrid = React.createClass({
         if (this.props.records) {
             let mapsList = this.props.records instanceof Array ? this.props.records : [this.props.records];
             return (
-                <Grid className="record-grid" style={this.props.style}>
+                <Grid className="record-grid" fluid={true} style={this.props.style}>
                     <Row>
 						{mapsList.map(this.renderRecordItem)}
 					</Row>

web/client/components/catalog/__tests__/RecordGrid-test.jsx

@@ -53,7 +53,7 @@ describe('This test for Record Grid', () => {
         const itemDom = ReactDOM.findDOMNode(item);
         expect(itemDom).toExist();
 
-        expect(itemDom.className).toBe("record-grid container");
+        expect(itemDom.className).toBe("record-grid container-fluid");
     });
     // test data
     it('creates the component with data', () => {
@@ -62,7 +62,7 @@ describe('This test for Record Grid', () => {
 
         const itemDom = ReactDOM.findDOMNode(item);
         expect(itemDom).toExist();
-        expect(itemDom.className).toBe("record-grid container");
+        expect(itemDom.className).toBe("record-grid container-fluid");
 
         // check the thumbnail as a to verify thtat the url is really loaded into the component
         let img = TestUtils.findRenderedDOMComponentWithTag(

web/client/components/misc/Dialog.jsx

@@ -84,7 +84,7 @@ const Dialog = React.createClass({
         </Draggable>);
         let containerStyle = assign({}, this.props.style, this.props.backgroundStyle);
         return this.props.modal ?
-            (<div onClick={this.props.onClickOut} style={containerStyle} className="fade in modal" role="dialog">
+            (<div onClick={this.props.onClickOut} style={containerStyle} className="fade in modal catalog_window" role="dialog">
             <div onClick={(evt)=> {evt.preventDefault(); evt.stopPropagation(); }} className="modal-dialog" style={{background: "transparent"}}>
                 {dialog}
             </div></div>) :

web/client/jsapi/mapstore2.css

@@ -444,14 +444,6 @@
     min-width: 725px;
 }
 
-#mapstore-catalog-panel {
-    width: auto;
-    position: absolute;
-    right: 200px;
-    margin-top: 100px;
-    display: inline-block;
-}
-
 #mapstore-catalog-panel .record-item {
     min-height: 150px;
 }

web/client/plugins/MetadataExplorer.jsx

@@ -55,14 +55,11 @@ const MetadataExplorerComponent = React.createClass({
             id: "mapstore-metadata-explorer",
             active: false,
             wrap: false,
+            modal: true,
             wrapWithPanel: true,
             panelStyle: {
-                minWidth: "300px",
                 zIndex: 100,
-                position: "absolute",
-                overflow: "auto",
-                top: "100px",
-                right: "100px"
+                overflow: "auto"
             },
             panelClassName: "toolbar-panel",
             toggleControl: () => {},
@@ -71,15 +68,15 @@ const MetadataExplorerComponent = React.createClass({
         };
     },
     render() {
-        const panel = <div role="body"><Catalog {...this.props}/></div>;
+        const panel = <div role="body" className="modal_window"><Catalog {...this.props}/></div>;
         if (this.props.wrap) {
             if (this.props.active) {
                 if (this.props.wrapWithPanel) {
                     return (<Panel id={this.props.id} header={<span><span className="metadataexplorer-panel-title"><Message msgId="catalog.title"/></span><span className="shapefile-panel-close panel-close" onClick={ toggleControl.bind(null, 'styler', null)}></span></span>} style={this.props.panelStyle} className={this.props.panelClassName}>
                         {panel}
                     </Panel>);
                 }
-                return (<Dialog id="mapstore-catalog-panel" style={this.props.style}>
+                return (<Dialog modal id="mapstore-catalog-panel" style={assign({}, this.props.style, {display: "block" })}>
                     <span role="header"><span className="metadataexplorer-panel-title"><Message msgId="catalog.title"/></span><button onClick={this.props.toggleControl} className="print-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
                     {panel}
                 </Dialog>);

web/client/plugins/metadataexplorer/css/style.css

@@ -40,3 +40,7 @@ div.record-grid .record-item .record-buttons {
 #mapstore-catalog-panel button.search-button {
     margin-bottom: 10px;
 }
+.catalog_window .modal-dialog {
+    width: 98%;
+    margin-top: 10px;
+}

web/client/product/assets/css/viewer.css

@@ -389,14 +389,6 @@ html, body, #container, .fill {
     min-width: 725px;
 }
 
-#mapstore-catalog-panel {
-    width: auto;
-    position: absolute;
-    right: 200px;
-    margin-top: 100px;
-    display: inline-block;
-}
-
 #mapstore-catalog-panel .record-item {
     min-height: 150px;
 }