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

0.0.160 upd tab on main page

Browse Source
This commit is contained in:
ArtemB
2023-10-01 13:36:35 +03:00
parent 598bcaaea4
commit c024b74f5b
3 changed files with 111 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
static/css/styles.css
View File

@@ -439,7 +439,7 @@ footer>div {
display: block;
border-radius: 10px;
background: #FF613A;
padding: 10px 20px;
padding: 10px 0px;
color: #FFF;
/* Body text 1 */
font-family: Inter;
@@ -2087,15 +2087,9 @@ button#send_feedback_form{
text-align: center;
}
.tabs>input[type="radio"] {
display: none;
}
/*.tabs>div {*/
/* !* скрыть контент по умолчанию *!*/
/*.tabs>input[type="radio"] {*/
/* display: none;*/
/* font-size: 16px;*/
/*} */
/*}*/
#content-1,#content-2
{
@@ -2103,15 +2097,23 @@ button#send_feedback_form{
display: none;
font-size: 16px;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2
{
#content-1.show,#content-2.show
{
/* скрыть контент по умолчанию */
display: block;
}
.tabs>label {
/*!* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") *!*/
/*#tab-btn-1:checked~#content-1,*/
/*#tab-btn-2:checked~#content-2*/
/*{*/
/* display: block;*/
/*}*/
.tab-btn-1,
.tab-btn-2 {
display: inline-block;
text-align: center;
vertical-align: middle;
@@ -2125,7 +2127,26 @@ button#send_feedback_form{
top: 1px;
padding: 10px;
border-radius: 10px;
margin-bottom: 30px;
margin: 5px;
}
.wrapper_tab_button {
background: white;
border-radius: 14px;
width: 27%;
margin: auto;
}
.tab-btn-active{
border-radius: 10px;
background: #FF613A;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px;
padding: 10px;
}
.tabs>div>#title_static{
font-size: 24px;
@@ -2138,18 +2159,18 @@ button#send_feedback_form{
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
/*.tabs>input[type="radio"]:checked+label {*/
border-radius: 10px;
background: #FF613A;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px;
padding: 10px;
/* border-radius: 10px;*/
/* background: #FF613A;*/
/* color: white;*/
/* font-size: 16px;*/
/* font-style: normal;*/
/* font-weight: 500;*/
/* line-height: 22px;*/
/* padding: 10px;*/
}
/*}*/
/*tabs_on_main_page*/

30
static/js/user_profile.js
View File

@@ -790,6 +790,36 @@ function counterText(evt) {
}
function showTabBtn(el) {
let mover_info = document.getElementById('content-1')
let customer_info = document.getElementById('content-2')
let tab_btn_1 = document.querySelector('.tab-btn-1')
let tab_btn_2 = document.querySelector('.tab-btn-2')
if (el.classList.contains('tab-btn-1')){
mover_info.classList.add('show')
customer_info.classList.remove('show')
tab_btn_1.classList.add('tab-btn-active')
tab_btn_2.classList.remove('tab-btn-active')
} else if(el.classList.contains('tab-btn-2')){
customer_info.classList.add('show')
mover_info.classList.remove('show')
tab_btn_2.classList.add('tab-btn-active')
tab_btn_1.classList.remove('tab-btn-active')
}
}

39
templates/pages/p_main.html
View File

@@ -63,13 +63,35 @@
<div class="tabs">
<div class="wrapper_tab_button">
<div
class="tab-btn-1 tab-btn-active"
onclick="showTabBtn(this)"
>
{% translate "Как отправить?" %}
</div>
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">{% translate "Как отправить?" %}</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">{% translate "Как перевезти?" %}</label>
<div
class="tab-btn-2"
onclick="showTabBtn(this)"
>
{% translate "Как перевезти?" %}
</div>
<div id="content-1">
</div>
{# <input type="radio" name="tab-btn" id="id="tab-btn-1"" value="" checked>#}
{# <label for="tab-btn-1">{% translate "Как отправить?" %}</label>#}
{# <input type="radio" name="tab-btn" id="tab-btn-2" value="">#}
{# <label for="tab-btn-2">{% translate "Как перевезти?" %}</label>#}
<div id="content-1" class="show ">
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
<div class="benefit_img">
@@ -175,6 +197,13 @@
</div>
</div>
</div>
<div class="pre_bottom_block_static">