diff --git a/src/assets/stylesheets/statistics.scss b/src/assets/stylesheets/statistics.scss index 6859221..54ca4d4 100644 --- a/src/assets/stylesheets/statistics.scss +++ b/src/assets/stylesheets/statistics.scss @@ -62,7 +62,7 @@ $white: #fff; font-family: "Gotham Medium"; margin: 10px; background-color: transparent; - margin-bottom: 20px; + margin-bottom: 25px; } .statistics-grid { @@ -70,26 +70,23 @@ $white: #fff; height: auto; display: flex; flex-flow: row wrap; - justify-content: flex-start; + justify-content: center; align-items: flex-start; background-color: transparent; overflow: visible; - // add row gap - gap: 20px; } .statistics-grid-container { - width: 32%; - height: 300px; + width: calc(((100% / 3)) - (12px)); + height: 270px; background: linear-gradient( -30deg, rgb(187 208 236) 0%, rgb(255 255 255 / 100%) 100% ); - margin-top: 5px; - display: flex; /* Center the content */ - align-items: center; /* Center vertically */ - justify-content: center; /* Center horizontally */ + display: flex; + align-items: center; + justify-content: center; border-radius: 20px; border: 1px solid $gray; transition: all 0.3s ease-in-out; @@ -97,51 +94,19 @@ $white: #fff; filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%)); cursor: pointer; overflow: visible; + margin-bottom: 15px; +} + +.statistics-grid-container:nth-child(3n + 1) { + margin-right: 15px; +} + +.statistics-grid-container:nth-child(3n) { + margin-left: 15px; } .statistics-iframe { - width: 95%; /* Ensure iframes take up full width of their grid cell */ - height: 95%; /* Adjust the height of iframes */ + width: 95%; + height: 95%; border-radius: 20px; - - // Debug Borders - // border-width: 5px; - // border-style: solid; } - -// .summary-iframe { -// width: 400px; -// height: 400px; -// min-height: 1px; -// background: transparent; -// margin: 10px; -// display: block; -// } - -// .summary-fieldContainer-pp { -// width: 25%; -// height: 300px; -// border-radius: 20px; -// text-align: center; -// padding: 10px; -// } - -// .summary-fieldContainer-graph { -// width: 25%; -// } - -// .summary-dashboard { -// width: 100%; -// height: 900px; -// border-radius: 20px; -// text-align: center; -// padding: 10px; -// } - -// .summary-fieldContainer-dashboard { -// width: 100%; -// height: 300px; -// border-radius: 20px; -// text-align: center; -// padding: 10px; -// } diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js index e49777e..9ddb5f9 100644 --- a/src/components/MapComponent.js +++ b/src/components/MapComponent.js @@ -50,9 +50,13 @@ export default class MapComponent extends Component { for (let i = 0; i < 54; i++) { let cable = cableList[i]; if (cable === undefined) { - document.getElementById("inner-" + i).style.border = - "#bdbdbd 4px solid"; - document.getElementById("text-" + i).style.color = "#bdbdbd"; + try { + document.getElementById("inner-" + i).style.border = + "#bdbdbd 4px solid"; + document.getElementById("text-" + i).style.color = "#bdbdbd"; + } catch (error) { + console.error("Error updating selection:", error); + } } } } @@ -116,12 +120,16 @@ export default class MapComponent extends Component { } let { selected } = this.state; - document.getElementById("inner-" + selected).style.border = - "#004990 4px solid"; - document.getElementById("text-" + selected).style.color = "#004990"; - this.setState({ selected: id }); - document.getElementById("inner-" + id).style.border = "#007cbe 4px solid"; - document.getElementById("text-" + id).style.color = "#007cbe"; + try { + document.getElementById("inner-" + selected).style.border = + "#004990 4px solid"; + document.getElementById("text-" + selected).style.color = "#004990"; + this.setState({ selected: id }); + document.getElementById("inner-" + id).style.border = "#007cbe 4px solid"; + document.getElementById("text-" + id).style.color = "#007cbe"; + } catch (error) { + console.error("Error selecting cable:", error); + } let cab = this.state.cableList[id]; this.setState({ cable: cab }); diff --git a/src/components/SettingsComponent.js b/src/components/SettingsComponent.js index 8edaf20..ac8d907 100644 --- a/src/components/SettingsComponent.js +++ b/src/components/SettingsComponent.js @@ -56,7 +56,7 @@ export default class SettingsComponent extends Component {
- Fannie, + Fannie Yu, CAD Design, Fabrication Planner @@ -75,7 +75,7 @@ export default class SettingsComponent extends Component {
- Scarlett Deck, + Scarlett Kadan, Front-End Dev, UI/UX Designer,