From 1415dee3734ff84241e95476256cf09107c2f39d Mon Sep 17 00:00:00 2001 From: Meylis Gazakow Date: Tue, 23 Nov 2021 22:13:37 +0300 Subject: [PATCH] new changes --- shablon/add_post-3.html | 539 ++++++++++++++++++ shablon/basket.html | 109 +++- shablon/css/main.css | 470 ++++++++++++++- shablon/images/svg/bell-b.svg | 6 + shablon/images/svg/bell.svg | 6 + shablon/images/svg/user-profile.svg | 4 + shablon/js/main.js | 109 +++- shablon/my_post-2.html | 427 ++++++++++++++ .../assets/images/svg/usser-profile.svg | 4 + 9 files changed, 1637 insertions(+), 37 deletions(-) create mode 100644 shablon/add_post-3.html create mode 100644 shablon/images/svg/bell-b.svg create mode 100644 shablon/images/svg/bell.svg create mode 100644 shablon/images/svg/user-profile.svg create mode 100644 shablon/my_post-2.html create mode 100644 themes/birzha/assets/images/svg/usser-profile.svg diff --git a/shablon/add_post-3.html b/shablon/add_post-3.html new file mode 100644 index 000000000..a5eb860c8 --- /dev/null +++ b/shablon/add_post-3.html @@ -0,0 +1,539 @@ + + + + + + + + + + + + + Add post 3 + + + + + +
+
+
+
+
+
+ +
+
+ +99312446015 +
+
+
+
+ +
+ + info@exchange.gov.tm + +
+
+ + + +
+
+
+ +
+
+ usd +
+
+ 3.5000 +
+
+
+
+ +
+
+ eur +
+
+ 4.3430 +
+
+
+
+ +
+
+ gbp +
+
+ 3.4353 +
+
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+ Добавить объявления (Step 3) +
+ +
+
+
+
+
+

+ Harydyň ady (RUS) +

+
+
+

+ Test 1 (rus) +

+
+
+
+
+

+ Harydyň markasy +

+
+
+

+ Test mark +

+
+
+
+
+

+ Önäriji yurt +

+
+
+

+ Test mark +

+
+
+
+
+

+ Önäriji yurt +

+
+
+

+ Test mark +

+
+
+
+
+
+
+

+ Harydyň ady (ENG) +

+
+
+

+ Test 1 (eng) +

+
+
+
+
+

+ Öndüriji +

+
+
+

+ Test +

+
+
+
+
+

+ Bazaryň görnöşi +

+
+
+

+ Test +

+
+
+
+
+

+ Bazaryň görnöşi +

+
+
+

+ Test +

+
+
+
+
+
+
+

+ Harydyň ady (TKM) +

+
+
+

+ Test 1 (tkm) +

+
+
+
+
+

+ Pudak +

+
+
+

+ Nebit-himiýa önümleri +

+
+
+
+
+

+ Harydyň mukdary +

+
+
+

+ 10 +

+
+
+
+
+

+ Harydyň mukdary +

+
+
+

+ 10 +

+
+
+
+
+
+
+ Стоимость +
+
+
+
+ Цена за пост: +
+
+ 500 TMT +
+
+
+
+
+
+ Итоговая сумма +
+
+ 5200 TMT +
+
+ + + Перейти к оплате + +
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/shablon/basket.html b/shablon/basket.html index b2f11d2fb..a262e60eb 100644 --- a/shablon/basket.html +++ b/shablon/basket.html @@ -209,6 +209,42 @@

+
+
+ bell +
+

+ Уведомления +

+
+ +
+ +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ +
+
@@ -365,10 +401,75 @@
--> -
- eng - рус - tkm + +
+
+
+
+ bell +
+

Уведомления

+
+ +
+ +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +

+ Some one wrote you some dummy text +

+

+ 12:30 +

