From af92085a9692cb29c5b87858558669a05cf893ac Mon Sep 17 00:00:00 2001 From: Oksana Filipchuk Date: Wed, 11 Oct 2023 12:54:56 +0300 Subject: [PATCH] fix friend lists , header --- .../all-friends/all-friends.component.html | 2 +- .../all-friends/all-friends.component.scss | 82 ++++++------- .../friend-dashboard.component.html | 42 +++---- .../friend-dashboard.component.scss | 109 ++++++++++-------- .../friend-item/friend-item.component.html | 2 +- .../friend-item/friend-item.component.scss | 76 ++++++------ .../friend-requests.component.html | 2 +- .../friend-requests.component.scss | 42 +++---- .../recommended-friends.component.html | 72 ++++++------ .../recommended-friends.component.scss | 42 +++---- src/app/shared/header/header.component.scss | 61 +++------- src/assets/i18n/en.json | 2 +- src/assets/i18n/ua.json | 2 +- 13 files changed, 245 insertions(+), 291 deletions(-) diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.html b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.html index bdc16e9a67..70d79e665c 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.html +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.scss b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.scss index 95644e674b..cf52e5eee0 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/all-friends/all-friends.component.scss +++ b/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; + } } } diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.html b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.html index 6567149e1e..723a035512 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.html +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.html @@ -1,5 +1,5 @@
-
+
arrow image @@ -8,8 +8,8 @@

{{ 'profile.friends.friends' | translate }}

-
-
+ +
search-friend {{ 'profile.friends.friends' | translate }} (input)="onInput(search)" maxlength="30" /> - - - - {{ 'profile.friends.all-friends' | translate }} {{ allFriendsAmount }} - +
+ +
+ + {{ 'profile.friends.all-friends' | translate }} {{ allFriendsAmount }} + - - {{ 'profile.friends.search-friends' | translate }} - - - {{ 'profile.friends.requests' | translate }} {{ requestFriendsAmount }} - - + + {{ 'profile.friends.search-friends' | translate }} + + + {{ 'profile.friends.requests' | translate }} {{ requestFriendsAmount }} +
diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.scss b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.scss index e8aadf678c..46b27bf95d 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-dashboard.component.scss +++ b/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; - } - } -} diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-item/friend-item.component.html b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-item/friend-item.component.html index 022f97ca19..53e66b0385 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-item/friend-item.component.html +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-item/friend-item.component.html @@ -1,4 +1,4 @@ -
+
+
diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-requests/friend-requests.component.scss b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-requests/friend-requests.component.scss index 4b24af8019..783e10e629 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-requests/friend-requests.component.scss +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/friend-requests/friend-requests.component.scss @@ -1,16 +1,10 @@ @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); -.container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - +.friend-requests-container { .requests-box { display: flex; align-items: center; justify-content: center; - width: 100%; .request-list { display: flex; @@ -18,10 +12,26 @@ flex-wrap: wrap; width: 100%; row-gap: 14px; + column-gap: 32px; + + @media (max-width: 1200px) { + row-gap: 32px; + column-gap: 32px; + } + + @media (max-width: 1000px) { + justify-content: center; + column-gap: 0; + } + + @media (max-width: 320px) { + row-gap: 20px; + } .user-card { - display: flex; - width: 50%; + @media (max-width: 767px) { + width: 100%; + } } } } @@ -41,17 +51,3 @@ line-height: 48px; } } - -@media (max-width: 1219px) { - .request-list { - flex-direction: column; - align-items: center; - width: 100%; - - .user-card { - display: flex; - justify-content: center; - width: 100%; - } - } -} diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.html b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.html index a3e6ff6614..460b5b8d72 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.html +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.html @@ -1,48 +1,46 @@ -
-
-
-
-
-
- - -
+
+
+
+
+
+ +
+
-
-
-

{{ amountOfFriends }} {{ 'profile.friends.found-amount' | translate }}

-
-
-
-
- - -
+
+
+

{{ amountOfFriends }} {{ 'profile.friends.found-amount' | translate }}

+
+
+
+
+ +
- - -
-
-

- {{ 'search.search-not-found.not-found-friends-text' | translate }} -

-
- absent-friends -
+ +
+
+ +
+

+ {{ 'search.search-not-found.not-found-friends-text' | translate }} +

