0.0.173 upd style.css for header, add switcher for languages

static/css/styles.css

@@ -215,7 +215,7 @@ body {
 header {
     width: 1280px;
     margin: 0 50px;
-    padding: 40px 40px 40px 40px;
+    padding: 20px 40px 20px 40px;
     position: fixed;
     z-index: 1;
 }
@@ -593,6 +593,76 @@ span.btn_profile_name {
     margin-right: 30px;
 }
 
+/*Language select*/
+.dropbtn_lang {
+    padding: 7px 0 7px 0;
+    cursor: pointer;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown_lang {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content-lang {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+
+}
+
+.dropbtn_lang
+{
+  background: url('/static/img/png/ru.png') no-repeat left center;
+  padding-left: 25px;
+  width: 40px;
+    color: transparent;
+}
+
+.dropbtn_lang::after {
+    /*background: rgba(0, 0, 0, 0) url("c_keyboard_arrow_down_48px-16.png") no-repeat scroll center center;*/
+    content: "";
+    height: 16px;
+    position: absolute;
+    right: 0;
+    top: 7px;
+    width: 16px;
+}
+
+.dropdown-content-lang a:first-child
+{
+  background: url('/static/img/png/ru.png') no-repeat left center;
+    color: transparent;
+    padding: 10px;
+}
+
+.dropdown-content-lang a:last-child
+{
+  background: url('/static/img/png/en.png') no-repeat left center;
+    color: transparent;
+    padding: 10px;
+}
+
+/* Links inside the dropdown */
+.dropdown-content-lang a {
+    color: black;
+    padding: 2px 0 2px 25px;
+    text-decoration: none;
+    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 {
+    display: block;
+}
+/*END Language select*/
+
+
 .header-second>div>img{
     margin-right: 5px;
 }
@@ -1763,8 +1833,8 @@ button#more_button{
     position: relative;
     width: 90%;
     height: 194px;
-    margin: 0 auto 80px;;
-    padding: 145px 40px;
+    margin: 0 auto 0;
+    padding: 145px 40px 0 40px;
 }
 
 .top_block_static_wrapper{
@@ -1774,10 +1844,10 @@ button#more_button{
           url(/static/img/png/Box3.png),
           url(/static/img/png/Box4.png);
   background-position:
-          bottom 115px left 200px,
-          top 145px left 80px,
-          bottom 100px right 180px,
-          top 145px  right 50px;
+          bottom 83px left 110px,
+          top 230px left 218px,
+          bottom 34px right 58px,
+          top 209px  right 210px;
   background-repeat:
           no-repeat,
           no-repeat,

static/js/global_js.js

@@ -121,6 +121,51 @@ function socket_close(e){
     console.log("closed")
     setTimeout(restart_ws,1000)
 }
+
+document.addEventListener('DOMContentLoaded', function() {
+     let img = document.getElementById('dropbtn_lang')
+     if (window.location.href.indexOf("ru") > -1){
+        img.style.background = "url('/static/img/png/ru.png')"
+        img.style.backgroundRepeat = "no-repeat"
+        img.style.backgroundPosition = "left center"
+
+     }else if(window.location.href.indexOf("en") > -1){
+        img.style.background = "url('/static/img/png/en.png')"
+        img.style.backgroundRepeat = "no-repeat"
+        img.style.backgroundPosition = "left center"
+     }
+});
+
+window.addEventListener('scroll', () => {
+    let headerBG = document.getElementById('header_bg')
+
+  headerBG.style.backgroundColor = 'rgb(248 248 248 / 90%)'
+  headerBG.style.padding = '20px 40px'
+  // headerBG.style.paddingBottom = 'padding: 10px 40px 10px 40px'
+  // headerBG.style.paddingRight = 'padding: 10px 40px 10px 40px'
+  // headerBG.style.paddingLeft = 'padding: 10px 40px 10px 40px'
+})
+  // Действия при изменении URL
+
+
+// function changeImgLang(el) {
+//
+//     let img = document.getElementById('dropbtn_lang')
+//
+//     if (el.innerText === 'RU'){
+//         img.style.background = "url('/static/img/png/ru.png') no-repeat left center;"
+//     }
+//     else if(el.innerText === 'EN'){
+//         img.style.background = "url('/static/img/png/en.png')"
+//         img.style.backgroundRepeat = "no-repeat"
+//         img.style.backgroundPosition = "left center"
+//
+//     }
+//
+// }
+
+
+
 // var window_messages = document.querySelector(".container-messages")
 
 // function middleWareJS (){

templates/blocks/b_header.html

@@ -1,5 +1,6 @@
 {% load i18n %}
-<header>
+{% load base_tags_extra %}
+<header id="header_bg">
     <div class="header-first">
       <div><a href="/"><img class="svg" src="/static/img/svg/Logo.svg"></a></div>
       <div onclick="showMenu(this, event)"  class="dropdown">
@@ -26,7 +27,13 @@
     </div>
     <div class="header-second">
       <div class="header-second-item">
-          <a href="#"><img src="/static/img/png/ru.png" alt=""></a>
+          <div class="dropdown_lang">
+              <div id="dropbtn_lang" class="dropbtn_lang">RU</div>
+              <div class="dropdown-content-lang">
+                <a onclick="changeImgLang(this)" href="/ru{{ request.path|del_lang_from_path }}">RU</a>
+                <a onclick="changeImgLang(this)" href="/en{{ request.path|del_lang_from_path }}">EN</a>
+              </div>
+          </div>
       </div>
       <div>
           <img class="svg" src="/static/img/svg/Helpdesk_%20Icon.svg">

templates/tb_base.html

@@ -16,8 +16,6 @@
 
     <link rel="stylesheet" href="{% static 'css/datarangepicker.css' %}" />
 
-
-
     {% if user and not user.is_anonymous %}
         <script src='{% static "js/chat_sockets.js" %}'></script>
         <script src="{% static "js/global_js.js" %}"></script>