styles: fix styling issues

src/app/@components/leaderboard/best-player/best-player.component.html

@@ -8,11 +8,9 @@ <h2><i class="fas fa-crown" style="color: rgb(188, 196, 27);"></i></h2>
       <!-- <img [src]="bestPlayer.img_url" alt="Best Player Avatar"> -->
     </div>
     <div class="best-player-details-div">
-      <span class="best-player-name-span">{{bestPlayer.name}}</span><br />
-      <br />
-      <span class="best-player-nickname-span">@{{bestPlayer.city}}</span><br />
-      <br />
-      <span class="best-player-kite-height-span">{{bestPlayer.kite_height | number:'1.0-0' }}</span>
+      <p class="best-player-name-span">{{bestPlayer.name}}</p>
+      <p class="best-player-nickname-span">@{{bestPlayer.city}}</p>
+      <p class="best-player-kite-height-span">{{bestPlayer.kite_height | number:'1.0-0' }} m</p>
     </div>
   </div>
 </div>

src/app/@components/leaderboard/best-player/best-player.component.scss

@@ -19,7 +19,7 @@
   overflow: hidden;
   display: flex;
   background-color:rgb(188, 196, 27) ;
-  
+
   // background:radial-gradient(var(rgb(188, 196, 27)),transparent,transparent);
   // background:radial-gradient(var(rgb(188, 196, 27)),transparent,transparent);
 
@@ -42,6 +42,11 @@
   text-align: center;
   margin-top: 15px;
   line-height: 0.4;
+  width: 115px;
+
+  p {
+    margin-bottom: 0;
+  }
 }
 
 .best-player-nickname-span{
@@ -71,4 +76,4 @@
 
 .best-place-div{
   margin-bottom: -8px;
-}
+}

src/app/@components/leaderboard/leaderboard/leaderboard.component.html

@@ -11,7 +11,7 @@ <h2>Leaderboard</h2>
           <ngx-best-player *ngIf="bestPlayer" [bestPlayer]="bestPlayer"></ngx-best-player>
         </div>
         <div class="third-div">
-           <ngx-top-players *ngIf="topPlayers.length >= 3" [topPlayer]="topPlayers[2]"></ngx-top-players>
+           <ngx-top-players *ngIf="topPlayers.length >= 2" [topPlayer]="topPlayers[2]"></ngx-top-players>
         </div>
       </div>
       <div *ngIf="topPlayers.length == 0" class="no-players-text">

src/app/@components/leaderboard/leaderboard/leaderboard.component.scss

@@ -21,7 +21,6 @@
 
 .leaderboard-upper-part {
   width: 100%;
-  height: 320px;
   background-color: #180439;
   border-bottom-left-radius: 60px;
   border-bottom-right-radius: 60px;
@@ -91,4 +90,4 @@
   margin-right: 2px;
   margin-left: 2px;
   height: 100vh;
-}
+}

src/app/@components/leaderboard/players/players.component.html

@@ -14,7 +14,7 @@
         <span class="player-nickname-span">@{{ player.city }}</span>
       </div>
       <div class="kite-height-txt-div">
-        <span>{{ player.kite_height | number:'1.0-0' }}</span>
+        <span>{{ player.kite_height | number:'1.0-0' }} m</span>
       </div>
     </mat-list-item>
   </div>

src/app/@components/leaderboard/top-players/top-players.component.html

@@ -6,12 +6,10 @@ <h6>{{topPlayer.rank}}</h6>
     <div class="top-img-circle">
     <img [src]="getTopImageUrl(topPlayer.img_url)" >
   </div>
