diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html index 39de1c2..4f3b0f2 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.html +++ b/src/app/components/contacts/contact-detail/contact-detail.component.html @@ -1,8 +1,37 @@
-
+
Contacts
Better with a team
-

{{ userService.displayUserName(paramsId) }}

+
+
+
+
+ {{ userService.displayUserDetails(paramsId, "initials") }} +
+
+
+
+ {{ userService.displayUserDetails(paramsId, "firstName") }} + {{ userService.displayUserDetails(paramsId, "lastName") }} +
+
+
+ +

edit

+
+
+ +

delete

+
+
+
+
+
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss index f844f97..375f466 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.scss +++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss @@ -2,13 +2,13 @@ section { position: absolute; top: -64px; left: 339px; - width: calc(100vw - 635px); + width: calc(100vw - 747px); min-height: calc(100vh - 128px); padding: 64px 48px 48px 48px; box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1); } -.header { +.headerline { display: flex; align-items: center; position: relative; @@ -29,3 +29,106 @@ section { background-color: var(--light-blue); } } + +.header { + display: flex; + align-items: center; + margin-top: 48px; + max-width: 100%; +} + +.circle { + display: flex; + justify-content: center; + align-items: center; + width: 120px; + min-width: 120px; + height: 120px; + border-radius: 100%; + border: 4px solid var(--white); + .initials { + font-size: 47px; + font-weight: 500; + color: var(--white); + text-shadow: 1px 1px 2px var(--black); + } +} + +.details { + margin-left: 32px; + overflow: hidden; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; +} + +.name { + display: flex; + align-items: center; + font-size: 47px; + font-weight: 500; +} + +.btns { + display: flex; + align-items: center; + padding-top: 12px; + img { + width: 20px; + height: 20px; + padding-right: 12px; + } + p { + font-size: 16px; + font-weight: 400; + padding-right: 24px; + } + .btn { + display: flex; + align-items: center; + cursor: pointer; + &:hover { + filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg); + } + } +} + +@media screen and (max-width: 1300px) { + .headerline { + .title { + font-size: 50px; + } + .metrics-txt { + font-size: 24px; + } + } +} + +@media screen and (max-width: 1235px) { + .headerline { + flex-direction: column; + align-items: flex-start; + padding-left: 0; + height: 100%; + .metrics-txt { + padding-left: 0; + } + .blue-bar { + position: absolute; + bottom: -15px; + height: 3px; + width: 100px; + } + } + + .name { + display: block; + font-size: 32px; + } +} + +@media screen and (max-width: 1150px) { + section { + display: none; + } +} diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts index db09ea9..0f464b8 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/src/app/components/contacts/contact-detail/contact-detail.component.ts @@ -1,12 +1,12 @@ import { Component, Input } from '@angular/core'; -import { ContactsComponent } from '../contacts.component'; import { ActivatedRoute } from '@angular/router'; import { UserService } from '../../../services/user.service'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-contact-detail', standalone: true, - imports: [], + imports: [CommonModule], templateUrl: './contact-detail.component.html', styleUrl: './contact-detail.component.scss', }) diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html index 1464f31..6c7f3fb 100644 --- a/src/app/components/contacts/contacts.component.html +++ b/src/app/components/contacts/contacts.component.html @@ -36,19 +36,33 @@
-

- {{ - userService.displayUserName(usersByFirstLetter[sortLetter][index]) - }} -

- +
+
+ {{ + userService.displayUserDetails( + usersByFirstLetter[sortLetter][index], + "firstName" + ) + }} +
+ ,  +
+ {{ + userService.displayUserDetails( + usersByFirstLetter[sortLetter][index], + "lastName" + ) + }} +
+
+
} } diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss index aaedb97..40df29f 100644 --- a/src/app/components/contacts/contacts.component.scss +++ b/src/app/components/contacts/contacts.component.scss @@ -52,7 +52,7 @@ section { .first-letter { font-size: 20px; font-weight: 400; - padding-left: 38px; + padding-left: 32px; margin: 32px 0 12px 0; } @@ -66,7 +66,7 @@ section { .contact { display: flex; align-items: center; - padding: 15px 24px; + padding: 16px; border-radius: 10px; cursor: pointer; &:hover { @@ -79,26 +79,51 @@ section { justify-content: center; align-items: center; width: 42px; + min-width: 42px; height: 42px; border-radius: 100%; + border: 2px solid var(--white); .initials { + font-size: 12px; + font-weight: 400; color: var(--white); text-shadow: 1px 1px 2px var(--black); } } .details { - margin-left: 32px; - p { + margin-left: 24px; + overflow-x: auto; + width: 100%; +} + +.name { + display: flex; + align-items: center; + .first-name, + .last-name, + span { font-size: 20px; font-weight: 400; margin-bottom: 6px; } - span { - font-size: 16px; - font-weight: 400; - text-decoration: none; - color: var(--light-blue); +} + +.email { + font-size: 16px; + font-weight: 400; + text-decoration: none; + color: var(--light-blue); +} + +@media screen and (max-width: 1150px) { + .left-frame { + position: fixed; + top: 96px; + left: 232px; + width: calc(100vw - 232px); + min-height: calc(100vh - 207px); + background-color: var(--bgContent); } } diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts index ecfebc9..b6bd286 100644 --- a/src/app/components/contacts/contacts.component.ts +++ b/src/app/components/contacts/contacts.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; import { UserService } from '../../services/user.service'; import { User } from '../../interfaces/user.interface'; import { CommonModule } from '@angular/common'; diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts index 72a61b5..4d26abf 100644 --- a/src/app/services/user.service.ts +++ b/src/app/services/user.service.ts @@ -42,13 +42,6 @@ export class UserService { }); } - displayUserName(id: string) { - if (this.userMap[id]) { - return this.userMap[id].firstName + ', ' + this.userMap[id].lastName; - } - return 'sd'; - } - displayUserDetails(id: string, query: keyof User) { if (this.userMap[id]) { const user = this.userMap[id]; diff --git a/src/assets/img/contact/delete.svg b/src/assets/img/contact/delete.svg new file mode 100644 index 0000000..3539b08 --- /dev/null +++ b/src/assets/img/contact/delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/contact/edit.svg b/src/assets/img/contact/edit.svg new file mode 100644 index 0000000..f049918 --- /dev/null +++ b/src/assets/img/contact/edit.svg @@ -0,0 +1,3 @@ + + +