diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 4eb4779..6f9ae55 100644 --- a/src/assets/stylesheets/cabledetail.scss +++ b/src/assets/stylesheets/cabledetail.scss @@ -196,10 +196,10 @@ $white: #fff; width: calc(80% + 50px); height: auto; background-color: transparent; - display:flex; + display: flex; flex-wrap: wrap; flex-direction: row; - align-items: center; + align-items: stretch; justify-content: space-between; margin-bottom: 50px; margin-top: 5px; diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index 900c53d..b1f8a94 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -19,10 +19,22 @@ class Cable { this.dynamicProps = {}; this.horizontal = []; this.vertical = []; - this.orderedKeys = [] + this.orderedKeys = []; Object.keys(cableData).forEach((key) => { - if (!["partnum", "id", "brand", "position", "image", "short_description", "description", "application", "category"].includes(key)) { + if ( + ![ + "partnum", + "id", + "brand", + "position", + "image", + "short_description", + "description", + "application", + "category", + ].includes(key) + ) { this.dynamicProps[key] = cableData[key]; } }); @@ -38,6 +50,27 @@ class Cable { } this.orderedKeys = this.orderedKeys.concat(this.vertical); this.orderedKeys = this.orderedKeys.concat(this.horizontal); + + for (let i = 0; i < this.orderedKeys.length; i++) { + let key = this.orderedKeys[i]; + if (!isNaN(key)) { + this.orderedKeys.splice(i, 1); + i--; + } + + try { + let data = this.dynamicProps[key]; + let first = Object.keys(data)[0]; + if (data[first] !== undefined) { + if (typeof data[first] === "string") { + if (first === "" || data[first] === "") { + this.orderedKeys.splice(i, 1); + i--; + } + } + } + } catch (error) {} + } } } @@ -85,6 +118,7 @@ export default class CableDetailComponent extends Component { const maxRows = Math.max(...keys.map((key) => data[key].length)); const rows = Array.from({ length: maxRows }).map((_, rowIndex) => { + return ( {keys.map((key, index) => ( @@ -228,8 +262,7 @@ export default class CableDetailComponent extends Component { JSON.stringify(cableDetails.dynamicProps[key]) ); } - } - )} + })} ) : (