0.0.244 upd w_carrier_card.html and mobile_styles.css for this widget

static/css/mobile_styles.css

@@ -99,6 +99,12 @@
 }
 @media (max-width: 1024px){
 
+    .phones_carrier{
+        display: inline-block;
+        margin-right: 20px;
+    }
+
+
    .wrapper_content {
         margin: 20px;
     }
@@ -124,7 +130,7 @@
         margin-right: 26px;
     }
     header .header-first{
-        margin-top: 20px;
+        margin-top: 5px;
     }
 
     header .header-second {
@@ -195,6 +201,40 @@
      .daterangepicker{
          width: 291px;
      }
+
+     .container_inf_about_moving{
+         width: 65%;
+         margin: auto;
+     }
+
+     /*.carrier_inf_moving.left{*/
+     /*       display: inline-block;*/
+     /*       width: unset;*/
+     /*       float: unset;*/
+     /*       text-align: left;*/
+     /*}*/
+     /*.carrier_inf_moving.right{*/
+     /*    display: inline-block;*/
+     /*    width: unset;*/
+     /*    float: unset;*/
+     /*    text-align: right;*/
+     /*}*/
+     /*.arrow_inf_about_moving{*/
+     /*   display: inline-block;*/
+     /*   margin: 0 10px;*/
+     /*   width: 100px;*/
+     /*}*/
+
+
+
+    .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving{
+        width: 100%;
+
+    }
+
+
+
+
      .cont-el-form-search-carrier > button{
          width: 100%;
      }
@@ -531,7 +571,7 @@
     }
     #title_static_customer2{
         font-size: 24px;
-        margin-bottom: unset;
+        margin-bottom: 25px;
     }
 
 
@@ -884,6 +924,7 @@
         width: unset;
         float: none;
         padding: 1px 15px;
+        border-right: unset;
         }
     .inf_carrier_container{
         padding-top: 70px;
@@ -916,8 +957,7 @@
 
     .from-to-country-container-carrier{
         width: unset;
-        padding-left: 10px;
-        padding-right: 10px;
+        padding: 10px;
     }
     .splitter-from-to-country{
         margin-left: 8%;
@@ -934,17 +974,18 @@
 
     .carrier-title,
     .type_transportation_carrier{
-        font-size: 14px;
-        text-align: center;
+        font-size: 12px;
+        margin-top: 20px;
+        display: inline-block;
         width: unset;
         float: unset;
-        margin-top: 20px;
     }
 
     .line_inf_about_moving{
         font-size: 12px;
         font-style: normal;
         font-weight: 600;
+        text-align: center;
     }
     .line_inf_about_moving>.clear_both{
         clear: unset;
@@ -963,8 +1004,7 @@
         padding-top: unset;
     }
     .arrow_inf_about_moving{
-        top: 7px;
-        width: 17%;
+
         left: unset;
 
     }
@@ -975,10 +1015,26 @@
         text-align: center;
     }
     .inf_carrier_icon{
-        width: 3%;
+        width: 20px;
+        display: inline-block;
     }
+
+    .phones_carrier_span, .email_carrier_span{
+        width: unset;
+        float: unset;
+        /*background: linear-gradient(92deg, #000000 1%, #ffffff 93%, #ffffff);*/
+        /*background: linear-gradient(90deg, #000000 1%, #ffffff 81%, #ffffff);*/
+        -webkit-text-fill-color: unset;
+        padding-right: unset;
+        font-size: 14px;
+        top: unset;
+    }
+    .email_carrier{
+        display: inline-block;
+    }
+
     .name_carrier{
-        font-size: 12px;
+        font-size: 14px;
 
     }
 
@@ -1158,13 +1214,39 @@
 
 }
 @media (max-width: 950px){
+
+
 .info_profile{
         width: 65%;
         float: none;
         /*margin-left: 25px;*/
     }
 }
