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

remove scrollbar & added text-overflow

Browse source
This commit is contained in:
Chneemann 2024-03-31 10:05:23 +02:00
parent 573fea0708
commit e81aca3ff8
2 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/components/contacts/contacts.component.html
View file

@ -15,7 +15,13 @@
<div class="line"></div> <div class="line"></div>
@for (user of this.sortUsersByFirstLetter(sortLetter); track user; let @for (user of this.sortUsersByFirstLetter(sortLetter); track user; let
index = $index) { index = $index) {
<div class="contact" routerLink="/contacts/{{ user.id }}"> <div
class="contact"
routerLink="/contacts/{{ user.id }}"
[ngClass]="{
'contact-active': currentUserId === user.id
}"
>
<div <div
class="circle" class="circle"
[ngStyle]="{ [ngStyle]="{
@ -28,13 +34,13 @@
</div> </div>
<div class="details"> <div class="details">
<div class="name"> <div class="name">
<div class="first-name"> <p>
{{ userService.getUserDetails(user.id, "firstName") }} {{ userService.getUserDetails(user.id, "firstName") }}
</div> </p>
<span>,&nbsp;</span> <span>,&nbsp;</span>
<div class="last-name"> <p class="last-name">
{{ userService.getUserDetails(user.id, "lastName") }} {{ userService.getUserDetails(user.id, "lastName") }}
</div> </p>
</div> </div>
<div class="email"> <div class="email">
{{ userService.getUserDetails(user.id, "email") }} {{ userService.getUserDetails(user.id, "email") }}

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

@ -80,6 +80,15 @@ section {
} }
} }
.contact-active {
color: var(--white);
background-color: var(--dark-blue);
cursor: unset;
&:hover {
background-color: var(--dark-blue);
}
}
.circle { .circle {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -99,20 +108,26 @@ section {
.details { .details {
margin-left: 24px; margin-left: 24px;
overflow-x: auto;
width: 100%; width: 100%;
overflow: hidden;
white-space: nowrap;
display: inline-block;
} }
.name { .name {
display: flex; display: flex;
align-items: center; align-items: center;
.first-name, max-width: 100%; /* Adjust this width as necessary */
.last-name, overflow: hidden;
span { white-space: nowrap;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
margin-bottom: 6px; margin-bottom: 6px;
} }
.last-name {
overflow: hidden;
text-overflow: ellipsis;
} }
.email { .email {
@ -120,8 +135,10 @@ section {
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
color: var(--light-blue); color: var(--light-blue);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/*------------- RESPONSIVE -------------*/ /*------------- RESPONSIVE -------------*/
@media screen and (max-width: 1150px) { @media screen and (max-width: 1150px) {