feat: beautify ads on mobile

frontend-park-mail-ru · Dec 20, 2024 · 75e9f98 · 75e9f98
1 parent 19e6a2b
commit 75e9f98
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 28 deletions.
diff --git a/src/components/AdCard/AdCard.hbs b/src/components/AdCard/AdCard.hbs
@@ -20,7 +20,7 @@
         </div>
     </div>
 
-    <div class='housing-card__kebab'>
+    <div class='housing-card__kebab js-kebab'>
         <svg
             class='housing-card__kebab__icon'
             width='24'

diff --git a/src/components/AdCard/AdCard.scss b/src/components/AdCard/AdCard.scss
@@ -1,12 +1,14 @@
 .housing-card {
-    $housing-card-border-radius: 12px;
+    --housing-card-border-radius: 12px;
+    --housing-card-kebab-size: 40px;
+    --housing-card-kebab-actions-width: 90px;
 
     display: flex;
     flex-direction: column;
     max-width: 343px;
     min-width: 0;
     aspect-ratio: 343/400;
-    border-radius: $housing-card-border-radius;
+    border-radius: var(--housing-card-border-radius);
     border: 1px #a8a5a5 solid;
     overflow: hidden;
     position: relative;
@@ -16,7 +18,8 @@
     transition: box-shadow 0.3s;
 
     &--boosted {
-        padding: 2px;
+        border: unset;
+        padding: 3px;
         background: linear-gradient(
             to left bottom,
             rgb(72, 204, 254),
@@ -43,8 +46,8 @@
         height: 100%;
         min-height: 0;
         overflow: hidden;
-        border-radius: $housing-card-border-radius $housing-card-border-radius 0
-            0;
+        border-radius: var(--housing-card-border-radius)
+            var(--housing-card-border-radius) 0 0;
     }
 
     &__main-img {
@@ -85,19 +88,18 @@
         flex-direction: column;
         justify-content: space-between;
         padding: 10px 13px;
-        border-radius: 0 0 $housing-card-border-radius
-            $housing-card-border-radius;
+        border-radius: 0 0 var(--housing-card-border-radius)
+            var(--housing-card-border-radius);
     }
 
     &__apartment-info {
+        width: 100%;
         color: #152242;
         font-size: 20px;
         font-weight: 600;
-        width: max-content;
     }
 
     &__address {
-        font-size: 16px;
         margin: 0;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -129,8 +131,8 @@
         position: absolute;
         top: 10px;
         right: 10px;
-        width: 40px;
-        height: 40px;
+        width: var(--housing-card-kebab-size);
+        height: var(--housing-card-kebab-size);
 
         border-radius: 50%;
         background-color: #00000079;
@@ -154,7 +156,7 @@
 
             visibility: hidden;
             width: 0;
-            height: 40px;
+            height: var(--housing-card-kebab-size);
             border-radius: 20px;
             background: #a7a7a7;
             position: absolute;
@@ -171,7 +173,7 @@
             }
 
             .housing-card__kebab__actions {
-                width: 90px;
+                width: var(--housing-card-kebab-actions-width);
                 visibility: visible;
             }
         }
@@ -183,8 +185,8 @@
         background-color: #00000066;
         color: #fff;
         border: none;
-        width: 40px;
-        height: 40px;
+        width: var(--housing-card-kebab-size);
+        height: var(--housing-card-kebab-size);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -207,8 +209,8 @@
         background-color: #00000066;
         color: #fff;
         border: none;
-        width: 40px;
-        height: 40px;
+        width: var(--housing-card-kebab-size);
+        height: var(--housing-card-kebab-size);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -230,11 +232,6 @@
         max-height: 16px;
     }
 
-    &__href {
-        color: #808080;
-        font-size: 14px;
-    }
-
     &__circle {
         border-radius: 50%;
         width: 7px;
@@ -253,15 +250,48 @@
 
 @media screen and (max-width: 900px) {
     .housing-card {
-        &__city {
-            font-size: 15px;
+        width: 100%;
+        aspect-ratio: auto;
+        height: 190px;
+        border: none;
+        --housing-card-border-radius: 4px;
+        --housing-card-kebab-size: 30px;
+        --housing-card-kebab-actions-width: 65px;
+
+        &__kebab {
+            width: 30px;
+            height: 30px;
         }
+
         &__address {
+            font-size: 12px;
+
+            -webkit-line-clamp: 1;
+            line-clamp: 1;
+        }
+
+        &__info {
+            height: 50px;
+            min-height: 0;
+            padding: 5px 3px;
+            justify-content: flex-start;
+        }
+
+        &__apartment-info {
             width: 100%;
             font-size: 13px;
+            font-weight: 600;
+
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            line-clamp: 1;
+
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
-        &__href {
+        &__author-info {
             display: none;
         }
 

diff --git a/src/pages/MainPage/MainPage.scss b/src/pages/MainPage/MainPage.scss
@@ -18,8 +18,9 @@
 
 @media screen and (max-width: 900px) {
     .main-page__adverts {
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        width: 90%;
+        grid-template-columns: 1fr 1fr;
+        width: 95%;
+        max-width: 700px;
         margin: 0 auto;
     }
 }