diff --git a/src/app/ideas/ideas.component.html b/src/app/ideas/ideas.component.html index a25cddf..8baba10 100644 --- a/src/app/ideas/ideas.component.html +++ b/src/app/ideas/ideas.component.html @@ -33,6 +33,11 @@

Change log

Change Date + + Bowling average charts moved into a tabs group design. + + 02/08/2024 + Major change to responsive design: charts display better in small screens in portrait screen orientation. diff --git a/src/app/strike-rate/strike-rate.component.html b/src/app/strike-rate/strike-rate.component.html index e463fa6..b0549b7 100644 --- a/src/app/strike-rate/strike-rate.component.html +++ b/src/app/strike-rate/strike-rate.component.html @@ -1,9 +1,17 @@ @if (loaded()) { -

Strike rate

+

Bowling strike rate

+ -
+ +
+ +
+ + + } \ No newline at end of file diff --git a/src/app/strike-rate/strike-rate.component.ts b/src/app/strike-rate/strike-rate.component.ts index a8a8ca2..c7e2c57 100644 --- a/src/app/strike-rate/strike-rate.component.ts +++ b/src/app/strike-rate/strike-rate.component.ts @@ -6,11 +6,12 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'; import { DataFetchService } from '../data-fetch.service'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'app-strike-rate', standalone: true, - imports: [BaseChartDirective, MatButtonModule, MatIconModule], + imports: [BaseChartDirective, MatButtonModule, MatIconModule, MatTooltipModule], templateUrl: './strike-rate.component.html', styleUrl: './strike-rate.component.css' }) diff --git a/src/app/wickets-opponent-bar/wickets-opponent-bar.component.html b/src/app/wickets-opponent-bar/wickets-opponent-bar.component.html index 99cb428..68ab488 100644 --- a/src/app/wickets-opponent-bar/wickets-opponent-bar.component.html +++ b/src/app/wickets-opponent-bar/wickets-opponent-bar.component.html @@ -5,12 +5,8 @@

Matches & wickets taken by opposition

[labels]="wicketsData.labels" [options]="barChartOptions" [plugins]="chartPlugins"> -
-

- - - Show or hide the five-wicket haul counts. -

+
+
} \ No newline at end of file diff --git a/src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts b/src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts index c416544..6ad7e70 100644 --- a/src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts +++ b/src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts @@ -6,11 +6,12 @@ import ChartDataLabels from 'chartjs-plugin-datalabels'; import { DataFetchService } from '../data-fetch.service'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'app-wickets-opponent-bar', standalone: true, - imports: [BaseChartDirective, MatButtonModule, MatIconModule], + imports: [BaseChartDirective, MatButtonModule, MatIconModule, MatTooltipModule], templateUrl: './wickets-opponent-bar.component.html', styleUrl: './wickets-opponent-bar.component.css' }) diff --git a/src/styles.css b/src/styles.css index da10900..76c3703 100644 --- a/src/styles.css +++ b/src/styles.css @@ -67,6 +67,11 @@ body { margin: 1%; } +.tab-conent-top-padding { + /* padding: 3%; */ + padding-top: 3%; +} + /* Small devices (up to 768px) */ @media only screen and (max-width: 666px) { .chart {