Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Grid of Graphs with a gap I can not remove

Browse Source
This commit is contained in:
Lucas 2024-05-08 20:21:12 -05:00
parent ee0ab01355
commit 3db7609bd5
2 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/assets/stylesheets/summary.scss
View File

@ -56,31 +56,54 @@ $hover-blue: #25b3ff;
margin-bottom: 50px; margin-bottom: 50px;
} }
.summary-iframe {
width: 400px; .summary-grid {
height: 400px; width: 100%;
min-height: 1px; display: grid;
background: transparent; grid-template-columns: repeat(2, 1fr); /* 2 columns */
margin: 10px; grid-gap: 10px; /* Adjust the gap between iframes */
display: block; grid-row-gap: 5px; /* Adjust the gap between rows */
// Debug Borders
border-width: 5px;
border-style: solid;
} }
.summary-fieldContainer-pp { .summary-iframe {
width: 25%; width: 100%; /* Ensure iframes take up full width of their grid cell */
height: 300px; height: 300px; /* Adjust the height of iframes */
border-radius: 20px;
text-align: center; // Debug Borders
padding: 10px; 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 { .summary-fieldContainer-graph {
width: 25%; width: 25%;
} }
.summary-fieldContainer-dashboard { // .summary-fieldContainer-dashboard {
width: 100%; // width: 100%;
height: 300px; // height: 300px;
border-radius: 20px; // border-radius: 20px;
text-align: center; // text-align: center;
padding: 10px; // padding: 10px;
} // }

56
src/components/SummaryComponent.js
View File

@ -8,33 +8,35 @@ export default class SummaryComponent extends Component {
<div className="summary"> <div className="summary">
<img className="summary-image" src={BeldenLogo} alt="Belden" /> <img className="summary-image" src={BeldenLogo} alt="Belden" />
<div className="summary-fieldContainer"> <div className="summary-fieldContainer">
{/* <div className="summary-iframe"> */} <div className="summary-grid">
<iframe {/* <div className="summary-iframe"> */}
className="summary-iframe" <iframe
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" className="summary-iframe"
// width="400" src="=http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&viewPanel=9"
// height="300" // width="400"
frameborder="0" // height="300"
></iframe> frameborder="0"
<iframe ></iframe>
className="summary-iframe" <iframe
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" className="summary-iframe"
// width="400" src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
// height="300" // width="400"
frameborder="0" // height="300"
></iframe> frameborder="0"
<iframe ></iframe>
className="summary-iframe" <iframe
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" className="summary-iframe"
frameborder="0" src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
></iframe> frameborder="0"
<iframe ></iframe>
className="summary-iframe" <iframe
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" className="summary-iframe"
frameborder="0" src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
></iframe> frameborder="0"
{/* </div> */} ></iframe>
{/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */} {/* </div> */}
{/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
</div>
</div> </div>
</div> </div>
); );