From 7cb8a2de39f7e78aa117cf0bb85adf303a9f69c8 Mon Sep 17 00:00:00 2001 From: ArtemB Date: Sat, 11 Nov 2023 13:51:54 +0300 Subject: [PATCH] 0.0.217 add mobile 575px --- static/css/mobile_styles.css | 175 +++++++++++++++++++++-------------- static/css/styles(boris).css | 2 +- static/css/styles.css | 15 ++- 3 files changed, 117 insertions(+), 75 deletions(-) diff --git a/static/css/mobile_styles.css b/static/css/mobile_styles.css index 4575d4b..5c0e4cd 100644 --- a/static/css/mobile_styles.css +++ b/static/css/mobile_styles.css @@ -3,13 +3,7 @@ @media (max-width: 1199px){ } - -@media (max-width: 991px){ - .benefit_img>img{ - display: none; - } -} -@media (max-width: 767px) { +@media (max-width: 991px) { .wrapper_content { margin: 20px; @@ -19,11 +13,22 @@ .from_to_country>.clear_both{ clear: unset; } + div.departure_arrival>div>input, + .from_address_point_txt.post_route, + .to_address_point_txt.post_route{ + width: calc(100% - 20px); + } + div.from_to_place>div>select{ + width: 100%; + } header{ padding: 5px 16px; margin-top: unset; } + header .header-first{ + margin-top: 10px; + } header .header-second { margin-left: unset; @@ -460,14 +465,7 @@ .dectop_var_f_btns_temp{ display: none; } - .menu_buttons{ - background: #FFFFFF; - height: 100vh; - z-index: 99; - top: 47px; - overflow: auto; - } .cut_width_f_curtain{ position: sticky; @@ -488,14 +486,16 @@ position: absolute; width: 320px; } - .menu_buttons.right.open { - right: 0; - transition: 200ms; - position: fixed; - display: block; - padding-top: 10px; - top: 46px; - } + .menu_buttons.right.open{ + right: 0; + transition: 200ms; + position: absolute; + display: block; + /* padding-top: 10px; */ + width: 320px; + top: 0; + border-radius: 10px; +} .menu_buttons.left.open{ left: 0; @@ -521,39 +521,7 @@ color: #000000; left: 272px; } - .menu_buttons.right.open .handler_menu{ - background: #FFFFFF; - color: #000000; - left: -39px; - } - .menu_buttons.close .handler_menu{ - background: #FF613A; - color: #FFFFFF; - } - .menu_buttons.right .handler_menu{ - transform: rotate(270deg); - right: -312px; - width: 91px; - height: 18px; - display: block; - position: fixed; - text-align: center; - top: 39%; - border-radius: 10px 10px 0 0; - padding: 7px 18px 7px 18px; - } - .menu_buttons.left .handler_menu{ - transform: rotate(90deg); - left: -48px; - width: 91px; - height: 18px; - display: block; - position: fixed; - text-align: center; - top: 39%; - border-radius: 10px 10px 0 0; - padding: 7px 18px 7px 18px; - } + .btns_f_curtain{ width: 7px; @@ -583,10 +551,7 @@ display: block; } - .block_overlay.show{ - display: block; - } - /*этот стиль перекрывал блок диалога в сообщения блюром*/ + .text_f_curtain{ display: inline-block; @@ -623,7 +588,7 @@ left: 1px; } .info_profile{ - width: 100%; + width: 60%; float: none; /*margin-left: 25px;*/ } @@ -735,7 +700,7 @@ /*create_route*/ select#id_type_transport{ - width: 96%; + width: 100%; background: white; } .departure_arrival>div:first-child, .from_to_place>div:first-child, .from_to_country>div:first-child, .phone>div:first-child, @@ -743,12 +708,10 @@ width: unset; float: none; } - .js-input{ - width: 92%; - } - input#id_phone, input#id_extra_phone{ - width: 92%; + .js-input, input#id_phone, input#id_extra_phone{ + width: calc(100% - 10px); } + #img_msg_by_email{ left: 81%; } @@ -762,6 +725,10 @@ } + .carrier-card>.clear_both{ + clear: unset; + } + .route_info_about{ margin: unset; text-align: center; @@ -805,6 +772,16 @@ font-style: normal; font-weight: 600; } + .line_inf_about_moving>.clear_both{ + clear: unset; + } + .phones_carrier>.clear_both{ + clear: unset; + } + .email_carrier>.clear_both{ + clear: unset; + } + .from-to-city-text{ font-size: 12px; font-weight: 400; @@ -991,6 +968,68 @@ /* */ +} +@media (max-width: 767px){ + .menu_buttons{ + background: #FFFFFF; + height: 100vh; + z-index: 99; + top: 47px; + overflow: auto; + + } + .menu_buttons.right.open .handler_menu{ + background: #FFFFFF; + color: #000000; + left: -39px; + } + .menu_buttons.close .handler_menu{ + background: #FF613A; + color: #FFFFFF; + } + .menu_buttons.right .handler_menu{ + transform: rotate(270deg); + right: -312px; + width: 91px; + height: 18px; + display: block; + position: fixed; + text-align: center; + top: 39%; + border-radius: 10px 10px 0 0; + padding: 7px 18px 7px 18px; + } + .menu_buttons.left .handler_menu{ + transform: rotate(90deg); + left: -48px; + width: 91px; + height: 18px; + display: block; + position: fixed; + text-align: center; + top: 39%; + border-radius: 10px 10px 0 0; + padding: 7px 18px 7px 18px; + } + .block_overlay.show{ + display: block; + } + /*этот стиль перекрывал блок диалога в сообщения блюром*/ + .menu_buttons.right.open { + right: 0; + transition: 200ms; + position: fixed; + display: block; + padding-top: 10px; + top: 46px; + } + .benefit_img>img{ + display: none; + } + .info_profile { + width: 100%; + float: none; + } } @media (max-width: 575px){ .cont-el-form-search-carrier.last > select{ @@ -1007,9 +1046,7 @@ } @media (max-width: 360px){ - .wrapper_content { - margin: 20px; - } + } diff --git a/static/css/styles(boris).css b/static/css/styles(boris).css index 8150a6b..453cb1c 100644 --- a/static/css/styles(boris).css +++ b/static/css/styles(boris).css @@ -2025,7 +2025,7 @@ } .header_big_background{ - height: 77px; + height: 65px; background: #F8F8F8; width: 100%; position: absolute; diff --git a/static/css/styles.css b/static/css/styles.css index a825ac1..2b10e40 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1661,7 +1661,7 @@ input#id_extra_phone { display: block; height: 60px; - width: 380px; + width: calc(100% - 10px); border-radius: 15px; border: 2px solid #E6E6E6; color: #272424; @@ -1955,6 +1955,11 @@ button#more_button{ top 154px left 205px, bottom 34px right 58px, top 140px right 233px; + + /*-12px left 131px,*/ + /* top 51px left -9px,*/ + /* bottom -37px right 105px,*/ + /* top 65px right -30px*/ background-repeat: no-repeat, no-repeat, @@ -1970,10 +1975,10 @@ button#more_button{ url(/static/img/png/Box8.png), url(/static/img/png/Box4.png); background-position: - bottom 23px left -7px, - top 154px left 242px, - top 0px right -10px, - top 146px right 270px; + bottom -31px left -13px, + top 159px left 242px, + top 0px right -15px, + top 146px right 215px; background-repeat: no-repeat, no-repeat,