+ + +
+
+ +
+ eng + рус + tkm +
diff --git a/shablon/css/main.css b/shablon/css/main.css index 3c1c26749..461bba7ae 100644 --- a/shablon/css/main.css +++ b/shablon/css/main.css @@ -628,6 +628,7 @@ li { /* margin-top: 0; */ top: 50px; } + 100% { top: 0; } @@ -638,11 +639,19 @@ li { /* margin-top: 0; */ top: 50px; } + 100% { top: 0; } } +.fill_balance-text { + margin: 30px 0 50px; + font-size: 16px; + line-height: 1.5; + font-weight: 400; +} + .post_form-3 { display: flex; align-items: end; @@ -930,6 +939,31 @@ li { margin-right: 10px; } +.link { + margin: 30px 0 0 0; + display: flex; + align-items: center; + justify-content: center; +} + +.home_link { + display: block; +} + +.home_link span { + display: block; + margin: 0 auto; + padding: 12px 40px; + background: var(--blue); + color: #fff; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + border-radius: 5px; + cursor: pointer; +} + + .header_img img { width: 100%; height: 100%; @@ -1030,8 +1064,176 @@ li { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; - -webkit-box-shadow: inset 0px 5px 3px 0px rgb(39, 39, 39); - box-shadow: inset 0px 5px 3px 0px rgb(39, 39, 39); + -webkit-box-shadow: inset 3px 5px 3px 0px rgb(39, 39, 39), ; + box-shadow: inset 3px 5px 3px 0px rgb(39, 39, 39); +} + +.nav_wrap-box { + display: flex; + align-items: center; +} + +.notification_box { + margin-right: 40px; + position: relative; +} + +.notification_box::after { + content: ''; + position: absolute; + top: 60%; + right: -20px; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -o-transform: translateY(-50%); + width: 10px; + height: 6px; + + background: #fff; + clip-path: polygon(100% 0, 0 0, 50% 100%); + -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%); + -o-clip-path: polygon(100% 0, 0 0, 50% 100%); + -ms-clip-path: polygon(100% 0, 0 0, 50% 100%); + -moz-clip-path: polygon(100% 0, 0 0, 50% 100%); +} + +.notification_header { + display: flex; + align-items: center; + cursor: pointer; +} + +.notification_header p { + color: #fff; + font-size: 18px; + line-height: 1.4; + font-weight: 400; + margin: 0 0 0 10px; +} + +.natification_icon { + width: 14px; + height: 16px; +} + +.natification_icon img { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} + +.notification_area { + position: absolute; + top: 100%; + left: 0; + width: 300px; + max-height: 400px; + overflow-y: auto; + background: #fff; + border-radius: 5px; + padding: 10px; + z-index: 10; + + -webkit-box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black); + -moz-box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black); + box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black); + + display: none; +} + +.notification_area::-webkit-scrollbar { + height: 10px; + top: 20px; + width: 6px; +} + +.notification_area::-webkit-scrollbar-thumb { + height: 5px; + background: #d5d5d5; + border-radius: 20px; +} + +.notification_area.active { + display: block; + top: calc(100% + 40px); +} + +.notification_area-item { + padding: 15px 10px; + position: relative; + display: block; +} + +.notification_area-item::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 1px; + background: var(--blue); + opacity: .3; +} + +.notification_area-item:last-child::after { + display: none; +} + +.notification_are-title { + font-size: 15px; + font-weight: 500; + line-height: 1.4; + margin-bottom: 5px; + color: var(--blue); +} + +.notification_area-time { + font-size: 14px; + font-weight: 400; + line-height: 1.4; + color: #b4b4b4; +} + +.accord_notification { + max-height: 0; + overflow: hidden; + transition: max-height 0.1s ease-out; + -ms-transition: max-height 0.1s ease-out; + -moz-transition: max-height 0.1s ease-out; + -o-transition: max-height 0.1s ease-out; + -webkit-transition: max-height 0.1s ease-out; + + background: rgb(235, 235, 235); + border-radius: 5px; + padding: 0 15px; +} + +.accord_notification .notification_area-time { + color: #000; +} + +.accord_notification .notification_area-item::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + -ms-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -o-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + width: 95%; + height: 1.3px; + z-index: 1; + background: var(--blue); + opacity: .6; +} + +.accord_notification .notification_are-title { + font-size: 14px; } .links { @@ -1394,6 +1596,24 @@ li { margin-bottom: 50px; } +.product_head-row { + display: flex; + align-items: center; +} + +.product_head-row .add_post_btn { + margin-left: 40px; +} + +.mobile_add-btn { + display: none; +} + +.my_advert-bg { + position: relative; + height: 500px; +} + .product_title { font-size: var(--text-32); font-weight: 700; @@ -3620,6 +3840,24 @@ li { position: relative; } +.pay_link { + display: block; + padding: 20px 10px; + background: var(--blue); + color: #fff; + font-size: 18px; + font-weight: 400; + line-height: 1.3; + border-radius: 5px; + margin-top: 50px; + width: 100%; + text-align: center; +} + +.basket_info_item .basket_info_box:last-child { + margin-bottom: 0; +} + .basket_info_item::after { content: ''; position: absolute; @@ -3738,6 +3976,92 @@ li { /* Replenishment History end ======================================= */ +/* Add post 3 ======================================= */ + +.add_post-3 { + display: flex; + align-items: flex-start; +} + +.add_post-3 .basket_info { + width: 440px; + margin-left: 60px; + margin-top: 0; +} + +.add_post-box { + width: calc(100% - 500px); + + display: flex; + text-align: center; +} + +.add_post-box-col { + width: calc(33.33% - 10px); + margin: 0 5px; +} + +.add_post_box-item { + border: 2px solid #F2F6FF; + border-radius: 5px; + margin-bottom: 20px; +} + +.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; + align-items: center; + justify-content: center; +} + +.add_post-box-title { + color: #003197; + 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 { + color: #000; + 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 3 end ======================================= */ + + /* Media Query ======================================================= */ @@ -3927,6 +4251,10 @@ li { padding: 15px 30px; } + .notification_area.active { + top: calc(100% + 30px); + } + .nav_link { margin-right: 60px; } @@ -4103,6 +4431,20 @@ li { height: 80px; } + /* Add post 3 ======================================= */ + + .add_post-box { + width: calc(100% - 430px); + } + + .add_post-3 .basket_info { + margin-left: 30px; + width: 400px; + } + + /* Add post 3 end ======================================= */ + + } @media(max-width: 1200px) { @@ -4212,6 +4554,36 @@ li { width: 1250px; } + /* Add post 3 ======================================= */ + + .add_post-box { + flex-wrap: wrap; + -ms-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -o-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + width: 100%; + } + + .add_post-3 { + flex-direction: column; + -ms-flex-direction: column; + -moz-flex-direction: column; + -webkit-flex-direction: column; + } + + .add_post-3 .basket_info { + margin-left: 0; + margin-top: 50px; + } + + .add_post-box-title, + .add_post-box-text { + font-size: 14px; + height: 39px; + } + + } @media(max-width: 1000px) { @@ -4231,6 +4603,10 @@ li { display: block; } + .notification_box { + display: none; + } + .links_bg { position: fixed; top: 0; @@ -4347,8 +4723,10 @@ li { background: #fff; padding: 30px; overflow-y: auto; - -ms-overflow-style: none; /* IE 11 */ - scrollbar-width: none; /* Firefox 64 */ + -ms-overflow-style: none; + /* IE 11 */ + scrollbar-width: none; + /* Firefox 64 */ transition: all .3s linear; -ms-transition: all .3s linear; @@ -4541,6 +4919,14 @@ li { padding: 0 0 0 10px; } + .my_advert-bg { + height: 350px; + } + + .my_advert-bg .chat_wall_text { + font-size: 18px; + } + /* Basket ============= */ .basket_table { @@ -4652,6 +5038,10 @@ li { --text-20: 16px; } + .notification_area.active { + top: calc(100% + 20px); + } + .navs_wrap { padding: 10px 20px; } @@ -4763,6 +5153,15 @@ li { font-size: 22px; } + .accord_notification { + padding: 0 10px; + } + + .accord_notification .notification_area-title, + .accord_notification .notification_area-time { + font-size: 12px; + } + .register_body { height: auto; flex-direction: column; @@ -4822,6 +5221,10 @@ li { margin: 0; } + .fill_balance-text { + margin: 20px 0 30px; + } + /* Replenishment History ======================================= */ .history_table { @@ -5397,6 +5800,47 @@ li { .detail_other { margin-left: 30px; } + + .product_head { + flex-direction: column; + -ms-flex-direction: column; + -moz-flex-direction: column; + align-items: flex-start; + + } + + .product_head-row .add_post_btn { + display: none; + } + + .mobile_add-btn { + display: flex; + align-items: center; + justify-content: center; + max-width: 250px; + margin: 10px auto; + } + + .fill_balance-text { + margin: 20px 0 30px; + font-size: 14px; + } + + /* Add post 3 ======================================= */ + + .add_post-box-col { + width: calc(50% - 10px); + margin-bottom: 20px; + } + + .add_post-3 .basket_info { + width: 100%; + } + + .pay_link { + padding: 15px 10px; + font-size: 14px; + } } @media(max-width: 500px) { @@ -5701,6 +6145,10 @@ li { font-size: 14px; } + .my_advert-bg { + height: 250px; + } + .foot_logo_text { font-size: 12px; } @@ -5732,4 +6180,18 @@ li { font-size: 14px; } + /* Add post 3 ======================================= */ + + .add_post-box-col { + width: calc(100% - 10px); + margin-bottom: 20px; + } + + .add_post-box-title, .add_post-box-text { + display: block; + -webkit-line-clamp: unset; + overflow: unset; + height: unset; + } + } diff --git a/shablon/images/svg/bell-b.svg b/shablon/images/svg/bell-b.svg new file mode 100644 index 000000000..d2c36e121 --- /dev/null +++ b/shablon/images/svg/bell-b.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/shablon/images/svg/bell.svg b/shablon/images/svg/bell.svg new file mode 100644 index 000000000..959e3ae1e --- /dev/null +++ b/shablon/images/svg/bell.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/shablon/images/svg/user-profile.svg b/shablon/images/svg/user-profile.svg new file mode 100644 index 000000000..856c52fba --- /dev/null +++ b/shablon/images/svg/user-profile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/shablon/js/main.js b/shablon/js/main.js index 45a882b86..aab2ae7c6 100644 --- a/shablon/js/main.js +++ b/shablon/js/main.js @@ -8,8 +8,8 @@ const selectElement = function (element) { }; // selector end============= -let drop = document.querySelectorAll('.profile_drop'); -let profile_head = document.querySelectorAll('.profile_head'); +let drop = document.querySelector('.profile_drop'); +let profile_head = document.querySelector('.profile_head'); let register = document.querySelector('.register'); let register_btn = document.querySelectorAll('.register_btn'); let log_in = document.querySelectorAll('.log_in'); @@ -41,6 +41,9 @@ let seller_info = document.querySelector('.seller_info'); let mobile_user_profile = document.querySelector('.mobile_user-profile'); let mobile_profile_navs = document.querySelector('.mobile_profile-navs'); +let notification_header = document.querySelector('.notification_header'); +let notification_area = document.querySelector('.notification_area'); + @@ -49,16 +52,16 @@ let mobile_profile_navs = document.querySelector('.mobile_profile-navs'); window.onscroll = function () { scrollFunc(); - drop.forEach(drop => { - if (drop != undefined) { - drop.classList.remove('active'); - } - } - ); - - // if (drop != undefined) { - // drop.classList.remove('active'); + // drop.forEach(drop => { + // if (drop != undefined) { + // drop.classList.remove('active'); + // } // } + // ); + + if (drop != undefined) { + drop.classList.remove('active'); + } }; @@ -85,22 +88,53 @@ function sleep(time) { } // timing ==================== +// Accordion ============================= + + +var accordion = document.getElementsByClassName("accord"); +var z; + +for (z = 0; z < accordion.length; z++) { + accordion[z].addEventListener("click", function () { + this.classList.toggle("active"); + var panel = this.nextElementSibling; + + + if (panel.style.maxHeight) { + panel.style.maxHeight = null; + panel.style.overflow = "auto"; + panel.style.marginTop = "0px"; + + } else { + panel.style.maxHeight = panel.scrollHeight + "px"; + panel.style.overflow = "visible"; + panel.style.marginTop = "10px"; + } + }); +} // Accordion end ========================= + window.onclick = function (e) { - // if (drop != undefined) { - // if (drop.classList.contains('active') && !e.target.closest('.profile_head')) { - // drop.classList.remove('active'); - // } - // } - - drop.forEach(drop => { - if (drop != undefined) { - drop.classList.contains('active') && !e.target.closest('.profile_head'); - drop.classList.remove('active') + if (drop != undefined) { + if (drop.classList.contains('active') && !e.target.closest('.profile_head')) { + drop.classList.remove('active'); } } - ); + + if (notification_area != undefined) { + if (notification_area.classList.contains('active') && !e.target.closest('.notification_header')) { + notification_area.classList.remove('active'); + } + } + + // drop.forEach(drop => { + // if (drop != undefined) { + // drop.classList.contains('active'); + // drop.classList.remove('active') + // } + // } + // ); if (register != undefined) { if (register.classList.contains('active') && !e.target.closest('.register_body')) { @@ -159,14 +193,31 @@ selectElement('.burger').addEventListener('click', function () { }); }); +// if (profile_head != undefined) { +// profile_head.forEach(r => { +// r.addEventListener('click', function () { +// sleep(2).then(() => { +// drop.forEach(p => { +// p.classList.toggle('active'); +// }) +// }) +// }); +// }); +// } + if (profile_head != undefined) { - profile_head.forEach(r => { - r.addEventListener('click', function () { - sleep(2).then(() => { - drop.forEach(p => { - p.classList.toggle('active'); - }) - }) + profile_head.addEventListener('click', function () { + sleep(2).then(() => { + drop.classList.toggle('active'); + }); + }); +} + + +if (notification_header != undefined) { + notification_header.addEventListener('click', function () { + sleep(2).then(() => { + notification_area.classList.toggle('active'); }); }); } diff --git a/shablon/my_post-2.html b/shablon/my_post-2.html new file mode 100644 index 000000000..873bce11a --- /dev/null +++ b/shablon/my_post-2.html @@ -0,0 +1,427 @@ + + + + + + + + + + + + + My post + + + + +
+
+
+
+
+
+ +
+
+ +99312446015 +
+
+
+
+ +
+ + info@exchange.gov.tm + +
+
+ + + +
+
+
+ +
+
+ usd +
+
+ 3.5000 +
+
+
+
+ +
+
+ eur +
+
+ 4.3430 +
+
+
+
+ +
+
+ gbp +
+
+ 3.4353 +
+
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+
+ Мои объявления +
+
+
+
+ + + +
+
+ + + +
+
+ +
+ +
+
+ Добавить объявление +
+ +
+
+ +
+
+
+ logo +
+
+ В данный момент у вас нету
+ активных объявлений +
+
+
+
+ +
+ +
+
+ Добавить объявление +
+ +
+
+
+
+ + +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut +

+ + + + + + + + + + + + + diff --git a/themes/birzha/assets/images/svg/usser-profile.svg b/themes/birzha/assets/images/svg/usser-profile.svg new file mode 100644 index 000000000..856c52fba --- /dev/null +++ b/themes/birzha/assets/images/svg/usser-profile.svg @@ -0,0 +1,4 @@ + + + +