-@media (max-width: 847px){
+@media (max-width: 850px){
+
+    .subscribe_inf_right_part, .subscribe_inf_left_part{
+        width: 100%;
+        float: unset;
+        margin: 10px auto;
+    }
+    .wrapper_switch_cont>.width-100 {
+    display: inline-block;
+}
+
+    .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving>.line_inf_about_moving>.arrow_inf_about_moving{
+        width: 85px;
+    }
+    .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving>.line_inf_about_moving>.carrier_inf_moving.right{
+        width: 33%;
+    }
+    .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving {
+    width: 90%;
+}
+
+    .container_inf_about_moving{
+         width: 78%;
+         margin: auto;
+     }
 
     .info_profile{
         width: 61%;
@@ -1191,12 +1273,8 @@
         margin-top: 6px;
         width: 12%;
     }
-     .carrier_inf_moving.left{
-        width: 46%;
-    }
-    .carrier_inf_moving.right{
-        width: 37%;
-    }
+
+
 
 
 }
@@ -1208,7 +1286,7 @@
     /*    width: 54.1%;*/
     /*}*/
     .inf_carrier_icon{
-        width: 4%;
+        /*width: 4%;*/
     }
 
     .info_profile{
@@ -1222,6 +1300,10 @@
 }
 @media (max-width: 776px){
 
+    .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving>.line_inf_about_moving>.carrier_inf_moving.left{
+        width: 39%;
+    }
+
     .info_profile {
     width: 56%;
     float: none;
@@ -1292,7 +1374,7 @@
         justify-content: space-evenly;
     }
     .inf_carrier_icon{
-        width: 3%;
+        /*width: 3%;*/
     }
 }
 @media (max-width: 687px){
@@ -1303,6 +1385,11 @@
     /*    width: 52.1%;*/
     /*}*/
 
+    .container_inf_about_moving {
+    width: 97%;
+    margin: auto;
+}
+
       .self_news_img{
         width: 45%;
     }
@@ -1333,7 +1420,18 @@
 
 
 }
-@media (max-width: 575px)   {
+@media (max-width: 575px){
+
+.container_inf_about_moving{
+    width: 100%;
+}
+
+    .arrow_inf_about_moving{
+        width: 75px;
+    }
+    .carrier_inf_moving.right{
+        width: 31%;
+    }
 
     .self_news_img{
         width: 100%;
@@ -1423,7 +1521,7 @@
          gap: 20px;
      }
      .inf_carrier_icon{
-        width: 4%;
+        /*width: 4%;*/
     }
 }
 
@@ -1445,6 +1543,33 @@
 
 @media (max-width: 440px){
 
+    .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving>.line_inf_about_moving>.carrier_inf_moving.left {
+    width: 35%;
+}
+
+    .line_inf_about_moving{
+        margin-bottom: 60px;
+        height: 20px;
+    }
+    .arrow_inf_about_moving{
+        width: 60px;
+    }
+
+    .carrier_inf_moving.right {
+    width: 33%;
+}
+
+    .carrier_inf_moving.left{
+        width: 35%;
+    }
+
+    .carrier-title, .type_transportation_carrier{
+        text-align: center;
+        width: unset;
+        float: unset;
+        margin-top: 20px;
+    }
+
     .splitter-from-to-country {
     margin-left: 5%;
     }
@@ -1464,7 +1589,11 @@
         top: -1px;
     }
       .inf_carrier_icon {
-    width: 6%;
+    /*width: 6%;*/
+}
+
+        .info_profile>div>div>.left-part-carrier-card>.container_inf_about_moving>.line_inf_about_moving>.arrow_inf_about_moving {
+    width: 70px;
 }
 
 
@@ -1472,19 +1601,24 @@
 @media (max-width: 360px){
     
     .tab-btn-1{
-        padding: 5px 0 0;
+        padding: unset;
     }
     .tab-btn-2{
-       padding: 0 0 5px;
+       padding: unset;
     }
     .tab-btn-active{
-        padding: 10px;
+        padding: 10px 55px;
     }
 
     .wrapper_tab_button{
-        width: 55%;
+        width: 250px;
         /*margin-top: 20px;*/
     }
+    .tabs>div>#title_static{
+        line-height: 30px;
+    }
+
+
 
 
 

templates/widgets/w_carrier_card.html

@@ -43,10 +43,10 @@
                     <span class="email_carrier_span{% if route.owner == user %} active{% endif %} el_for_open_el">{{ route.owner.email }}</span>
     {#                <input value="{{ route.owner.email }}">#}
                     <div class="clear_both"></div>
-                    <div>{{ route.get_cargo_type_display }}</div>
-                    <div>{{ route.weight }}</div>
-                    <div>{{ route.get_owner_type_display }}</div>
-                    <div>{{ route.id }},{{ forloop.counter }}</div>
+{#                    <div>{{ route.get_cargo_type_display }}</div>#}
+{#                    <div>{{ route.weight }}</div>#}
+{#                    <div>{{ route.get_owner_type_display }}</div>#}
+{#                    <div>{{ route.id }},{{ forloop.counter }}</div>#}
                 </a>
             </div>
             {% if route.owner != user %}