diff --git a/public/index.html b/public/index.html index a4c15ca..85f7749 100644 --- a/public/index.html +++ b/public/index.html @@ -5,39 +5,27 @@ - - - Belden Jukebox - +
- diff --git a/src/assets/images/default_qr.png b/src/assets/images/default_qr.png new file mode 100644 index 0000000..060c23c Binary files /dev/null and b/src/assets/images/default_qr.png differ diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss index 7511d40..b9d7547 100644 --- a/src/assets/stylesheets/cabledetail.scss +++ b/src/assets/stylesheets/cabledetail.scss @@ -62,7 +62,7 @@ $white: #fff; ); display: flex; align-items: center; - justify-content: flex-start; + justify-content: space-between; flex-direction: row; border-radius: 20px; border: 1px solid $gray; @@ -134,7 +134,8 @@ $white: #fff; background-color: transparent; } -.cable-main-image { +.cable-main-image, +.cable-main-imageqr { aspect-ratio: 1/1; width: auto; height: 100%; @@ -146,6 +147,23 @@ $white: #fff; filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%)); } +.cable-main-imageqr { + margin-right: 0; + margin-left: 25px; + display: flex; + align-items: center; + justify-content: center; +} + +.cable-main-imageqr img { + width: 80%; + height: 80%; + object-fit: cover; + background-color: white; + border: $gray solid 1px; + filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%)); +} + .cable-main-label { width: 60%; height: 100%; diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index f3b57b4..9dc9701 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -1,6 +1,7 @@ import React, { Component } from "react"; import BeldenLogo from "../assets/images/belden-white.png"; import DefaultPartImg from "../assets/images/part.png"; +import DefaultQRImg from "../assets/images/default_qr.png"; import { NavLink } from "react-router-dom"; import Modal from "react-modal"; import "../assets/stylesheets/cabledetail.scss"; @@ -26,6 +27,9 @@ class Cable { this.short_description = cableData.short_description; this.application = cableData.application; this.category = cableData.category; + this.qrcode = cableData.qrcode + ? `http://${hostname}${cableData.qrcode}` + : DefaultQRImg; if (this.description === undefined) { if (this.short_description !== undefined) { @@ -60,6 +64,7 @@ class Cable { "application", "category", "datasheet", + "qrcode", ].includes(key) ) { this.dynamicProps[key] = cableData[key]; @@ -320,6 +325,19 @@ export default class CableDetailComponent extends Component { {parseInt(cableDetails.position) + 1} + + {cableDetails.qrcode !== DefaultQRImg ? ( +
+ +
+ ) : ( +
+ )}
) : (
diff --git a/src/components/NavBar.js b/src/components/NavBar.js index e985cfb..04da482 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -11,7 +11,7 @@ export default class NavBar extends Component { this.state = { modalOpen_activeArm: false, modalOpacity: 0, - mode: "idle" + mode: "idle", }; this.openModal = this.openModal.bind(this); this.closeModal = this.closeModal.bind(this); @@ -56,7 +56,7 @@ export default class NavBar extends Component { if (this.state.mode === "idle") { this.closeModal("modalOpen_activeArm"); } - }, 3000); + }, 1500); } else { this.openModal("modalOpen_activeArm"); } diff --git a/src/components/StatisticsComponent.js b/src/components/StatisticsComponent.js index 8e1a45f..fc86c14 100644 --- a/src/components/StatisticsComponent.js +++ b/src/components/StatisticsComponent.js @@ -14,7 +14,7 @@ export default class StatisticsComponent extends Component {