TPS/birzha
TPS
/
birzha
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Phone box in register

This commit is contained in:
Meylis Gazakow 2021-11-24 22:11:06 +03:00
parent 1415dee373
commit b4d1c7dca4
7 changed files with 4777 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
shablon/add_post-3.html
View File

@ -277,7 +277,6 @@
<div class="add_post-3">
<div class="add_post-box">
<div class="add_post-box-col">
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
@ -290,6 +289,30 @@
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (ENG)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (eng)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (TKM)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (tkm)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
@ -305,7 +328,7 @@
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Önäriji yurt
Öndüriji yurt
</h4>
</div>
<div class="add_post_box-item-row">
@ -317,7 +340,7 @@
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Önäriji yurt
Öndüriji yurt
</h4>
</div>
<div class="add_post_box-item-row">
@ -326,20 +349,6 @@
</p>
</div>
</div>
</div>
<div class="add_post-box-col">
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (ENG)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (eng)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
@ -376,20 +385,6 @@
</p>
</div>
</div>
</div>
<div class="add_post-box-col">
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (TKM)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (tkm)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
@ -427,7 +422,6 @@
</div>
</div>
</div>
</div>
<div class="basket_info">
<div class="basket_info_title">
Стоимость

105
shablon/css/main.css
View File

@ -388,6 +388,54 @@ li {
width: 100%;
margin-bottom: 30px;
position: relative;
}
.pl-100 input {
padding-left: 100px !important;
}
.phone_box {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
display: flex;
align-items: center;
}
.phone_box-flag {
width: 20px;
height: 20px;
margin-right: 20px;
position: relative;
}
.phone_box-flag::after {
content: '';
position: absolute;
top: 50%;
right: -12px;
width: 8px;
height: 4px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
-o-path: polygon(0 0, 50% 100%, 100% 0);
-moz-path: polygon(0 0, 50% 100%, 100% 0);
-ms-path: polygon(0 0, 50% 100%, 100% 0);
background: #000;
}
.phone_box-code {
font-size: 16px;
font-weight: 400;
line-height: 1.3;
}
.register_input input {
@ -406,7 +454,7 @@ li {
font-size: var(--text-20);
font-weight: 400;
line-height: 1.4;
color: var(--rgba-black);
color: rgba(0, 0, 0, .3);
}
.form_btn {
@ -3994,33 +4042,33 @@ li {
display: flex;
text-align: center;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-o-flex-wrap: wrap;
}
.add_post-box-col {
width: calc(33.33% - 10px);
.add_post-box-item {
margin: 0 5px;
}
.add_post_box-item {
border: 2px solid #F2F6FF;
border-radius: 5px;
margin-bottom: 20px;
width: calc(33.33% - 10px);
margin: 0 5px 20px 5px;
}
.add_post_box-item .add_post_box-item-row:first-child {
background: #F2F6FF;
}
.add_post_box-item:last-child {
margin-bottom: 0px;
}
.add_post_box-item-row {
padding: 20px 10px;
display: flex;
/* display: flex;
align-items: center;
justify-content: center;
justify-content: center; */
}
.add_post-box-title {
@ -4028,16 +4076,6 @@ li {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.add_post-box-text {
@ -4045,16 +4083,6 @@ li {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
@ -5572,6 +5600,10 @@ li {
.detail_info {
margin-left: 0;
}
.add_post_box-item {
width: calc(50% - 10px);
}
}
@media(max-width: 600px) {
@ -5585,6 +5617,10 @@ li {
padding: 0 15px;
}
.register_input input {
padding: 10px 15px;
}
.mobile_user-profile {
width: 30px;
height: 30px;
@ -5827,12 +5863,6 @@ li {
}
/* Add post 3 ======================================= */
.add_post-box-col {
width: calc(50% - 10px);
margin-bottom: 20px;
}
.add_post-3 .basket_info {
width: 100%;
}
@ -6182,9 +6212,8 @@ li {
/* Add post 3 ======================================= */
.add_post-box-col {
.add_post_box-item {
width: calc(100% - 10px);
margin-bottom: 20px;
}
.add_post-box-title, .add_post-box-text {

1548
shablon/css/phone_box.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
shablon/images/flags.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
shablon/images/flags@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

2980
shablon/index.html
View File

File diff suppressed because it is too large Load Diff

51
shablon/js/main.js
View File

@ -44,6 +44,10 @@ let mobile_profile_navs = document.querySelector('.mobile_profile-navs');
let notification_header = document.querySelector('.notification_header');
let notification_area = document.querySelector('.notification_area');
let phone_box = document.querySelectorAll('.phone_box');
let iti__country = document.querySelectorAll('.iti__country');
let iti__country_list = document.querySelectorAll('.iti__country-list');
@ -122,6 +126,12 @@ window.onclick = function (e) {
}
}
// if (iti__country_list != undefined) {
// if (iti__country_list.classList.contains('active') && !e.target.closest('.phone_box')) {
// iti__country_list.classList.remove('active');
// }
// }
if (notification_area != undefined) {
if (notification_area.classList.contains('active') && !e.target.closest('.notification_header')) {
notification_area.classList.remove('active');
@ -136,6 +146,15 @@ window.onclick = function (e) {
// }
// );
// if (iti__country_list != undefined) {
// iti__country_list.forEach(er => {
// if (er.classList.contains('active') && !e.target.closest('.phone_box')); {
// er.classList.remove('active')
// }
// });
// }
if (register != undefined) {
if (register.classList.contains('active') && !e.target.closest('.register_body')) {
register.classList.remove('active');
@ -213,6 +232,38 @@ if (profile_head != undefined) {
});
}
// if (phone_box != undefined) {
// phone_box.addEventListener('click', function () {
// sleep(2).then(() => {
// iti__country_list.classList.toggle('active');
// });
// });
// }
if (phone_box != undefined) {
phone_box.forEach(x => {
x.addEventListener('click', function () {
sleep(2).then(() => {
iti__country_list.forEach(e => {
e.classList.toggle('active');
})
});
});
})
}
if (iti__country != undefined) {
iti__country.forEach(x => {
x.addEventListener('click', function () {
sleep(2).then(() => {
iti__country_list.forEach(e => {
e.classList.remove('active');
})
});
});
})
}
if (notification_header != undefined) {
notification_header.addEventListener('click', function () {