Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update design

Browse source
This commit is contained in:
Chneemann 2024-03-30 20:01:28 +01:00
parent 3889bf0bda
commit 66749aebb6
5 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/contacts/contact-detail/contact-detail.component.html
View file

@ -28,7 +28,7 @@
{{ userService.getUserDetails(currentUserId, "initials") }} {{ userService.getUserDetails(currentUserId, "initials") }}
</div> </div>
</div> </div>
<div class="details"> <div class="word-wrap">
<div class="name"> <div class="name">
{{ userService.getUserDetails(currentUserId, "firstName") }} {{ userService.getUserDetails(currentUserId, "firstName") }}
{{ userService.getUserDetails(currentUserId, "lastName") }} {{ userService.getUserDetails(currentUserId, "lastName") }}
@ -45,7 +45,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="contact"> <div class="contact word-wrap">
<div class="headline">Contact Information</div> <div class="headline">Contact Information</div>
<div class="info"> <div class="info">
<p>Email:</p> <p>Email:</p>

25
src/app/components/contacts/contact-detail/contact-detail.component.scss
View file

@ -70,8 +70,7 @@ section {
} }
} }
.details { .word-wrap {
margin-left: 32px;
overflow: hidden; overflow: hidden;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -82,13 +81,14 @@ section {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 47px; font-size: 47px;
font-weight: 500; font-weight: 600;
padding-left: 32px;
} }
.btns { .btns {
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: 12px; padding: 12px 0 0 32px;
img { img {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -228,6 +228,23 @@ section {
width: calc(100vw - 36px); width: calc(100vw - 36px);
} }
.name {
font-size: 36px;
font-weight: 600;
padding-left: 18px;
}
.circle {
width: 80px;
min-width: 80px;
height: 80px;
border: 2px solid var(--white);
.initials {
font-size: 27px;
font-weight: 400;
}
}
.headerline { .headerline {
.title { .title {
font-size: 47px; font-size: 47px;

8
src/app/components/contacts/contacts.component.scss
View file

@ -157,4 +157,12 @@ section {
margin-top: 0; margin-top: 0;
} }
} }
.contact {
padding: 16px 0;
}
.first-letter {
padding-left: 16px;
}
} }

1
src/app/components/contacts/contacts.component.ts
View file

@ -41,7 +41,6 @@ export class ContactsComponent {
} else { } else {
this.showAllUsers = true; this.showAllUsers = true;
} }
console.log(this.showAllUsers);
} }
loadAllUserWithoutGuest(): User[] { loadAllUserWithoutGuest(): User[] {

3
src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
View file

@ -40,7 +40,7 @@ nav {
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.nav-links { .nav-links {
width: 70px; width: 80px;
height: 60px; height: 60px;
img { img {
width: 20px; width: 20px;
@ -51,6 +51,7 @@ nav {
@media screen and (max-width: 380px) { @media screen and (max-width: 380px) {
.nav-links { .nav-links {
width: 70px;
p { p {
font-size: 12px; font-size: 12px;
} }