From 7a32cdf3e1e3c1a6eba44a87d3f1ecf38efdd240 Mon Sep 17 00:00:00 2001
From: rasulov1337 <117843890+rasulov1337@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:28:10 +0300
Subject: [PATCH 1/5] fix: add more adaptivity
---
components/AdPage/AdPage.scss | 26 +++++-----
components/MapPage/MapPage.sass | 10 +++-
components/ProfileData/ProfileData.sass | 9 ++++
components/ProfileInfo/ProfileInfo.scss | 61 ++++++++++++-----------
components/ProfilePopup/ProfilePopup.scss | 6 +--
5 files changed, 67 insertions(+), 45 deletions(-)
diff --git a/components/AdPage/AdPage.scss b/components/AdPage/AdPage.scss
index f4f39c6a..afef0ad9 100644
--- a/components/AdPage/AdPage.scss
+++ b/components/AdPage/AdPage.scss
@@ -142,7 +142,7 @@ $secondary-card-size: 64px;
display: none;
}
}
-.advert-apps{
+.advert-apps {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -150,7 +150,7 @@ $secondary-card-size: 64px;
margin-top: 20px;
max-width: 500px;
- &__element{
+ &__element {
width: min-content;
display: flex;
flex-direction: row;
@@ -162,11 +162,11 @@ $secondary-card-size: 64px;
flex-direction: column;
justify-content: space-around;
- &__p1{
+ &__p1 {
color: #808080;
font-size: 14px;
}
- &__p2{
+ &__p2 {
color: #000;
font-weight: bold;
}
@@ -296,6 +296,7 @@ $secondary-card-size: 64px;
&-profile-container {
margin-top: 10px;
+ max-width: none;
}
&__edit-form {
@@ -305,18 +306,17 @@ $secondary-card-size: 64px;
&__btn {
width: 100%;
}
- }
- .advert-images-carousel {
- &__main-img-div {
- height: fit-content;
- }
- &__main-img {
- position: static;
+ &__gallery__carousel {
+ &__img-container {
+ height: 300px;
+ }
}
}
- .advert-apps{
+
+ .advert-apps {
display: flex;
- flex-direction: column;
+ flex-direction: row;
+ flex-wrap: wrap;
align-items: start;
}
}
diff --git a/components/MapPage/MapPage.sass b/components/MapPage/MapPage.sass
index 24a47aa9..61191ea5 100644
--- a/components/MapPage/MapPage.sass
+++ b/components/MapPage/MapPage.sass
@@ -21,4 +21,12 @@
height: calc(100vh - 110px)
[class*="copyrights-pane"]
- display: none !important
\ No newline at end of file
+ display: none !important
+
+@media screen and (max-width: 900px)
+ .map-page
+ display: block
+ .people-list
+ display: none
+ .ymaps
+ width: 100%
\ No newline at end of file
diff --git a/components/ProfileData/ProfileData.sass b/components/ProfileData/ProfileData.sass
index 17a458c2..92555ee1 100644
--- a/components/ProfileData/ProfileData.sass
+++ b/components/ProfileData/ProfileData.sass
@@ -348,3 +348,12 @@
.none
display: none
+
+
+@media screen and (max-width: 900px)
+ .profile__data-container
+ width: 80%
+ .edit-form
+ padding: 0
+ &__buttons
+ margin-top: 20px
\ No newline at end of file
diff --git a/components/ProfileInfo/ProfileInfo.scss b/components/ProfileInfo/ProfileInfo.scss
index bd625901..e9fc341c 100644
--- a/components/ProfileInfo/ProfileInfo.scss
+++ b/components/ProfileInfo/ProfileInfo.scss
@@ -128,34 +128,42 @@
.js-graphic-href {
position: relative;
-
+
&:hover {
- &::after {
- content: "Следить за изменением рейтинга";
- font-size: 14px;
- font-style: normal;
- position: absolute;
- bottom: calc(100% + 5px);
- left: 50%;
- transform: translateX(-50%);
- background-color: rgba(0, 0, 0, 0.5);
- color: white;
- padding: 5px 10px;
- border-radius: 5px;
- white-space: nowrap;
- z-index: 10;
- opacity: 1;
- visibility: visible;
- transition: opacity 0.2s ease-in-out;
- }
+ &::after {
+ content: 'Следить за изменением рейтинга';
+ font-size: 14px;
+ font-style: normal;
+ position: absolute;
+ bottom: calc(100% + 5px);
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ padding: 5px 10px;
+ border-radius: 5px;
+ white-space: nowrap;
+ z-index: 10;
+ opacity: 1;
+ visibility: visible;
+ transition: opacity 0.2s ease-in-out;
+ }
}
&::after {
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.2s ease-in-out,
+ visibility 0.2s ease-in-out;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .mobile-hidden {
+ display: none;
}
- }
+}
@media screen and (max-width: 900px) {
#profile-content {
@@ -165,17 +173,12 @@
align-items: center;
}
- .mobile-hidden {
- display: none;
- }
-
.profile {
&__profile-container {
width: 80%;
}
&__data-container {
- width: 90%;
height: min-content;
}
}
@@ -208,6 +211,7 @@
.edit-form__input-line {
flex-direction: column;
+ align-items: flex-start;
}
}
@@ -221,6 +225,7 @@
.profile-container {
margin: 0;
+ min-height: fit-content;
box-sizing: border-box;
max-width: none;
}
diff --git a/components/ProfilePopup/ProfilePopup.scss b/components/ProfilePopup/ProfilePopup.scss
index b0e16d4f..c5d4ab6a 100644
--- a/components/ProfilePopup/ProfilePopup.scss
+++ b/components/ProfilePopup/ProfilePopup.scss
@@ -12,7 +12,7 @@
.profile-list {
position: relative;
- top: 120px;
+ top: 70px;
left: 88%;
min-width: min-content;
max-width: 120px;
@@ -39,7 +39,7 @@
@media screen and (max-width: 900px) {
.profile-list {
- left: 80%;
- transform: translateX(-50%);
+ left: 100%;
+ transform: translateX(-100%);
}
}
From b5a564ab6001a6c6d7134b83a9ce881791a3b032 Mon Sep 17 00:00:00 2001
From: rasulov1337 <117843890+rasulov1337@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:51:49 +0300
Subject: [PATCH 2/5] faet: add menu for mobiles
---
components/Header/Header.scss | 55 +++++++++++++++++++++++++++++++++++
components/Header/Header.ts | 24 +++++++++++++++
2 files changed, 79 insertions(+)
diff --git a/components/Header/Header.scss b/components/Header/Header.scss
index 792e9562..200d1f6b 100644
--- a/components/Header/Header.scss
+++ b/components/Header/Header.scss
@@ -125,10 +125,58 @@
}
.hide {
+ display: none !important;
+}
+
+.menu {
+ display: none;
+}
+
+.burger-button {
display: none;
}
+@keyframes menu-pull-down {
+ from {
+ height: 0;
+ }
+
+ to {
+ height: fit-content;
+ }
+}
+
@media screen and (max-width: 900px) {
+ .menu {
+ position: absolute;
+ top: 70px;
+ width: 100%;
+ background-color: #ffffffd8;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 20px;
+ max-height: 0;
+ transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+
+ overflow: hidden;
+
+ &-active {
+ max-height: 500px;
+ }
+
+ &__element {
+ color: #333333;
+ margin-left: 30px;
+ width: 100%;
+ text-decoration: none;
+ font-size: 60px;
+ }
+ }
+
.header {
height: 70px;
display: flex;
@@ -136,6 +184,13 @@
justify-content: center;
}
+ .burger-button {
+ display: inline;
+ margin-left: 30px;
+ border: none;
+ background: none;
+ }
+
.header__img2 {
width: 170px;
height: auto;
diff --git a/components/Header/Header.ts b/components/Header/Header.ts
index 126bc420..9e8c947e 100644
--- a/components/Header/Header.ts
+++ b/components/Header/Header.ts
@@ -187,6 +187,30 @@ class Header {
}
async #render() {
+ // TODO: REWRITE TO HBS. IT IS TOO HARD TO MAINTAIN JS ONLY COMPONENT LIKE THIS
+
+ const menu = document.createElement('ul');
+ menu.classList.add('menu');
+ for (const menuSection in this.#config.menu) {
+ const data = this.#config.menu[menuSection];
+ const elem = document.createElement('a');
+ elem.classList.add('menu__element');
+ elem.textContent = data['text'];
+ elem.href = data['href'];
+ menu.appendChild(elem);
+ }
+ this.#menuContainer.appendChild(menu);
+
+ const burgerWrapper = document.createElement('button');
+ burgerWrapper.innerHTML =
+ '';
+ burgerWrapper.classList.add('burger-button');
+ burgerWrapper.onclick = () => {
+ menu.classList.toggle('menu-active');
+ };
+
+ this.#menuContainer.appendChild(burgerWrapper);
+
this.#renderHrefs();
this.#renderMainText();
this.#renderSigns();
From 2adb683660c1f70e262daa823166e739f7ce40bc Mon Sep 17 00:00:00 2001
From: rasulov1337 <117843890+rasulov1337@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:12:52 +0300
Subject: [PATCH 3/5] fix: fix data being not shown
---
components/ProfileData/ProfileData.sass | 1 -
1 file changed, 1 deletion(-)
diff --git a/components/ProfileData/ProfileData.sass b/components/ProfileData/ProfileData.sass
index 92555ee1..c51f10e7 100644
--- a/components/ProfileData/ProfileData.sass
+++ b/components/ProfileData/ProfileData.sass
@@ -19,7 +19,6 @@
height: 100%
&__img
- position: absolute
width: 100%
height: 87%
From f51f869b05863bca32824a52bc38d00a08304880 Mon Sep 17 00:00:00 2001
From: rasulov1337 <117843890+rasulov1337@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:29:20 +0300
Subject: [PATCH 4/5] fix: delete show on map button
---
components/AdCard/AdCard.hbs | 1 -
1 file changed, 1 deletion(-)
diff --git a/components/AdCard/AdCard.hbs b/components/AdCard/AdCard.hbs
index ebe164b4..1233ea0f 100644
--- a/components/AdCard/AdCard.hbs
+++ b/components/AdCard/AdCard.hbs
@@ -80,7 +80,6 @@
{{cityName}}
{{address}}
-
Показать на карте
Date: Mon, 25 Nov 2024 15:29:32 +0300
Subject: [PATCH 5/5] fix: show maximum 2 lines of address
---
components/AdCard/AdCard.scss | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)
diff --git a/components/AdCard/AdCard.scss b/components/AdCard/AdCard.scss
index e3620c6d..4017b8f1 100644
--- a/components/AdCard/AdCard.scss
+++ b/components/AdCard/AdCard.scss
@@ -56,7 +56,8 @@
min-height: 40px;
height: 110px;
display: flex;
- justify-content: space-evenly;
+ justify-content: space-between;
+ padding: 0 13px;
}
&__like-button {
@@ -94,6 +95,14 @@
&__address {
font-size: 16px;
margin: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* Ограничение на 2 строки */
+ line-clamp: 2;
+ -webkit-box-orient: vertical; /* Указание направления текста */
+ overflow: hidden; /* Скрытие лишнего текста */
}
&__author-info {
@@ -117,7 +126,7 @@
font-size: 14px;
}
- &__view-row{
+ &__view-row {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -127,13 +136,13 @@
width: 170px;
}
- &__view{
+ &__view {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 30px;
- &__p{
+ &__p {
color: #808080;
}
}