Bug/94 102 editor and profile pages (#208)

* fixed edit profile page * fixed arrow for badges * fixed username width
BinaryStudioAcademy · Sep 28, 2023 · 63ebb72 · 63ebb72
1 parent 5bed20d
commit 63ebb72
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 78 deletions.
diff --git a/backend/LeetWars.Core/LeetWars.Core.WebAPI/Controllers/UsersController.cs b/backend/LeetWars.Core/LeetWars.Core.WebAPI/Controllers/UsersController.cs
@@ -169,7 +169,7 @@ public async Task<ActionResult<UserDto>> CreateUserAsync([FromBody] NewUserDto u
     /// Update user avatar on profile page
     /// </summary>
     /// <param name="avatar">New avatar</param>
-    /// <returns></returns>
+    /// <returns>User avatar</returns>
     [HttpPost("avatar")]
     public async Task<ActionResult<UserAvatarDto>> UpdateUserAvatarAsync([FromForm] IFormFile newAvatar)
     {

diff --git a/backend/LeetWars.Core/LeetWars.Core.WebAPI/Extentions/ServiceCollectionExtensions.cs b/backend/LeetWars.Core/LeetWars.Core.WebAPI/Extentions/ServiceCollectionExtensions.cs
@@ -61,13 +61,6 @@ public static void AddAutoMapper(this IServiceCollection services)
             services.AddAutoMapper(Assembly.GetAssembly(typeof(UserProfile)));
         }
 
-        public static void AddValidation(this IServiceCollection services)
-        {
-            services
-                .AddControllers()
-                .AddFluentValidation(fv => fv.RegisterValidatorsFromAssemblyContaining<NewSampleDtoValidator>());
-        }
-
         public static void AddLeetWarsCoreContext(this IServiceCollection services, IConfiguration configuration)
         {
             var connectionsString = configuration.GetConnectionString("LeetWarsCoreDBConnection");

diff --git a/backend/LeetWars.Core/LeetWars.Core.WebAPI/Program.cs b/backend/LeetWars.Core/LeetWars.Core.WebAPI/Program.cs
@@ -25,7 +25,6 @@
 builder.Services.AddAzureBlobServices(builder.Configuration);
 builder.Services.AddAutoMapper();
 builder.Services.AddSwaggerGen();
-builder.Services.AddValidation();
 builder.Services.AddFirebaseAuthentication(builder.Configuration);
 builder.Services.RegisterHengfire(builder.Configuration);
 

diff --git a/backend/LeetWars.Core/LeetWars.Core.WebAPI/Validators/Sample/NewSampleDtoValidator.cs b/backend/LeetWars.Core/LeetWars.Core.WebAPI/Validators/Sample/NewSampleDtoValidator.cs
diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.html b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.html
@@ -5,7 +5,7 @@
         <button class="custom-button accent" (click)="sendSubmitRequest()">Submit</button>
     </div>
     <as-split [direction]="splitDirection" [gutterSize]="8">
-        <as-split-area [size]="50" [minSize]="splitLeftMinSize">
+        <as-split-area class="min-size" [size]="50">
             <div class="problem-info h-100">
                 <div>
                     <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">

diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.sass b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.sass
@@ -13,6 +13,7 @@
     font-size: 11px
     font-weight: 500
     letter-spacing: 0em
+    min-width: 300px
 
 .fullscreen-button
     position: absolute
@@ -146,7 +147,6 @@ button span
         justify-content: center
         text-align: center
 
-
 .custom-button
     font-weight: 600
     padding: 10px 15px
@@ -219,3 +219,6 @@ button span
         &:focus,
         &:active
             background-color: $maroon
+
+.min-size
+    min-width: 320px
diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.ts b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.ts
@@ -31,9 +31,7 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
 
     splitDirection: 'horizontal' | 'vertical';
 
-    splitLeftMinSize: number = 20;
-
-    splitRightMinSize: number = 20;
+    splitRightMinSize: number = 30;
 
     challenge: IChallenge;
 

diff --git a/frontend/src/app/modules/landing/landing-page/landing-page.component.ts b/frontend/src/app/modules/landing/landing-page/landing-page.component.ts
@@ -1,5 +1,4 @@
 import { Component, ElementRef, HostListener, Renderer2, ViewChild } from '@angular/core';
-import { SpinnerService } from '@core/services/spinner.service';
 
 @Component({
     selector: 'app-landing-page',
@@ -29,7 +28,7 @@ export class LandingPageComponent {
 
     @ViewChild('navDropdownDiv') dropdownNavigation: ElementRef;
 
-    constructor(private spinnerService: SpinnerService, private renderer: Renderer2) {
+    constructor(private renderer: Renderer2) {
         this.windowWidth = window.innerWidth;
     }
 

diff --git a/frontend/src/app/modules/leader/leader-board/leader-board.component.html b/frontend/src/app/modules/leader/leader-board/leader-board.component.html
@@ -1,8 +1,12 @@
 <div class="wrapper">
     <div class="board-wrapper">
         <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" (change)="toggleMyFriends()" role="switch"
-                id="flexSwitchCheckChecked">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                (change)="toggleMyFriends()"
+                role="switch"
+                id="flexSwitchCheckChecked" />
             <label class="form-check-label" for="flexSwitchCheckChecked">My friends</label>
         </div>
         <div class="board">
@@ -22,26 +26,28 @@
                             [src]="this.user?.imagePath ?? AssetConstants.defaultProfileImagePath"
                             alt="user-avatar" />
                         <p>
-                            <a class="user-link" (click)="onLinkClick(user.id)">
+                            <a class="user-link d-block" (click)="onLinkClick(user.id)">
                                 {{ user.userName }}
                             </a>
                         </p>
                     </div>
                     <div class="total-score">{{ user.totalScore }}</div>
                     <div class="add-friend d-flex">
-                        <button (click)="addFriend(user)" class="user-icon-btn user-plus-btn"
+                        <button
+                            (click)="addFriend(user)"
+                            class="user-icon-btn user-plus-btn"
                             *ngIf="isAddFriendButtonVisible(user)">
                             <fa-icon class="user-icon user-plus-icon" [icon]="['fas', 'user-plus']"></fa-icon>
                         </button>
-                        <div *ngIf="isFriendshipStatus(user, 'Pending')" class="dot-flashing">
-                        </div>
+                        <div *ngIf="isFriendshipStatus(user, 'Pending')" class="dot-flashing"></div>
                         <button class="user-icon-btn" *ngIf="isFriendshipStatus(user, 'Accepted')">
                             <fa-icon class="user-icon" [icon]="['fas', 'user-group']"></fa-icon>
                         </button>
                     </div>
                     <div class="start-fight text-start">
                         <div *ngIf="user.id !== this.currentUser.id">
-                            <button [ngClass]="{ 'cursor-none': !isCurrentUserAbleToCodeFight() }"
+                            <button
+                                [ngClass]="{ 'cursor-none': !isCurrentUserAbleToCodeFight() }"
                                 *ngIf="user.codeFightStatus === CodeFightStatus.NotInBattle"
                                 (click)="startCodeFight(user)">
                                 <fa-icon [icon]="'user-ninja'"></fa-icon>
@@ -62,4 +68,4 @@
         </div>
     </div>
 </div>
-<app-arrow-up [onScrollEvent]="scrollEventSubject.asObservable()"></app-arrow-up>
+<app-arrow-up [onScrollEvent]="scrollEventSubject.asObservable()"></app-arrow-up>
diff --git a/frontend/src/app/modules/leader/leader-board/leader-board.component.sass b/frontend/src/app/modules/leader/leader-board/leader-board.component.sass
@@ -55,12 +55,15 @@
         padding-bottom: 11px
 
 .user-name
-    width: 50%
+    width: 45%
     color: $white
+    text-overflow: ellipsis
+    overflow: hidden
+    white-space: nowrap
     @media ( max-width: $small-challenge)
-      width: 40%
+        width: 40%
     @media ( max-width: $mobile)
-      width: calc(87% - 132px)
+        width: calc(87% - 132px)
     &-avatar
         width: 16px
         height: 16px
@@ -94,21 +97,21 @@
         &-text
             display: none
 
-.add-friend 
+.add-friend
     width: 7%
     min-width: 25px
     justify-content: start
     align-items: center
-    
-.user-icon-btn 
+
+.user-icon-btn
     padding: 0 3px
     &:active
         scale: 93%
 
 .user-plus-btn
     padding: 0 4px
 
-.user-icon        
+.user-icon
     cursor: pointer
     color: $cornflower
     &:hover
@@ -131,7 +134,7 @@
     color: $green
 
 .in-battle
-  color: $light-red
+    color: $light-red
 
 .form-check-input
     cursor: pointer

diff --git a/frontend/src/app/modules/main/suggested-challenge/suggested-challenge.component.sass b/frontend/src/app/modules/main/suggested-challenge/suggested-challenge.component.sass
@@ -3,12 +3,12 @@
 @import 'screen-sizes-variables'
 
 :host
-  font-family: Open Sans
-  display: flex
-  justify-content: center
+    font-family: Open Sans
+    display: flex
+    justify-content: center
 
 :host ::ng-deep .float-start
-  color: $lavender-ash
+    color: $lavender-ash
 
 .suggested-body
     display: flex
@@ -72,8 +72,6 @@ h5
     margin-right: 10%
     &:hover, &:disabled
         background-color: $dark-green
-    &:disabled
-        cursor: default
     @media screen and (max-width: $small-mobile)
         margin-right: 0
 
@@ -165,12 +163,12 @@ h5
     font-weight: 300
 
     &::before
-      display: inline-block
-      content: ''
-      width: 10px
-      height: 10px
-      background-color: $green
-      border-radius: 50%
+        display: inline-block
+        content: ''
+        width: 10px
+        height: 10px
+        background-color: $green
+        border-radius: 50%
 
 .constraints li
     list-style-position: inside

diff --git a/frontend/src/app/modules/user/badge/badge.component.html b/frontend/src/app/modules/user/badge/badge.component.html
@@ -5,12 +5,12 @@
                 <div class="text-label-1">Badges</div>
                 <div class="text-label-2">{{ badges.length }}</div>
             </div>
-            <fa-icon *ngIf="badges?.length" [icon]="'arrow-right'" size="xl"></fa-icon>
         </div>
 
         <ng-container *ngIf="badges?.length">
-            <div class="carousel-container">
+            <div class="carousel-container position-relative">
                 <owl-carousel-o
+                    #badgesCarousel
                     [options]="customOptions"
                     (translated)="onTranslated($event)"
                     (initialized)="onTranslated($event)">
@@ -20,6 +20,7 @@
                         </div>
                     </ng-template>
                 </owl-carousel-o>
+                <fa-icon class="badge-arrow" [icon]="'arrow-right'" size="xl" (click)="badgesCarousel.next()"></fa-icon>
             </div>
             <div class="text-label-1">Most Recent Badge</div>
             <div>{{ badges[startPosition].name }}</div>

diff --git a/frontend/src/app/modules/user/badge/badge.component.sass b/frontend/src/app/modules/user/badge/badge.component.sass
@@ -53,6 +53,11 @@ img
     width: 65%
     margin: auto
 
+.badge-arrow
+    position: absolute
+    top: -55%
+    right: -28%
+
 @media screen and (max-width: $small-medium)
     .badges-container
         width: 256px

diff --git a/frontend/src/app/modules/user/user-info-editor/user-info-editor.component.html b/frontend/src/app/modules/user/user-info-editor/user-info-editor.component.html
@@ -2,7 +2,8 @@
     <div class="form-wrapper d-flex flex-column flex-grow-1">
         <div class="d-flex align-items-center justify-content-between">
             <fa-icon [icon]="'arrow-left'" size="2x" (click)="onReturnToProfile()"></fa-icon>
-            <button [disabled]="userInfoForm.invalid"
+            <button
+                [disabled]="userInfoForm.invalid"
                 class="submit-button d-flex justify-content-center align-items-center align-self-end"
                 (click)="onSave()">
                 Save
@@ -22,22 +23,35 @@
                     </label>
                 </div>
                 <div class="d-flex flex-column justify-content-between right-form-data flex-grow-1">
-                    <app-custom-input [InputType]="'email'" [Identifier]="'email'" [Width]="'100%'"
-                        [InputLabel]="'Email'" [InputPlaceholder]="'Enter your email'" [disabled]="true"
-                        formControlName="email" [InputValue]="userInfoForm.value.email"
+                    <app-custom-input
+                        [InputType]="'email'"
+                        [Identifier]="'email'"
+                        [Width]="'100%'"
+                        [InputLabel]="'Email'"
+                        [InputPlaceholder]="'Enter your email'"
+                        [disabled]="true"
+                        formControlName="email"
+                        [InputValue]="userInfoForm.value.email"
                         (InputValueChange)="userInfoForm.controls['email'].setValue($event)">
                     </app-custom-input>
-                    <div class="invalid-feedback d-block"
+                    <div
+                        class="invalid-feedback d-block"
                         *ngIf="userInfoForm.controls['email'].touched && userInfoForm.get('email')?.invalid">
                         <div>{{ getErrorMessage('email') }}</div>
                     </div>
 
-                    <app-custom-input [InputType]="'text'" [Identifier]="'text'" [Width]="'100%'"
-                        [InputLabel]="'Username'" [InputPlaceholder]="'Enter your username'"
-                        [InputValue]="userInfoForm.value.username" formControlName="username"
+                    <app-custom-input
+                        [InputType]="'text'"
+                        [Identifier]="'text'"
+                        [Width]="'100%'"
+                        [InputLabel]="'Username'"
+                        [InputPlaceholder]="'Enter your username'"
+                        [InputValue]="userInfoForm.value.username"
+                        formControlName="username"
                         (InputValueChange)="userInfoForm.controls['username'].setValue($event)">
                     </app-custom-input>
-                    <div class="invalid-feedback d-block"
+                    <div
+                        class="invalid-feedback d-block"
                         *ngIf="userInfoForm.controls['username'].touched && userInfoForm.get('username')?.invalid">
                         <div>{{ getErrorMessage('username') }}</div>
                     </div>
@@ -58,4 +72,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/frontend/src/app/modules/user/user-info-editor/user-info-editor.component.sass b/frontend/src/app/modules/user/user-info-editor/user-info-editor.component.sass
@@ -18,7 +18,8 @@
     font-weight: 800
     &:active
         scale: 97%
-    &:hover
+    &:hover,
+    &:disabled
         background-color: $dark-olive-green
 
 .form-wrapper
@@ -88,7 +89,7 @@ fa-icon
 .accounts-container
     margin-top: 20px
 
-.github-button 
+.github-button
     display: inline-block
     padding: 5px 10px
     background-color: $grey
@@ -98,7 +99,7 @@ fa-icon
     user-select: none
     transition: background-color 0.3s
 
-.github-button:hover 
+.github-button:hover
     background-color: $transparent-grey
 
 .edit-section