Small changes to the Summary Page

src/assets/stylesheets/summary.scss

@@ -32,12 +32,33 @@ $white: #fff;
 }
 
 .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: 100%;
-  min-height: calc(100% - 250px);
+  min-height: calc(100% - 200px);
   height: auto;
-  background-color: transparent;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
-  flex-wrap: wrap;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+  margin-bottom: 50px;
+}
+
+.summary-iframe {
+  // width: 400px;
+  // height: 400px;
+  min-height: 1px;
+  background: transparent;
+  margin: 10px;
+  display: block;
 }

src/components/BrowseComponent.js

@@ -123,3 +123,4 @@ export default class BrowseComponent extends Component {
     );
   }
 }
+

src/components/SummaryComponent.js

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

src/index.js

@@ -19,6 +19,7 @@ socket.addEventListener("open", function (event) {
   init();
 });
 
+
 // Initialize the app
 const init = () => {
   const router = createBrowserRouter([
@@ -55,3 +56,7 @@ const init = () => {
     </div>
   );
 };
+
+
+
+init();