diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html
index 51954d0..5ddaed6 100644
--- a/src/app/components/contacts/contacts.component.html
+++ b/src/app/components/contacts/contacts.component.html
@@ -8,6 +8,9 @@
Add new contact
+
+

+
@for (sortLetter of this.sortFirstLetter(); track sortLetter) {
diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss
index e780bf5..02dbbb5 100644
--- a/src/app/components/contacts/contacts.component.scss
+++ b/src/app/components/contacts/contacts.component.scss
@@ -36,6 +36,10 @@ section {
}
}
+.btn-inside-mobile {
+ display: none;
+}
+
.left-frame {
position: absolute;
top: -64px;
@@ -147,6 +151,13 @@ section {
top: -64px;
left: -64px;
width: calc(100vw - 232px);
+ background-color: var(--bgContent);
+ }
+
+ .contact {
+ &:hover {
+ background-color: var(--light-gray);
+ }
}
}
@@ -158,6 +169,31 @@ section {
width: calc(100vw);
min-height: calc(100vh - 208px);
}
+
+ .btn-inside {
+ display: none;
+ }
+
+ .btn-inside-mobile {
+ display: block;
+ }
+
+ .btn {
+ position: fixed;
+ bottom: 100px;
+ right: 40px;
+ justify-content: space-between;
+ height: 56px;
+ width: 56px;
+ border-radius: 100%;
+ z-index: 1;
+ cursor: pointer;
+ img {
+ padding: 0;
+ width: 32px;
+ height: 32px;
+ }
+ }
}
@media screen and (max-width: 450px) {
@@ -167,10 +203,6 @@ section {
min-height: calc(100vh - 176px);
}
- .btn {
- display: none;
- }
-
.first-letter {
&:first-child {
margin-top: 0;