UserInterface dropdown improvements

Regarding #37
amosproj · May 14, 2021 · 8600635 · 8600635
1 parent 2ddfc3e
commit 8600635
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -3,6 +3,9 @@ import React, { useContext, useState } from 'react';
 import { IconArrowDown } from 'assets/icons';
 import {getModels} from 'interface/simaProInterface'
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
+import { Component } from 'react';
+import {Container, Row, Col } from 'react-grid-system';
+
 
 //TODO: When only one model is available, => How to do that then? Should a click on the image link in that case?
 
@@ -22,16 +25,18 @@ const ModelDropdownComponent = (props) =>  {
     // set the initial values for the dropdown list derived from getModels
     const variables = getModels(productID);  
     const [ selected, setSelected ] = useState('Select a model');
-
-        return (
-            <div>
-
-                <div className='w3-dropdown-hover w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
-                <IconArrowDown/>
-                    <button className=' w3-button w3-border w3-white'>{selected}</button>
-                    <div className=' w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border '>
+
+    return (
+            <Container fluid={true}>
+                <Row className=' w3-dropdown-hover w3-card-4 w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
+                    <Col xs={2}>                         
+                    <button className=' w3-button w3-border w3-lightgrey'>{selected}</button>
+
+
+                    <div className='w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border'>
+
                     {variables.map((item) => (
-                       
+
                         <a
                             onClick={(props) => {
                                 const newSelectedProducts =
@@ -44,16 +49,23 @@ const ModelDropdownComponent = (props) =>  {
                                     setSelected(item.modelName) ;
                                     setSelectedProducts(newSelectedProducts);
                                 }} 
-                                className='w3-bar-item w3-button'
+
+                                className=' w3-bar w3-button'
+
                                 key={item.modelID}
                             >
                                 {item.modelName}
                             </a>
+
                         ))}
                     </div>
-                </div>
-            </div>
+                    </Col>                   
+                </Row>
+
+            </Container>
         );
-    };
+      };
+
+
 
 export default ModelDropdownComponent;
diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js
@@ -9,15 +9,15 @@
  */
 
 import React, {useContext} from 'react';
-import {Column, Row} from 'simple-flexbox';
+//import {Column, Row} from 'simple-flexbox';
 import {createUseStyles} from 'react-jss';
 import MiniCardComponent from 'components/cards/MiniCardComponent';
 import {getProducts} from 'interface/simaProInterface'
 import ProductDropdown from './ModelDropdownComponent'
 import SLUGS from 'resources/slugs';
 import {Link} from 'react-router-dom';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
-
+import {Container, Row, Col } from 'react-grid-system';
 
 
 
@@ -37,7 +37,8 @@ function ProductGridComponent() {
     const classes = useStyles();
 
     return (
-        <Column>
+        <Container fluid={true}>
+        <Col>
             <Row
                 className={classes.cardRow}
                 wrap
@@ -46,7 +47,7 @@ function ProductGridComponent() {
                 breakpoints={{50: 'column'}}
             >
                 {products.map((product, index) =>
-                    <Column key={'Column' + index}>
+                    <Col key={'Column' + index} style="width:70px">
                         <Link
                             onClick={(props) => {
                                 // Save selection to ContextProvider
@@ -63,10 +64,11 @@ function ProductGridComponent() {
                             />
                         </Link>
                         <ProductDropdown productID={product.productID} productName={product.productName}/>
-                    </Column>
+                    </Col>
                 )}
             </Row>
-        </Column>
+        </Col>
+        </Container>
     );
 }