Merge pull request #470 from softwaremagico/467-tournament-brackets-i…

…n-some-cases-the-brackets-does-not-fit-on-the-screen

Improving brackets visibility

README.md

@@ -8,7 +8,7 @@
 [![GitHub commit activity](https://img.shields.io/github/commit-activity/y/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![GitHub last commit](https://img.shields.io/github/last-commit/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![CircleCI](https://circleci.com/gh/softwaremagico/KendoTournamentManager.svg?style=shield)](https://circleci.com/gh/softwaremagico/KendoTournamentManager)
-[![Time](https://img.shields.io/badge/development-625h-blueviolet.svg)]()
+[![Time](https://img.shields.io/badge/development-626h-blueviolet.svg)]()
 
 [![Powered by](https://img.shields.io/badge/powered%20by%20java-orange.svg?logo=OpenJDK&logoColor=white)]()
 [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=kendo-tournament-backend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=kendo-tournament-backend)

frontend/src/app/components/tournament-brackets-editor/tournament-brackets/arrow/arrow.component.html

@@ -6,6 +6,7 @@
     </marker>
   </defs>
 
-  <line [attr.x1]="x1" [attr.y1]="y1" [attr.x2]="x2-(arrow_size/2)" [attr.y2]="y2" class="arrow" [style.stroke]="color"
+  <line [attr.x1]="x1" [attr.y1]="y1" [attr.x2]="x2-(arrow_size/2)" [attr.y2]="y2" class="arrow"
+        [style.stroke]="color"
         [style.stroke-dasharray]="(winner==0) ? '1 0' : '10 5'"/>
 </svg>

frontend/src/app/components/tournament-brackets-editor/tournament-brackets/arrow/arrow.component.ts

@@ -82,7 +82,8 @@ export class ArrowComponent implements OnInit {
         this.y2 += ArrowComponent.WINNER_SEPARATION;
       }
     }
-    this.height = Math.max(this.y2, this.y1) + ArrowComponent.ARROW_SIZE / 2;
+    //Arrows define the height of the brackets. Put 300 px to show correctly the group.
+    this.height = Math.max(this.y2, this.y1) + ArrowComponent.ARROW_SIZE / 2 + BracketsMeasures.GROUP_HIGH + BracketsMeasures.GROUP_SEPARATION;
     this.width = Math.max(this.x2, this.x1);
   }