more responsive design changes

second-slip · Aug 1, 2024 · 959ef47 · 959ef47
1 parent 3ab73d1
commit 959ef47
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/app/wkts-match/wkts-match.component.css b/src/app/wkts-match/wkts-match.component.css
@@ -2,14 +2,19 @@ canvas {
     box-sizing: initial;
 }
 
+.chart-full-screen {
+    height: 100%;
+    width: 100%;
+}
 
-.chart.full-screen {
+.chart-full-screen {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     overflow: auto;
-    background: lime;
-    z-index: 25;
+    background: black;
+    /* background: lime; */
+    z-index: 10;
 }
diff --git a/src/app/wkts-match/wkts-match.component.html b/src/app/wkts-match/wkts-match.component.html
@@ -10,7 +10,14 @@
 <canvas class="chart" baseChart [type]="'bar'" [legend]="true" [datasets]="formatAnalysisData.chartData"
   [labels]="formatAnalysisData.chartLabels" [options]="barChartOptions">
 </canvas>
-<!-- </div> -->
+
+<!-- use a different container -->
+<!-- <div class="chart-full-screen full-screen">
+  <button mat-flat-button (click)="toggleBar()">{{btnText()}}</button>
+  <canvas baseChart [type]="'bar'" [legend]="true" [datasets]="formatAnalysisData.chartData"
+    [labels]="formatAnalysisData.chartLabels" [options]="barChartOptions">
+  </canvas>
+</div> -->
 
 <section>
   <p class="alert alert-info">

diff --git a/src/styles.css b/src/styles.css
@@ -59,7 +59,7 @@ body {
 }
 
 .chart {
-    min-width: 500px;
+    min-width: 450px;
     overflow: visible;
 }