sysadminix/account_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

correct work curtain

Browse Source
This commit is contained in:
SBD
2024-01-06 14:37:34 +03:00
parent ca44deb077
commit fbcbe93042
8 changed files with 178 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
static/css/mobile_styles.css
View File

@@ -116,8 +116,76 @@
}
@media (max-width: 1180px){
.handler_curtain_left{
display: block;
}
.handler_curtain_left.close{
left: 0;
top: 293px;
position: fixed;
height: 127px;
width: 32px;
background: #FF613A;
border-radius: 0 10px 10px 0;
z-index: 101;
transition: 200ms;
}
.container_content_handler_curtain_left{
display: flex;
rotate: 90deg;
justify-content: space-between;
height: 32px;
width: 87px;
position: relative;
left: -49px;
top: 47px;
padding: 0 20px;
}
.handler_curtain_left.open{
left: 320px;
top: 293px;
position: fixed;
height: 127px;
width: 32px;
background: #FFFFFF;
border-radius: 0 10px 10px 0;
z-index: 101;
transition: 200ms;
}
.handler_curtain_left.open .container_content_handler_curtain_left{
rotate: 270deg;
}
.filter_img{
width: 15px;
display: block;
position: relative;
bottom: 0;
transform: rotate(270deg) translate(0, 0);
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(296deg) brightness(106%) contrast(101%);
/*transition: 200ms;*/
}
.handler_curtain_left.open .filter_img{
transform: translate(0, 0);
filter: brightness(0) saturate(100%) invert(53%) sepia(48%) saturate(4340%) hue-rotate(337deg) brightness(102%) contrast(102%);
/*transition: 200ms;*/
}
.arrows_handler_curtain_left{
width: 7px;
rotate: -90deg;
filter: unset;
/*transition: 200ms;*/
}
.handler_curtain_left.open .arrows_handler_curtain_left{
filter: brightness(0) saturate(100%) invert(53%) sepia(48%) saturate(4340%) hue-rotate(337deg) brightness(102%) contrast(102%);
transition: 200ms;
}
.wrapper_name_art{
font-size: 29px;
line-height: 33px;
@@ -656,7 +724,7 @@
top: 0;
}
.cut_width_f_curtain.n_profile.left{
position: fixed;
position: sticky;
/*min-width: 1280px;*/
}

10
static/css/styles(boris).css
View File

@@ -58,6 +58,8 @@
width: 100%;
/*background: rgba(39, 53, 62, 0.7);*/
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
-moz-backdrop-filter: blur(6px);
z-index: 100;
position: fixed;
top: 0;
@@ -2668,7 +2670,7 @@
.menu_buttons.left.open.first.filters .text_f_curtain > img{
transition: 200ms;
transform: rotate(270deg);
transform: rotate(270deg) translate(0, 0);
filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(0%) hue-rotate(162deg) brightness(104%) contrast(103%);
position: relative;
}
@@ -2902,4 +2904,10 @@
.title_b_first_page{
margin-top: 70px;
}
/* handler_curtain changed*/
.handler_curtain_left{
display: none;
}

1
static/css/styles.css
View File

@@ -223,6 +223,7 @@ body {
margin: 0;
padding: 0;
background: #F8F8F8;
mix-blend-mode: multiply;
}
header {

1
static/js/global_js.js
View File

@@ -73,6 +73,7 @@ function openOverlayOrClose () {
if (screen.width < 700){
if (!overlay.classList.contains("show")){
overlay.classList.add("show")
overlay.classList.remove("hidden")
}
}
}

62
static/js/user_profile_2.js
View File

@@ -534,9 +534,13 @@ function selectedUserMessenger (ticket_id=null,user_id=null,el){
document.querySelector(".enter-message-inp").focus()
// document.querySelector(".tab_user_messanger.select").scrollIntoView({behavior: "smooth",block:'center',inline: 'start'});
let top = document.querySelector(".tab_user_messanger.select").offsetTop
document.querySelector(".menu_buttons.curtain.left.open").scrollTo({top:top})
if (document.querySelector(".menu_buttons.curtain.left.open")){
let top = document.querySelector(".tab_user_messanger.select").offsetTop
document.querySelector(".menu_buttons.curtain.left.open").scrollTo({top:top})
}
// document.querySelector(".handler_curtain_left").classList.toggle("open")
// document.querySelector(".handler_curtain_left").classList.toggle("close")
// if (getInfoAboutUser() === 'mobile' || getInfoAboutUser() === 'laptop'){
// window.scrollTo({
// top: 0,
@@ -738,6 +742,7 @@ function open_curtain_w_btn_profile () {
last_open_curtain = curtain
set_curtain_z_index(curtain)
close_first_curt(curtain)
checkStateCurtain(curtain)
// delete_margin_in_mobile()
} else if (!window.location.href.includes("profile")){
curtain.classList.toggle("open")
@@ -749,15 +754,38 @@ function open_curtain_w_btn_profile () {
last_open_curtain = curtain
set_curtain_z_index(curtain)
close_first_curt(curtain)
// delete_margin_in_mobile()
}
}
function checkStateCurtain (curtain) {
if (curtain.classList.contains("open")){
if (!document.querySelector(".block_overlay.show")){
document.querySelector(".block_overlay").classList.add("show")
document.querySelector(".block_overlay").classList.remove("hidden")
}
if (!curtain.parentNode.classList.contains("open")) {
curtain.parentNode.classList.add("open")
curtain.parentNode.classList.remove("close")
}
}
}
function open_curtain_w_contacts () {
let curtain = document.querySelector('.menu_buttons.left')
let btn_handler_left_curtain = document.querySelector(".handler_curtain_left")
let user_type = getInfoAboutUser()
if (user_type === 'mobile' || user_type === 'laptop' && window.location.href.includes("profile")) {
if (user_type === 'mobile' && window.location.href.includes("profile") || user_type === 'laptop' && window.location.href.includes("profile")) {
open_overlay(curtain)
if (!curtain.parentNode.classList.contains('open') && !curtain.parentNode.classList.contains('close')){
curtain.parentNode.classList.add("open")
} else if (curtain.parentNode.classList.contains('open') || curtain.parentNode.classList.contains('close')) {
curtain.parentNode.classList.toggle("open")
curtain.parentNode.classList.toggle("close")
}
btn_handler_left_curtain.classList.toggle("open")
btn_handler_left_curtain.classList.toggle("close")
curtain.classList.toggle('open')
curtain.classList.toggle('close')
if (curtain.classList.contains('first')) {
@@ -771,6 +799,14 @@ function open_curtain_w_contacts () {
close_first_curt(curtain)
// delete_margin_in_mobile()
} else if (!window.location.href.includes("profile")){
if (!curtain.parentNode.classList.contains('open') && !curtain.parentNode.classList.contains('close')){
curtain.parentNode.classList.add("open")
} else if (curtain.parentNode.classList.contains('open') || curtain.parentNode.classList.contains('close')) {
curtain.parentNode.classList.toggle("open")
curtain.parentNode.classList.toggle("close")
}
btn_handler_left_curtain.classList.toggle("open")
btn_handler_left_curtain.classList.toggle("close")
open_overlay(curtain)
curtain.classList.toggle('open')
curtain.classList.toggle('close')
@@ -783,6 +819,7 @@ function open_curtain_w_contacts () {
set_curtain_z_index(curtain)
last_open_curtain = curtain
close_first_curt(curtain)
checkStateCurtain(curtain)
// delete_margin_in_mobile()
}
}
@@ -837,6 +874,10 @@ function close_first_curt (curtain) {
if (cur_el !== curtain){
cur_el.classList.toggle('open')
cur_el.classList.toggle('close')
if (cur_el.classList.contains('left')){
document.querySelector(".handler_curtain_left").classList.toggle("open")
document.querySelector(".handler_curtain_left").classList.toggle("close")
}
if (window.location.href.includes("route_search_results")){
scroll_ev(event,window)
}
@@ -854,9 +895,17 @@ function set_curtain_z_index (curtain) {
curtains.forEach(function (){
let cur_el = curtains[i]
if (cur_el === curtain){
if (!cur_el.querySelector(".handler_menu") && cur_el.classList.contains("left")){
let switcher = document.querySelector(".handler_curtain_left")
switcher.style.zIndex = 101
}
cur_el.style.zIndex = 101
cur_el.parentNode.style.zIndex = 101
} else {
if (!cur_el.querySelector(".handler_menu") && cur_el.classList.contains("left")){
let switcher = document.querySelector(".handler_curtain_left")
switcher.style.zIndex = 99
}
cur_el.style.zIndex = 99
cur_el.parentNode.style.zIndex = 99
}
@@ -867,6 +916,13 @@ function set_curtain_z_index (curtain) {
function close_open_curtain () {
if (getInfoAboutUser() === 'mobile' || getInfoAboutUser() === 'laptop' || !window.location.href.includes("profile")){
let btn_handler_left_curtain = document.querySelector(".handler_curtain_left")
if (last_open_curtain){
if (last_open_curtain.classList.contains("left")) {
btn_handler_left_curtain.classList.toggle("open")
btn_handler_left_curtain.classList.toggle("close")
}
}
let curtains = document.querySelectorAll('.curtain.open')
if (curtains.length >= 2) {
if (last_open_curtain) {

17
templates/blocks/profile/b_chats.html
View File

@@ -7,11 +7,18 @@
<div class="container_block_list_of_users">
{% include 'blocks/profile/b_list_of_users_messenger.html' %}
</div>
<div class="handler_menu close" onclick="open_curtain_w_contacts()">
<img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>
<img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="clear_both"></div>
{# <div class="handler_menu close" onclick="open_curtain_w_contacts()">#}
{# <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
{# <div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>#}
{# <img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
{# <div class="clear_both"></div>#}
{# </div>#}
</div>
<div class="handler_curtain_left {% if not cur_receiver %}open{% else %}close{% endif %}" onclick="open_curtain_w_contacts()">
<div class="container_content_handler_curtain_left">
<img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<img class="filter_img" src='{% static "/img/svg/users-solid.svg" %}'>
<img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
</div>
</div>
{#<div class="title-profile-cont">#}

17
templates/blocks/profile/b_support_chat.html
View File

@@ -17,11 +17,18 @@
<div class="container_block_list_of_users">
{% include 'blocks/profile/b_list_of_tickets_support_chat.html' %}
</div>
<div class="handler_menu close" onclick="open_curtain_w_contacts()">
<img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>
<img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="clear_both"></div>
{# <div class="handler_menu close" onclick="open_curtain_w_contacts()">#}
{# <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
{# <div class="text_f_curtain left"><img style='width: 25px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/users-solid.svg" %}'></div>#}
{# <img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
{# <div class="clear_both"></div>#}
{# </div>#}
</div>
<div class="handler_curtain_left {% if mobile %}{% if not ticket %}open{% else %}close{% endif %}{% else %}open{% endif %}{% if name.ticket %}margin{% endif %}" onclick="open_curtain_w_contacts()">
<div class="container_content_handler_curtain_left">
<img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<img class="filter_img" src='{% static "/img/svg/users-solid.svg" %}'>
<img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
</div>
</div>
{% endif %}

23
templates/tb_base.html
View File

@@ -6,7 +6,7 @@
<head>
<meta charset="UTF-8">
{# <meta name="viewport" content="width=100%,maximum-scale=5,minimum-scale=1,initial-scale=1">#}
<meta name="viewport" content="width=100%,maximum-scale=1,minimum-scale=1,initial-scale=1">
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1">
{% include "inter/meta_names.html" %}
{# <script src='{% static "js/jquery_v3_6_4.js" %}'> </script>#}
@@ -83,16 +83,23 @@
</div>
</div>
{% if page_type == 'routes' %}
<div class="cut_width_f_curtain{% if page_type == 'profile' %}{% else %} n_profile{% endif %} left ">
<div class="cut_width_f_curtain{% if page_type == 'profile' %}{% else %} n_profile{% endif %} left">
<div class="menu_buttons curtain left open first filters" data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/filter.svg" %}'>">
{% include "forms/f_find_route_filters_form.html" %}
<div class="handler_menu close" onclick="open_curtain_w_contacts()">
<img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="text_f_curtain left"><img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/filter.svg" %}'></div>
<img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="clear_both"></div>
</div>
{# <div class="handler_menu close" onclick="open_curtain_w_contacts()">#}
{# <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
{# <div class="text_f_curtain left"><img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/filter.svg" %}'></div>#}
{# <img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">#}
{# <div class="clear_both"></div>#}
{# </div>#}
</div>
</div>
<div class="handler_curtain_left close" onclick="open_curtain_w_contacts()">
<div class="container_content_handler_curtain_left">
<img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<img class="filter_img" src='{% static "/img/svg/filter.svg" %}'>
<img class="arrows_handler_curtain_left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
</div>
</div>
{% endif %}