Merge branch 'main' of gitlab.fdmci.hva.nl:propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

web/newWebsite/styles/dashboard-styles.css

@@ -42,21 +42,20 @@
 } */
 
 body {
-    padding-top: 5vw;
     display: flex;
     justify-content: center;
-    align-items: center;
-    height: 100vh;
     margin: 0;
+    margin-top: 8vh;
     background-color: #f0f0f0;
     flex-direction: column;
     background-color: #afafaf;
+    align-items: center;
 
 }
 
 .gaugeGroup {
     width: 98vw;
-    height: 20vh;
+    height: auto;
     display: flex;
     flex-direction: column; /* Keep as column */
     justify-content: flex-start;
@@ -68,8 +67,8 @@ body {
     clear: both;
     margin-bottom: 10px;
     position: relative;
-    float: top;
 }
+
 .groupTitle {
     width: 100%;
     text-align: center;
@@ -112,7 +111,9 @@ body {
     height: 80%; /* Increase the height from 70% to 80% */
     position: relative;
     overflow: visible;
-    
+    height: 5vh;    
+    margin-bottom: 1vh;
+
 }
 
 .gaugeImage {
@@ -125,7 +126,6 @@ body {
     left: 0;
     z-index: 1; /* Make the image display below the needle */
     bottom: 0;
-    margin-bottom: 10px;
 }
 
 .gaugeValue, .gaugeText {
@@ -215,4 +215,24 @@ body {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
+}
+
+.plotly-container {
+    width: 100%;
+    float: bottom;
+    padding: 1vw;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.js-plotly-plot {
+    width: 90%;
+    height: 100%;
+}
+
+.disabled {
+    opacity: 0;
+    height: 0;
+
 }