fix: boosted border

frontend-park-mail-ru · Dec 19, 2024 · 5b6b86c · 5b6b86c
1 parent f90e270
commit 5b6b86c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/src/components/AdCard/AdCard.hbs b/src/components/AdCard/AdCard.hbs
@@ -1,4 +1,4 @@
-<div class='housing-card' id='{{elementId}}'>
+<div class='housing-card {{#if (gte priority 50)}}boosted{{/if}}' id='{{elementId}}'>
     <!-- ID is used for js not styles -->
     <div class='housing-card__main-img-container js-image-container'>
         <img
@@ -16,7 +16,7 @@
             {{#each images}}
                 <div class='housing-card__circle'></div>
             {{/each}}
-            <!--        <div class="circle-empty"></div>-->
+            <!--<div class="circle-empty"></div>-->
         </div>
     </div>
 
@@ -94,7 +94,7 @@
     </div>
 
     <div class='housing-card__info'>
-        <p class='housing-card__apartment-info {{#if (gte priority 50)}}boosted{{/if}}'>
+        <p class='housing-card__apartment-info'>
             {{roomsNumber}}-комн. кв. · {{squareMeters}}&nbsp;м² · {{floor}} этаж
         </p>
         <p class='housing-card__address'>{{address}}, {{cityName}}</p>

diff --git a/src/components/AdCard/AdCard.scss b/src/components/AdCard/AdCard.scss
@@ -9,7 +9,6 @@
     overflow: hidden;
     position: relative;
     cursor: pointer;
-
     transition: box-shadow 0.3s;
 
     &:hover {
@@ -227,25 +226,31 @@
 }
 
 .boosted {
-    background-color: yellow;
     position: relative;
+    border-radius: 12px;
+    padding: 5px;
+    background: linear-gradient(90deg, #ff9966, #f59218, #ff9966, #f59218);
+    background-size: 200% 200%;
+    animation: border-spin 3s linear infinite;
+    box-sizing: border-box;
+}
+
+.boosted > * {
+    background: white;
+    border-radius: 12px;
+    overflow: hidden;
+}
 
-    // &:hover::after {
-    //     content: 'Рекомендуем!';
-    //     position: absolute;
-    //     top: -30px;
-    //     left: 50%;
-    //     transform: translateX(-50%);
-    //     background-color: green;
-    //     color: white;
-    //     padding: 5px 10px;
-    //     border-radius: 4px;
-    //     white-space: nowrap;
-    //     font-size: 12px;
-    //     z-index: 10;
-    // }
+@keyframes border-spin {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 200% 50%;
+    }
 }
 
+
 @media screen and (max-width: 900px) {
     .housing-card {
         &__city {