0.0.131 search routes

static/v2/css/blocks/b_filter_routes.css

@@ -5,6 +5,7 @@
     background: #FFFFFF;
 
     border-radius: 10px;
+    height: fit-content;
     .title{
         font-size: var(--form-title-font-size);
         font-weight: 700;

static/v2/css/pages/p_search_route_results.css

@@ -10,5 +10,6 @@
 .routes_content_part{
     margin-top: 50px;
     display: grid;
-    grid-template-columns: 30% calc(100% - 30%);
+    grid-template-columns: 30% calc(100% - 30% - 41px);
+    gap: 41px;
 }

static/v2/css/widgets/w_route_card.css

@@ -392,7 +392,7 @@
             justify-content: center;
             text-align: unset;
         }
-        &:not(&.inactive){
+        &:not(&.inactive) and &:not(&.unhovered){
             &:hover{
                 background: var(--route-btn-hover-bg);
                 .route_btn_title{color: var(--route-btn-hover-text-color);}
@@ -455,4 +455,20 @@
         font-size: var(--route-number-font-size);
         margin-top: var(--route-number-margin-top);
     }
+    .respond_route_cont{
+        display: grid;
+        grid-template-columns: calc(100% - 47px) 37px;
+        gap: 10px;
+    }
+    .chat_btn{
+        padding: 6.5px;
+        background: #FF613A;
+        border-radius: 10px;
+        img{
+            display: block;
+            height: 24px;
+            width: 24px;
+            filter: invert(1);
+        }
+    }
 }

static/v2/js/blocks/b_search_routes.js

@@ -9,7 +9,10 @@ function searchRoutes (form) {
         data: formData,
         data_type: 'formData',
         success: function (res) {
+            if (!res.html) return;
+            let $parent = $('.routes_search_results')[0]
 
+            $parent.innerHTML = res.html;
         }
     })
 

static/v2/js/twb.js

@@ -0,0 +1,3 @@
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

static/v2/js/widgets/w_route_card.js

@@ -114,4 +114,15 @@ function highlightRoute(el) {
     });
 
     request.ajaxRequest()
+}
+
+function respondBtnClickEvent(el) {
+    if (!el) return;
+    let $parent = el.closest(".route_card_owner_info")
+    let $responde_cont = $parent.querySelector(".respond_route_cont")
+
+    $(el).fadeOut(500);
+    sleep(500).then(() => {
+        $($responde_cont).fadeIn(500);
+    })
 }