-  <div class="top-player-details-div">
-    <span class="top-player-name-span">{{topPlayer.name}}</span><br/>
-    <br/>
-    <span class="top-player-nickname-span">@{{topPlayer.city}}</span><br/>
-    <br/>
-    <span class="top-player-kite-height-span">{{topPlayer.kite_height | number:'1.0-0' }}</span>
+  <div class="top-player-details-div" [class.left]="topPlayer.rank == '2nd'" [class.right]="topPlayer.rank == '3rd'">
+    <p class="top-player-name-span">{{topPlayer.name}}</p>
+    <p class="top-player-nickname-span">@{{topPlayer.city}}</p>
+    <p class="top-player-kite-height-span">{{topPlayer.kite_height | number:'1.0-0' }} m</p>
   </div>
 </div>
 </div>

src/app/@components/leaderboard/top-players/top-players.component.scss

@@ -28,7 +28,7 @@
   border-radius: 50%;
 }
 
-.top-player-details-div{
+.top-player-details-div {
   display: flex;
   flex-direction: column;
   font-size: 16px;
@@ -37,6 +37,19 @@
   text-align: center;
   margin-top: 15px;
   line-height: 0.4;
+  width: 95px;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  &.left {
+    margin-right: 10px;
+  }
+
+  &.right {
+    margin-left: 10px;
+  }
 }
 
 .top-player-nickname-span{

src/app/pages/kite-competition/kite-dashboard/kite-dashboard.component.html

@@ -1,6 +1,5 @@
-<div class="row" *ngIf="latestData">
+<div class="row dashboard" *ngIf="latestData">
   <div class="col-xxxl-3 col-xxl-4 col-lg-4 col-md-6">
-
     <ngx-toggle-card></ngx-toggle-card>
     <ngx-wanttoknow></ngx-wanttoknow>
     <!-- <ngx-flyingchart></ngx-flyingchart> -->
@@ -13,4 +12,4 @@
   <div class="col-xxxl-5 col-xxl-4 col-lg-4 col-md-12">
     <ngx-height-comparison [data]="latestData"></ngx-height-comparison>
   </div>
-</div>
+</div>

src/app/pages/kite-competition/kite-dashboard/kite-dashboard.component.scss

@@ -0,0 +1,9 @@
+.dashboard {
+  .col-md-6:nth-child() {
+    padding-right: 0;
+  }
+
+  .col-md-6:last-child {
+    padding-right: inherit;
+  }
+}

src/app/pages/kite-competition/kite-detailscard/kite-detailscard.component.html

@@ -1,9 +1,9 @@
 <nb-card>
   <nb-card-body>
-    <div style="margin-bottom: -10px;">  
-      <h5>මේ සතිය</h5>
+    <div style="margin-bottom: -10px;">
+      <h5>මේ සතියේ වාර්තා</h5>
     </div>
-    
+
     <div class="htitle">උපරිම  උස</div>
     <div class="today">
       <span class="today-temperature h1">{{ maxHeight }} m</span>

src/app/pages/kite-competition/kite/kite.component.html

@@ -6,10 +6,10 @@
     <div class="col-12 d-block d-md-none mobile-banner">
       <img src="assets/images/kite-competition/banner.png" alt="Kite Banner" class="upper-half-image">
     </div>
-    <div class="col-12 col-md-4 col-lg-3 leader-board-container">
+    <div class="col-12 col-md-5 col-lg-3 leader-board-container">
       <ngx-kite-leaderboard></ngx-kite-leaderboard>
     </div>
-    <div class="column col-lg-9 col-md-8 d-none d-md-block kite-dashboard-container">
+    <div class="column col-lg-9 col-md-7 d-none d-md-block kite-dashboard-container">
       <div class="upper-half">
         <div class="headerbar">
           <ngx-header></ngx-header>

src/app/pages/kite-competition/togal-card/toggle-card.component.scss

@@ -6,6 +6,11 @@
   // nb-card {
   //   margin-top: -15px;
   // }
+
+  nb-card-body {
+    padding: 0;
+    overflow: hidden;
+  }
 }
 
 .custom-button {
@@ -16,8 +21,8 @@
   border-radius: 0;
 
   &.mat-stroked-button, &.mat-flat-button {
-    min-width: 100px; 
-    width: 100%; 
+    min-width: 100px;
+    width: 100%;
   }
 
 
@@ -42,7 +47,7 @@
   }
 }
 /* stylelint-disable */
