Merge pull request #2720 from ita-social-projects/bugfix/#6464/#6446/…

…#6462/#6340

Bugfix/#6464/#6446/#6462/#6340 Friendslist styles/ header styles

src/app/main/component/events/components/events-list/events-list.component.ts

@@ -251,7 +251,7 @@ export class EventsListComponent implements OnInit, OnDestroy {
   }
 
   private getStatusesForFilter(): OptionItem[] {
-    return !!this.userId ? eventStatusList : eventStatusList.slice(0, 2);
+    return this.userId ? eventStatusList : eventStatusList.slice(0, 2);
   }
 
   public toggleAllSelection(optionsList: MatSelect, dropdownName: string): void {

src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="all-friends-container">
   <div class="friends-list">
     <div *ngIf="!searchMode || !isFetching" class="cards-box">
       <div *ngFor="let friend of friends" class="user-card">

src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.scss

@@ -1,58 +1,48 @@
-.container {
+.all-friends-container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  align-items: center;
-  align-content: center;
-}
-
-.friends-list,
-.cards-box {
-  display: flex;
-  width: 100%;
-}
-
-.cards-box {
-  justify-content: space-between;
-  flex-wrap: wrap;
-  row-gap: 14px;
-}
-
-.user-card {
-  display: flex;
-  width: 50%;
-}
-
-.noFriends-wraper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 30px;
-
-  .noFriends {
-    font-family: var(--secondary-font);
-    font-size: 32px;
-    font-weight: 500;
-    font-style: normal;
-    line-height: 48px;
-  }
-}
-
-@media (max-width: 1219px) {
-  .friends-list {
-    justify-content: center;
-    width: 100%;
-  }
 
   .cards-box {
-    flex-direction: column;
-    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    row-gap: 14px;
+    column-gap: 32px;
+
+    @media (max-width: 1200px) {
+      gap: 32px;
+    }
+
+    @media (max-width: 1000px) {
+      justify-content: center;
+    }
+
+    @media (max-width: 320px) {
+      gap: 20px;
+    }
   }
 
   .user-card {
+    @media (max-width: 1000px) {
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  .noFriends-wraper {
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    width: 100%;
+    margin-bottom: 30px;
+
+    .noFriends {
+      font-family: var(--secondary-font);
+      font-size: 32px;
+      font-weight: 500;
+      font-style: normal;
+      line-height: 48px;
+    }
   }
 }

src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.html

@@ -1,5 +1,5 @@
 <div class="friend-dashboard">
-  <div class="container">
+  <div class="container friend-dashboard-container">
     <a class="button-link" [routerLink]="['/profile', userId]">
       <div class="button-content">
         <img src="assets/img/icon/econews/arrow_left.svg" alt="arrow image" class="button-arrow" />
@@ -8,8 +8,8 @@
     </a>
     <div class="friends">
       <h1>{{ 'profile.friends.friends' | translate }}</h1>
-      <div class="search-field-wrapper">
-        <form name="searchForm" class="searchField" *ngIf="!hideInput">
+      <form name="searchForm" *ngIf="!hideInput">
+        <div class="searchField">
           <img [src]="searchIcon" alt="search-friend" />
           <input
             class="search"
@@ -19,27 +19,23 @@ <h1>{{ 'profile.friends.friends' | translate }}</h1>
             (input)="onInput(search)"
             maxlength="30"
           />
-        </form>
-        <span>
-          <a [routerLink]="['/profile', userId, 'friends']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-            {{ 'profile.friends.all-friends' | translate }} <span *ngIf="allFriendsAmount">{{ allFriendsAmount }}</span>
-          </a>
+        </div>
+      </form>
+      <div class="friend-tabs">
+        <a [routerLink]="['/profile', userId, 'friends']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+          {{ 'profile.friends.all-friends' | translate }} <span *ngIf="allFriendsAmount">{{ allFriendsAmount }}</span>
+        </a>
 
-          <a
-            [routerLink]="['/profile', userId, 'friends', 'recommended']"
-            routerLinkActive="active"
-            [routerLinkActiveOptions]="{ exact: true }"
-          >
-            {{ 'profile.friends.search-friends' | translate }}
-          </a>
-          <a
-            [routerLink]="['/profile', userId, 'friends', 'requests']"
-            routerLinkActive="active"
-            [routerLinkActiveOptions]="{ exact: true }"
-          >
-            {{ 'profile.friends.requests' | translate }} <span *ngIf="requestFriendsAmount">{{ requestFriendsAmount }}</span>
-          </a>
-        </span>
+        <a
+          [routerLink]="['/profile', userId, 'friends', 'recommended']"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >
+          {{ 'profile.friends.search-friends' | translate }}
+        </a>
+        <a [routerLink]="['/profile', userId, 'friends', 'requests']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+          {{ 'profile.friends.requests' | translate }} <span *ngIf="requestFriendsAmount">{{ requestFriendsAmount }}</span>
+        </a>
       </div>
     </div>
     <router-outlet (activate)="onActivate($event)"></router-outlet>

src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.scss

@@ -1,11 +1,16 @@
 .friend-dashboard {
   background-color: var(--after-primary-light-grey);
   min-height: calc(100vh - 164px);
+
+  @media screen and (max-width: 576px) {
+    min-height: calc(100vh - 476px);
+  }
 }
 
-.container {
-  padding: 28px 0 44px 0;
+.friend-dashboard-container {
   padding-top: 28px;
+  padding-bottom: 44px;
+  overflow-y: hidden;
 
   .profile-link {
     text-decoration: underline;
@@ -16,10 +21,24 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    flex-wrap: wrap;
+    column-gap: 63px;
     align-items: center;
     font-family: var(--primary-font);
     padding: 12px 0 44px 0;
 
+    @media screen and (max-width: 1024px) {
+      padding: 12px 0 41px 0;
+    }
+
+    @media screen and (max-width: 576px) {
+      padding: 12px 0 13px 0;
+    }
+
+    @media screen and (max-width: 576px) {
+      padding: 12px 0 21px 0;
+    }
+
     h1 {
       font-style: normal;
       font-weight: 500;
@@ -29,6 +48,31 @@
     }
   }
 
+  a {
+    font-family: var(--primary-font);
+    color: var(--ubs-quaternary-dark-grey);
+    margin: 0 16px;
+    font-size: 16px;
+    line-height: 18.75px;
+  }
+
+  .friend-tabs {
+    a {
+      white-space: nowrap;
+    }
+
+    @media screen and (max-width: 1200px) {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 9px;
+    }
+
+    @media screen and (max-width: 320px) {
+      margin-top: 17px;
+    }
+  }
+
   .searchField {
     display: inline;
     position: relative;
@@ -40,6 +84,22 @@
       border-radius: 4px;
       padding: 8px;
 
+      @media (max-width: 1024px) {
+        width: 330px;
+      }
+
+      @media (max-width: 768px) {
+        width: 219px;
+      }
+
+      @media (max-width: 576px) {
+        width: 227px;
+      }
+
+      @media (max-width: 320px) {
+        width: 256px;
+      }
+
       &:focus {
         outline: none;
         box-shadow: 0 0 3px 0 var(--quintynary-light-grey);
@@ -59,14 +119,6 @@
     }
   }
 
-  a {
-    font-family: var(--primary-font);
-    color: var(--ubs-quaternary-dark-grey);
-    margin: 0 16px;
-    font-size: 16px;
-    line-height: 18.75px;
-  }
-
   .button-link {
     line-height: 16px;
     margin: 0;
@@ -83,43 +135,6 @@
 
   .active {
     color: var(--primary-green);
-    padding: 5px 5px 0;
     text-decoration: none;
   }
 }
-
-@media (max-width: 992px) {
-  .container {
-    margin: auto;
-
-    .searchField {
-      input {
-        margin-left: 30px;
-        max-width: 35%;
-      }
-    }
-  }
-}
-
-@media (max-width: 767px) {
-  .friends {
-    display: flex;
-    flex-direction: column !important;
-    align-items: flex-start;
-  }
-
-  .search-field-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .searchField {
-    position: relative;
-    text-align: center;
-
-    img {
-      display: none;
-    }
-  }
-}

src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-item/friend-item.component.html

@@ -1,4 +1,4 @@
-<div class="friend-item" [style.cursor]="userId ? 'default' : 'pointer'" (click)="clickHandler($event)">
+<div class="friend-item-wrapper" [style.cursor]="userId ? 'default' : 'pointer'" (click)="clickHandler($event)">
   <app-user-profile-image
     [imgPath]="friend.profilePicturePath"
     [firstName]="friend.name"