Skip to content

Commit

Permalink
fix friend lists , header
Browse files Browse the repository at this point in the history
  • Loading branch information
OksanaFilipchuk committed Oct 11, 2023
1 parent 7c449b6 commit af92085
Show file tree
Hide file tree
Showing 13 changed files with 245 additions and 291 deletions.
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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;
}
}
}
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Loading

0 comments on commit af92085

Please sign in to comment.