-@media (max-width : 768px) 
+@media (max-width : 768px)
 {
   .toggle-buttons button {
     font-size: 14px;

src/app/pages/kite-competition/togal-card/toggle-card.component.ts

@@ -22,7 +22,7 @@ enum CurrentViewType {
 export class ToggleCardComponent implements OnInit {
 
     user: UserProfile;
-    footerContent: string = 'You are viewing all players view';
+    footerContent: string = 'සියළු තරඟකරුවන්ගේ වාර්තාව';
     currentView: CurrentViewType = CurrentViewType.AllData;
     allViewTypes = CurrentViewType;
     players: Player[] = [];
@@ -69,21 +69,23 @@ export class ToggleCardComponent implements OnInit {
             this.getKitePlayerByUser(userId).subscribe(response => {
                 if (response && response._id) {
                     this.router.navigate(['/kite/player', response._id]).then(() => {
-                        this.footerContent = 'You are viewing your player records';
+                        this.footerContent = 'ඔයාගේ තරඟ වාර්තාව';
                     });
                 } else {
-                    this.footerContent = 'You are signed in, but you are not a player.';
+                    this.footerContent = 'සරුංගල් මේනියා සමඟ ලියාපදිංචි වී \
+                    නෙළුම් කුළුණට වඩා උඩින් සරුංගල් යවන්න ඔයත් එකතු වෙන්න';
                 }
             }, error => {
                 if (error.status === 404) {
-                    this.footerContent = 'You are signed in, but you are not a player.';
+                    this.footerContent = 'සරුංගල් මේනියා සමඟ ලියාපදිංචි වී \
+                    නෙළුම් කුළුණට වඩා උඩින් සරුංගල් යවන්න ඔයත් එකතු වෙන්න';
                 } else {
                     console.error('Error fetching player data:', error);
                     this.footerContent = 'Error fetching player data.';
                 }
             });
         } else {
-            this.footerContent = 'You are not signed in. Please sign in.';
+            this.footerContent = 'ඔයාගේ විස්තර බලන්න මුලින්ම Sign In වෙන්න';
             this.onSignIn();
         }
     }
@@ -107,30 +109,30 @@ export class ToggleCardComponent implements OnInit {
 
         if (currentUrl === '/kite/player/all') {
             this.currentView = CurrentViewType.AllData;
-            this.footerContent = 'You are viewing all players view';
-        } else if (currentUrl.startsWith('/kite/player/') && currentUrl !== '/kite/player/all') {
+            this.footerContent = 'සියළු තරඟකරුවන්ගේ වාර්තාව';
+        } else if (currentUrl.startsWith('/kite/player/')) {
             const playerId = this.route.snapshot.paramMap.get('id');
             if (playerId) {
                 const player = this.players.find(p => p.id === playerId);
                 if (player) {
                     if (userId && userId === playerId) {
                         this.currentView = CurrentViewType.MyData;
-                        this.footerContent = 'You are viewing your player records';
+                        this.footerContent = 'ඔයාගේ තරඟ වාර්තාව';
                     } else {
                         this.currentView = CurrentViewType.PlayerData;
-                        this.footerContent = `You are viewing ${player.name}'s details @${player.city}`;
+                        this.footerContent = `තරඟ වාර්තාව: ${player.name} @ ${player.city}`;
                     }
                 } else {
                     this.currentView = CurrentViewType.PlayerData;
-                    this.footerContent = 'Player data not found';
+                    this.footerContent = 'තරඟකරුවා ගැන විස්තර සොයා ගැනීමට නැත';
                 }
             } else {
                 this.currentView = CurrentViewType.PlayerData;
                 this.footerContent = 'You are viewing player records';
             }
         } else {
             this.currentView = CurrentViewType.AllData;
-            this.footerContent = 'You are viewing all players view';
+            this.footerContent = 'සියළු තරඟකරුවන්ගේ වාර්තාව';
         }
     }