+
+ absent-friends
diff --git a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.scss b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.scss index b30faaea82..855189727f 100644 --- a/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.scss +++ b/src/app/main/component/user/components/profile/users-friends/friend-dashboard/recommended-friends/recommended-friends.component.scss @@ -1,15 +1,8 @@ -.container { +.friend-recommended-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; -} - -.cards-list { - display: flex; - flex-direction: column; - width: 100%; - gap: 18px; .cards-box { display: flex; @@ -17,10 +10,25 @@ flex-wrap: wrap; width: 100%; 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 { - display: flex; - width: 50%; + .user-card { + @media (max-width: 767px) { + width: 100%; + margin: 0 auto; } } } @@ -47,15 +55,3 @@ line-height: 48px; } } - -@media (max-width: 1219px) { - .cards-list { - flex-direction: column; - max-width: 100%; - - .cards-box .user-card { - justify-content: center; - width: 100%; - } - } -} diff --git a/src/app/shared/header/header.component.scss b/src/app/shared/header/header.component.scss index feca0712a0..5e9c3040dd 100644 --- a/src/app/shared/header/header.component.scss +++ b/src/app/shared/header/header.component.scss @@ -200,6 +200,20 @@ header { margin-right: 48px; } +.container .header_logo img { + width: 136px; + height: auto; + + @media screen and (max-width: 577px) { + width: 94px; + } +} + +.container-fluid .header_logo img { + width: 94px; + height: auto; +} + .header_navigation-menu-right-list { display: flex; align-items: center; @@ -309,15 +323,6 @@ header { text-decoration-line: none; } -.header-logo { - display: flex; - align-items: center; - - a img { - max-width: 100%; - } -} - .header_navigation-menu { height: $header-height; @@ -534,11 +539,6 @@ header { } } } - - .header_logo { - display: flex; - align-items: center; - } } .header_container { @@ -716,10 +716,6 @@ header { padding: 0 24px; } - .header_container .header_logo img { - width: 90px; - } - a.ubs-header-sign-in, a.header_sign-in-link { display: none; @@ -905,10 +901,6 @@ header { width: 80%; } - .header_logo { - max-height: 42px; - } - .admin-container-fluid { align-items: center; } @@ -1001,16 +993,6 @@ header { font-size: 12px; } - .header_container .header_logo { - width: 68px; - height: 36px; - - img { - width: 68px; - height: 36px; - } - } - img.ubs-header-sing-in-img { padding: 8px 17px; width: 54px; @@ -1043,16 +1025,6 @@ header { } } - .header_container .header_logo { - width: 68px; - height: 27px; - - img { - width: 54px; - height: 27px; - } - } - ul#header_user-wrp { li a { margin-right: 0; @@ -1123,11 +1095,6 @@ header { } } - a.header_logo, - a.header_logo img { - max-height: 25px; - } - .header_lang-switcher-wrp, .header_navigation-menu-right-lang, .ubs-lang-switcher { diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 1210f8cfec..1f3d8a849f 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -976,7 +976,7 @@ "elements": { "plural": "items", "singular": "item" }, "my-eco-friends": "My Friends", "friends-quantity": { "plural": "connections", "singular": "connection" }, - "zero-friends": "You don't have any friends.", + "zero-friends": "You don't have any friends yet.", "zero-user-friends": "This user has no friends", "zero-requests": "Unfortunately you don’t have new friends requests' on Friends requests tab as mentioned in requirements.", "my-eco-places": "My Eco Places", diff --git a/src/assets/i18n/ua.json b/src/assets/i18n/ua.json index 2fc4d18e07..63c1a02faa 100644 --- a/src/assets/i18n/ua.json +++ b/src/assets/i18n/ua.json @@ -1000,7 +1000,7 @@ "elements": { "singular": "елемент", "plural": { "units-2-3-4": "елементи", "units-more-5": "елементів" } }, "my-eco-friends": "Мої Друзі", "friends-quantity": { "singular": "зв'язок", "plural": { "units-2-3-4": "звя'зки", "units-more-5": "зв'язків" } }, - "zero-friends": "У Вас немає друзів.", + "zero-friends": "У Вас ще немає друзів.", "zero-requests": "На жаль, нових запитів немає.", "zero-user-friends": "Цей користувач не має друзів", "my-eco-places": "Мої Еко Місця",