0.0.212 upd for dropdown_menu and change_language

static/css/mobile_styles.css

@@ -1,13 +1,29 @@
 /*media breakpoints*/
-@media (max-width: 360px) {
+
+@media (max-width: 360px){
+        .wrapper_content {
+        max-width: 325px;
+    }
+}
+
+@media (max-width: 1199px){ }
+
+@media (max-width: 991px){ }
+
+@media (max-width: 767px){ }
+
+@media (max-width: 575px){ }
+
+
+@media (max-width: 780px) {
 
     body{
         /*overflow-x: hidden;*/
     }
 
-    .wrapper_content{
+    /*.wrapper_content{*/
-        max-width: 325px;
+    /*    max-width: 325px;*/
-    }
+    /*}*/
 
     header{
         padding: 5px 16px;
@@ -126,7 +142,11 @@
         text-align: center;
     }
     .benefit_img_item{
-        max-width: 100%;
+        width: 100%;
+        margin-bottom: 40px;
+    }
+    .button_container{
+        margin-top: unset;
     }
     .tab-btn-2{
         margin: 0 0 5px 0;
@@ -143,6 +163,11 @@
         flex-direction: column;
     }
 
+    details{
+        width: 100%;
+        margin-right: unset;
+    }
+
     .cards_item_1,
     .cards_item_2,
     .cards_item_3,

static/css/styles.css

@@ -646,6 +646,7 @@ span.btn_profile_name {
 }
 
 /*Language select*/
+
 .dropbtn_lang {
     padding: 7px 0 7px 0;
     cursor: pointer;
@@ -673,15 +674,15 @@ span.btn_profile_name {
     color: transparent;
 }
 
-.dropbtn_lang::after {
+/*.dropbtn_lang::after {*/
-    /*background: rgba(0, 0, 0, 0) url("c_keyboard_arrow_down_48px-16.png") no-repeat scroll center center;*/
+/*    !*background: rgba(0, 0, 0, 0) url("c_keyboard_arrow_down_48px-16.png") no-repeat scroll center center;*!*/
-    content: "";
+/*    content: "";*/
-    height: 16px;
+/*    height: 16px;*/
-    position: absolute;
+/*    position: absolute;*/
-    right: 0;
+/*    right: 0;*/
-    top: 7px;
+/*    top: 7px;*/
-    width: 16px;
+/*    width: 16px;*/
-}
+/*}*/
 
 .dropdown-content-lang a:first-child
 {
@@ -705,13 +706,17 @@ span.btn_profile_name {
     display: block;
 }
 
+.dropdown-content-lang.show{
+    display: block;
+}
+
 /* Change color of dropdown links on hover */
 .dropdown-content-lang a:hover {background-color: #f1f1f1}
 
 /* Show the dropdown menu on hover */
-.dropdown_lang:hover .dropdown-content-lang {
+/*.dropdown_lang:hover .dropdown-content-lang {*/
-    display: block;
+/*    display: block;*/
-}
+/*}*/
 /*END Language select*/
 
 
@@ -1108,7 +1113,6 @@ section.profile {
 
 
 h2.title_new_route{
-    font-family: Inter;
     font-size: 44px;
     font-style: normal;
     font-weight: 700;

static/js/user_profile.js

@@ -718,19 +718,32 @@ function editRoute(id) {
 
 
 function showMenu(el, event) {
-    let menu = document.querySelector('.dropdown-content')
+    let menu = document.querySelector('.dropdown-content');
-        menu.classList.add('show')
 
+    if(menu.classList.contains('show')){
+       menu.classList.remove('show')
+    } else {
+       menu.classList.add('show')
+    }
 }
-function hideMenu(event) {
+function showLang(el) {
-    let menu = document.querySelector('.dropdown-content')
+    let lang = document.querySelector('.dropdown-content-lang');
-   if(event.currentTarget != event.relatedTarget && event.relatedTarget != null){
+     if(lang.classList.contains('show')){
-        menu.classList.remove('show')
+       lang.classList.remove('show')
-        console.log('mouseOUT')
+    } else {
+       lang.classList.add('show')
     }
 
 }
 
+// function hideMenu(event) {
+//     let menu = document.querySelector('.dropdown-content')
+//    if(event.currentTarget !== event.relatedTarget && event.relatedTarget != null){
+//         menu.classList.remove('show')
+//     }
+//
+// }
+
 function checkDate() {
       let dateDeparture = document.getElementById('id_departure_DT');
       let dateArrival = document.getElementById('id_arrival_DT');

templates/blocks/b_header.html

@@ -12,10 +12,10 @@
                   <a href="/"><img class="svg" src="/static/img/svg/LogoMobile.svg"></a>
               </div>
 
-              <div onclick="showMenu(this, event)"  class="dropdown">
+              <div   class="dropdown">
-                  <img class="dropbtn" src="/static/img/svg/Menu.svg">
+                  <img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
                   <div
-                      onmouseleave="hideMenu(event)"
+                      onblur="hideMenu(event)"
                       class="dropdown-content"
                   >
                         <a href="/">Главная</a>
@@ -41,7 +41,7 @@
         </div>
         <div class="header-second">
           <div class="header-second-item-lang">
-              <div class="dropdown_lang">
+              <div onclick="showLang(this)" class="dropdown_lang">
                   <div id="dropbtn_lang" class="dropbtn_lang">RU</div>
                   <div class="dropdown-content-lang">
                     <a id="ru_lang" href="/ru{{ request.path|del_lang_from_path }}">RU</a>

templates/forms/f_login.html

@@ -1,4 +1,4 @@
-<section class="login">
+<section    class="login">
     <h1>Войдите в профиль</h1>
     <form class="login_form" name="login_form" method="post">
     {% csrf_token %}