diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss index 2113e15..fa5b694 100644 --- a/src/assets/stylesheets/summary.scss +++ b/src/assets/stylesheets/summary.scss @@ -2,6 +2,10 @@ $dark-blue: #002554; $medium-blue: #004990; $light-blue: #007cbe; $hover-blue: #25b3ff; +$black: #000; +$gray: #bdbdbd; +$white: #fff; + .summary { background: linear-gradient( 180deg, @@ -34,57 +38,77 @@ $hover-blue: #25b3ff; } .summary-fieldContainer { - // width: 100%; - // min-height: calc(100% - 250px); - // height: auto; - // background-color: transparent; - // display: flex; - // align-items: flex-start; - // justify-content: center; - // flex-wrap: wrap; - - // below is taken from browse.scss - width: 90%; + width: 100%; min-height: calc(100% - 200px); height: auto; - // display: flex; - // align-self: center; - // align-items: center; - // justify-content: center; - // align-items: center; - // justify-content: flex-start; - // justify-self: center; - // flex-direction: column; + display: flex; + align-items: center; + justify-content: flex-start; + flex-direction: column; overflow: hidden; background-color: transparent; margin-bottom: 50px; } +.summary-title { + width: 80%; + height: auto; + font-size: 32px; + font-weight: bold; + color: $white; + font-family: "Gotham Medium"; + margin: 10px; + background-color: transparent; + margin-bottom: 20px; +} .summary-grid { - width: 100%; - height: 100%; /* Adjust the height of iframes */ - - display: grid; - grid-template-columns: repeat(2, 1fr); /* 2 columns */ - grid-gap: 10px; /* Adjust the gap between iframes */ - grid-row-gap: 5px; /* Adjust the gap between rows */ - - - // Debug Borders - border-width: 5px; - border-style: solid; + width: 80%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + background-color: transparent; + overflow: visible; } -.summary-iframe { - width: 100%; /* Ensure iframes take up full width of their grid cell */ - height: 300px; /* Adjust the height of iframes */ - - // Debug Borders - border-width: 5px; - border-style: solid; +.summary-grid-container { + width: 32%; + height: 300px; + background: linear-gradient( + -30deg, + rgb(187, 208, 236) 0%, + rgba(255, 255, 255, 1) 100% + ); + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + border-radius: 20px; + border: 1px solid $gray; + transition: all 0.3s ease-in-out; + text-decoration: none; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + cursor: pointer; + overflow: visible; } +.summary-grid-container:hover { + transform: translate3d(-5px, -5px, 0); +} + + + +// .summary-iframe { +// width: 100%; /* Ensure iframes take up full width of their grid cell */ +// height: 300px; /* Adjust the height of iframes */ + +// // Debug Borders +// border-width: 5px; +// border-style: solid; +// } + // .summary-iframe { // width: 400px; // height: 400px; @@ -102,28 +126,18 @@ $hover-blue: #25b3ff; // padding: 10px; // } -.summary-fieldContainer-graph { - width: 25%; -} +// .summary-fieldContainer-graph { +// width: 25%; +// } -.summary-dashboard { - width: 100%; - height: 900px; - border-radius: 20px; - text-align: center; - padding: 10px; -} - -.summary-title { - width: 100%; - height: 100%; - - font-size: 1.5em; - font-weight: bold; - color: $dark-blue; - margin: 10px; -} +// .summary-dashboard { +// width: 100%; +// height: 900px; +// border-radius: 20px; +// text-align: center; +// padding: 10px; +// } // .summary-fieldContainer-dashboard { // width: 100%; diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index c18932c..891a2ec 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -118,13 +118,9 @@ export default class CableDetailComponent extends Component { }); if (modal === "modalOpen_dispense") { - this.props.socket.send( - `{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}` - ); + this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`); } else if (modal === "modalOpen_show") { - this.props.socket.send( - `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}` - ); + this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`); } }; diff --git a/src/components/SummaryComponent.js b/src/components/SummaryComponent.js index 16ed1f5..23b05c7 100644 --- a/src/components/SummaryComponent.js +++ b/src/components/SummaryComponent.js @@ -6,50 +6,16 @@ export default class SummaryComponent extends Component { render() { return (
- Belden +
+ Belden +
-

Grid of Individual Graphs

- +

Summary

- {/*
*/} - - - - - - {/*
*/} - {/* */} +
- - -

Embed Dashboard in Kiosk Mode

- -
); } -} +} \ No newline at end of file