0.0.37

static/css/styles(boris).css

@@ -30,6 +30,7 @@
     clear: both;
 }
 
+
 /**/
 
 .title-profile-cont{
@@ -695,12 +696,13 @@
     box-shadow: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20);
     margin-bottom: 20px;
     border-radius: 10px;
-    padding: 20px;
+    /*padding: 20px;*/
 }
 
 .left-part-carrier-card{
-    width: 70%;
+    width: calc(70% - 20px);
     float: left;
+    padding: 20px;
 }
 
 .first-line-card-carrier{
@@ -725,8 +727,211 @@
 }
 
 .from-to-country-container-carrier{
-    width: 90%;
+    width: calc(100% - 70px);
     margin: auto;
     background: #F8F8F8;
     box-shadow: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20);
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 35px;
+    padding-right: 35px;
+    margin-bottom: 20px;
+}
+
+.from-to-country-text.left{
+    color: #272424;
+    font-size: 16px;
+    font-weight: 500;
+    width: 46%;
+    /*padding-top: 20px;*/
+    /*padding-bottom: 20px;*/
+    /*padding-left: 80px;*/
+    float: left;
+    text-align: right;
+}
+
+.from-to-country-text.right{
+    color: #272424;
+    font-size: 16px;
+    font-weight: 500;
+    width: 46%;
+    /*padding-top: 20px;*/
+    /*padding-bottom: 20px;*/
+    /*padding-right: 80px;*/
+    float: right;
+    text-align: left;
+}
+
+
+.line_inf_about_moving{
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.container_inf_about_moving.second{
+    margin-bottom: 0;
+}
+
+.splitter-from-to-country{
+    border: 1px solid #FF613A;
+    width: 20px;
+    display: inline-block;
+    /*width: 5%;*/
+    margin-bottom: 4px;
+    margin-left: 6px;
+}
+
+.container_inf_about_moving{
+    display: block;
+    width: 100%;
+}
+
+
+.carrier_inf_moving.left{
+    width: 50%;
+    float: left;
+    text-align: left;
+}
+.carrier_inf_moving.right{
+    width: 50%;
+    float: right;
+    text-align: right;
+}
+
+.splliter-left-right-part-carrier-card{
+    border: 1px solid #E6E6E6;
+    height: 100%;
+    display: inline-block;
+    transform: rotate(180deg) ;
+    position: relative;
+    left: 70%;
+}
+
+.inf_carrier{
+    padding-top: 15px;
+    display: block;
+
+}
+
+.phones_carrier{
+    text-decoration: none;
+    color: #000000;
+    font-size: 16px;
+    padding-bottom: 10px;
+    display: block;
+}
+
+.phones_carrier_span{
+    position: relative;
+    top: 4px;
+    background: linear-gradient(99deg, #040404 2%, #f5f5f5 16%, #ffffff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: 200ms;
+}
+
+.phones_carrier_span.active{
+    background: unset;
+    -webkit-background-clip: unset;
+    -webkit-text-fill-color: unset;
+}
+
+.phones_carrier input{
+    display: none;
+}
+.email_carrier{
+    text-decoration: none;
+    color: #000000;
+    font-size: 16px;
+    padding-bottom: 10px;
+    display: block;
+}
+
+.email_carrier_span{
+    position: relative;
+    top: 6px;
+    background: linear-gradient(99deg, #040404 2%, #f5f5f5 16%, #ffffff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: 200ms;
+}
+
+.email_carrier_span.active{
+    background: unset;
+    -webkit-background-clip: unset;
+    -webkit-text-fill-color: unset;
+}
+
+.email_carrier input{
+    display: none;
+}
+
+.open_inf_carrier{
+    font-size: 16px;
+    font-weight: 500;
+    color: #272424;
+    border: 2px solid #FF613A;
+    padding: 8px 16px;
+    background: #FFFFFF;
+    transition: 200ms;
+    border-radius: 10px;
+    width: 100%;
+}
+
+.open_inf_carrier:hover{
+    background: #FF613A;
+    color: #FFFFFF;
+}
+
+
+.open_chat_carrier{
+    display: none;
+}
+
+.open_chat_carrier.active{
+    display: block;
+    font-size: 16px;
+    font-weight: 500;
+    color: #272424;
+    border: 2px solid #00a420;
+    padding: 8px 16px;
+    background: #FFFFFF;
+    transition: 200ms;
+    border-radius: 10px;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.open_chat_carrier:hover{
+    color: #FFFFFF;
+    background: #00a420;
+}
+
+.inf_carrier_container{
+    width: calc(30% - 61px);
+    float: right;
+    padding: 20px;
+    border-left: 1px solid #E6E6E6;
+}
+
+.title_container_inf_carrier{
+    font-weight: 500;
+    font-size: 20px;
+    color: #272424;
+    padding-bottom: 10px;
+}
+
+.name_carrier{
+    font-size: 16px;
+    color: #272424;
+    font-weight: 400;
+    position: relative;
+    top: 11px;
+    left: 4px;
+}
+
+.from-to-city-text{
+    font-size: 14px;
+    color: #27242499;
+    padding-top: 10px;
 }

static/img/svg/email.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon &#34;Calendar&#34;">
+<path id="Vector" d="M4 7H27M4 7V24C4 24.2652 4.10097 24.5196 4.28069 24.7071C4.46041 24.8946 4.70417 25 4.95833 25H26.0417C26.2958 25 26.5396 24.8946 26.7193 24.7071C26.899 24.5196 27 24.2652 27 24V7M4 7L15.5 18L27 7" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

static/js/user_profile(boris).js

@@ -247,3 +247,23 @@ function sendMessageEnter (e,id_ticket,sender,receiver){
     //
     }
 }
+
+
+function show_inf_carrier (el) {
+    event.preventDefault()
+    let form = el.form
+    let ph_1 = form[0]
+    let ph_2 = form[1]
+    let em_2 = form[2]
+    let btn_open_chat = form[3]
+
+    ph_1.parentElement.children[1].classList.toggle("active");
+    ph_2.parentElement.children[1].classList.toggle("active");
+    em_2.parentElement.children[1].classList.toggle("active");
+    if (el.innerHTML === "Скрыть контакт"){
+        el.innerHTML = "Открыть контакт"
+    } else{
+        el.innerHTML = "Скрыть контакт"
+    }
+    btn_open_chat.classList.toggle("active")
+}

static/js/user_profile.js

@@ -396,8 +396,8 @@ function getRoute(){
         'route_id': id
     }
 
-     $.ajax({
+    $.ajax({
-        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
+        headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
         url: '/ru/routes/edit_route/',
         type: "POST",
         // async: true,
@@ -406,14 +406,14 @@ function getRoute(){
         contentType: false,
         // enctype: 'json',
         data: JSON.stringify(route_obj),
-        success: function(data){
+        success: function (data) {
             console.log('data received')
             // location.href = '/profile'
             document.querySelector(".info_profile").innerHTML = data.html;
 
 
         },
-        error: function (data, exception){
+        error: function (data, exception) {
             console.log(101)
 
         }

templates/small_INCLUDES/carrier_card/inf_about_moving.html

@@ -1,10 +1,31 @@
 {% load static %}
-<div>
+<div class="container_inf_about_moving">
-    <div>
+    <div class="line_inf_about_moving">
+        <div class="carrier_inf_moving left">
+            <div>Отправка:</div>
+            <div class="from-to-city-text">{% if route.arrival_DT %}{{ route.arrival_DT }}{% else %}Неизвестно{% endif %}</div>
 
+        </div>
+        <img>
+        <div class="carrier_inf_moving right">
+            <div>Прибытие:</div>
+            <div class="from-to-city-text">{% if route.departure_DT %}{{ route.departure_DT }}{% else %}Неизвестно{% endif %}</div>
+
+        </div>
+        <div class="clear_both"></div>
     </div>
-    <img>
+    <div class="line_inf_about_moving second">
-    <div>
+        <div class="carrier_inf_moving left">
+            <div>Отправка:</div>
+            <div class="from-to-city-text">{% if route.from_city %}{{ route.from_city }}{% else %}Неизвестно{% endif %} / {% if route.from_airport %}{{ route.from_airport }}{% else %}Неизвестно{% endif %}</div>
 
+        </div>
+        <img>
+        <div class="carrier_inf_moving right">
+            <div>Прибытие:</div>
+            <div class="from-to-city-text">{% if route.to_city %}{{ route.to_city }}{% else %}Неизвестно{% endif %} / {% if to.from_airport %}{{ route.to_airport }}{% else %}Неизвестно{% endif %}</div>
+
+        </div>
+        <div class="clear_both"></div>
     </div>
 </div>

templates/tb_base.html

@@ -8,6 +8,10 @@
 
     <script src='{% static "js/jquery_v3_6_4.js" %}'> </script>
 
+    <script src='{% static "js/user_profile.js" %}'> </script>
+
+    <script src='{% static "js/user_profile(boris).js" %}'> </script>
+
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
 
     <link rel="stylesheet" href="{% static 'css/styles(boris).css' %}">

templates/widgets/w_carrier_card.html

@@ -8,20 +8,50 @@
             <div class="type_transportation_carrier">
                 {{ route.get_type_transport_display }}
             </div>
+            <div class="clear_both"></div>
         </div>
         <div class="from-to-country-container-carrier">
-            <div>
+            <div class="from-to-country-text left fl-left txt-al-right">
-                {{ route.get_from_place_display }}
+                {% if route.from_country %}{{ route.from_country }}{% else %}Неизвестно{% endif %} / {% if route.from_city %}{{ route.from_city }}{% else %}Неизвестно{% endif %}
             </div>
-            <div></div>
+            <div class="splitter-from-to-country"></div>
-            <div>
+            <div class="from-to-country-text right fl-right txt-al-left">
-                {{ route.get_to_place_display }}
+                {% if route.to_country %}{{ route.to_country }}{% else %}Неизвестно{% endif %} / {% if route.to_city %}{{ route.to_city }}{% else %}Неизвестно{% endif %}
             </div>
         </div>
         {% include "small_INCLUDES/carrier_card/inf_about_moving.html" %}
+
     </div>
-    <div>
+{#    <div class="splliter-left-right-part-carrier-card"></div>#}
+    <div class="inf_carrier_container">
+        <div class="title_container_inf_carrier">Контакты отправителия:</div>
+        <div>
+            <img src="{% static "/delete_later/Avatar.png" %}">
+            <span class="name_carrier">Иванов Иван</span>
+        </div>
+        <form>
+            <div class="inf_carrier">
+                <a class="phones_carrier" href="tel:+ 6 (666) 666-66-66">
+                    <img src="{% static "/img/svg/phone.svg" %}"/>
+                    <span class="phones_carrier_span">+ 6 (666) 666-66-66</span>
+                    <input name="phone_1" value="+6 29 123123123">
+                </a>
+                <a class="phones_carrier" href="tel:+ 6 (666) 666-66-66">
+                    <img src="{% static "/img/svg/phone.svg" %}">
+                    <span class="phones_carrier_span">+ 6 (666) 666-66-66</span>
+                    <input name="phone_2" value="+6 29 123123123">
+                </a>
+                <a class="email_carrier" href="mailto:ivanship@gmail.com">
+                    <img src="{% static "/img/svg/email.svg" %}">
+                    <span class="email_carrier_span">ivanship@gmail.com</span>
+                    <input name="email_1" value="+6 29 123123123">
+                </a>
+            </div>
+            <button class="open_chat_carrier" onclick="show_inf_carrier(this)">Открыть чат</button>
+            <button class="open_inf_carrier" onclick="show_inf_carrier(this)">Открыть контакт</button>
+        </form>
 
     </div>
     <div class="clear_both"></div>
+
 </div>