Merge pull request #32 from frontend-park-mail-ru/adaptivity

frontend-park-mail-ru · Nov 25, 2024 · 176bb0d · 176bb0d
2 parents 3fb57be + 37d082d
commit 176bb0d
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 51 deletions.
diff --git a/components/AdCard/AdCard.hbs b/components/AdCard/AdCard.hbs
@@ -80,7 +80,6 @@
             <p class='housing-card__city'>{{cityName}}</p>
             <p class='housing-card__address'>{{address}}</p>
             <div class='housing-card__view-row'>
-                <a href='{{onMap}}' class='housing-card__href'>Показать на карте</a>
                 <span class='housing-card__view'>
                     <img
                         src='../../public/svg/eye.svg'

diff --git 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;
         }
     }

diff --git a/components/AdPage/AdPage.scss b/components/AdPage/AdPage.scss
@@ -142,15 +142,15 @@ $secondary-card-size: 64px;
         display: none;
     }
 }
-.advert-apps{
+.advert-apps {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     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/Header/Header.scss b/components/Header/Header.scss
@@ -125,17 +125,72 @@
 }
 
 .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;
         align-items: center;
         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
@@ -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 =
+            '<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="_25d45facb5--container--izJBY _25d45facb5--display_block--ERcB0 _25d45facb5--color_current_color--KRvSV _25d45facb5--color_current_color--MqB6f"><path d="M2 5h20v2H2V5Zm0 6h20v2H2v-2Zm20 6H2v2h20v-2Z" fill="currentColor"></path></svg>';
+        burgerWrapper.classList.add('burger-button');
+        burgerWrapper.onclick = () => {
+            menu.classList.toggle('menu-active');
+        };
+
+        this.#menuContainer.appendChild(burgerWrapper);
+
         this.#renderHrefs();
         this.#renderMainText();
         this.#renderSigns();

diff --git a/components/MapPage/MapPage.sass b/components/MapPage/MapPage.sass
@@ -21,4 +21,12 @@
     height: calc(100vh - 110px)
 
 [class*="copyrights-pane"]
-    display: none !important
+    display: none !important
+
+@media screen and (max-width: 900px)
+    .map-page
+        display: block
+    .people-list
+        display: none
+    .ymaps
+        width: 100%
diff --git a/components/ProfileData/ProfileData.sass b/components/ProfileData/ProfileData.sass
@@ -19,7 +19,6 @@
     height: 100%
 
     &__img
-        position: absolute
         width: 100%
         height: 87%
 
@@ -348,3 +347,12 @@
 
 .none 
     display: none
+
+
+@media screen and (max-width: 900px)
+    .profile__data-container
+        width: 80%
+    .edit-form
+        padding: 0
+        &__buttons
+            margin-top: 20px
diff --git 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
@@ -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%);
     }
 }