Merge pull request #455 from softwaremagico/453-score-time-are-not-sh…

…own-on-the-panel

Fixed score time pop-up

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-623h-blueviolet.svg)]()
+[![Time](https://img.shields.io/badge/development-624h-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/fight/duel/user-score/score/score.component.html

@@ -9,14 +9,14 @@
        (focus)="clearCoordinates();"
        (blur)="clearCoordinates();"
        class="point" [ngClass]="{'hidden-point': scoreRepresentation === 'F'}" >
-    {{scoreRepresentation}}
+    <span class="point-value">{{scoreRepresentation}}</span>
     <div *ngIf="this.timeRepresentation" [innerHTML]="tooltipText()"
          [ngClass]="{
           'left-border': onLeftBorder,
           'center': !onRightBorder && !onLeftBorder,
           'right-border': onRightBorder
         }"
-         class="tooltiptext">
+         class="tooltip-popup">
       <mat-icon>timer</mat-icon>
     </div>
   </div>

frontend/src/app/components/fight/duel/user-score/score/score.component.scss

@@ -20,11 +20,14 @@
   font-weight: bold;
   font-size: 130%;
   flex-grow: 1;
+  height: 20px;
+  width: 20px;
+  position: relative;
 }
 
-.point .tooltiptext {
+.point .tooltip-popup {
   visibility: hidden;
-  width: 200px;
+  width: 120px;
   min-height: 50px;
   background-color: #555555;
   color: #ffffff;
@@ -35,30 +38,29 @@
 
   /* Position the tooltip text */
   position: absolute;
-  z-index: 1;
+  z-index: 1000;
   top: 125%;
   left: 50%;
-  margin-left: -100px;
 
   /* Fade in tooltip */
   opacity: 0;
   transition: opacity 0.3s;
 }
 
-.point .tooltiptext.left-border {
+.point .tooltip-popup.left-border {
   margin-left: -40px;
 }
 
-.point .tooltiptext.right-border {
+.point .tooltip-popup.right-border {
   margin-left: -260px;
 }
 
-.point .tooltiptext.center {
-  margin-left: -100px;
+.tooltip-popup.center {
+  translate: -50%;
 }
 
 /* Tooltip arrow */
-.point .tooltiptext::after {
+.point .tooltip-popup::after {
   content: "";
   position: absolute;
   top: -18%;
@@ -71,7 +73,7 @@
 
 
 /* Show the tooltip text when you mouse over the tooltip container */
-.point:hover .tooltiptext {
+.point:hover .tooltip-popup {
   visibility: visible;
   opacity: 1;
 }

frontend/src/app/components/fight/duel/user-score/score/score.component.ts

@@ -230,9 +230,8 @@ export class ScoreComponent implements OnInit, OnChanges {
     if (!this.timeRepresentation || this.timeRepresentation.length == 0) {
       return "";
     }
-    let tooltipText: string = '<b>' + this.getScore() + '</b><br>' +
-      '<div class="time-tooltip-container"><span class="material-icons time-tooltip">timer</span><span class="time-tooltip">' + this.timeRepresentation + '</span></div>';
-    return tooltipText;
+    return '<span class="tooltip-score"><b>' + this.getScore() + '</b></span><br>' +
+      '<div class="time-tooltip-container"><span class="material-icons time-tooltip">timer</span><span class="time-tooltip-text">' + this.timeRepresentation + '</span></div>';
   }
 
   updateCoordinates($event: MouseEvent): void {