From 678b401633e4bfb0efd8810acc7c4b3b66b65ef1 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 20 Mar 2023 18:27:30 +0000 Subject: [PATCH] Update content of files --- data/web/fragment.com/about.html | 7 +- data/web/fragment.com/css/auction.css | 189 ++++++++++++++++++++++++-- data/web/fragment.com/js/auction.js | 30 +++- 3 files changed, 207 insertions(+), 19 deletions(-) diff --git a/data/web/fragment.com/about.html b/data/web/fragment.com/about.html index ffaee227a4..dab9ab243d 100644 --- a/data/web/fragment.com/about.html +++ b/data/web/fragment.com/about.html @@ -15,7 +15,7 @@ - + @@ -38,9 +38,10 @@ - + + - + diff --git a/data/web/fragment.com/css/auction.css b/data/web/fragment.com/css/auction.css index 4eaac7f56f..a474455a05 100644 --- a/data/web/fragment.com/css/auction.css +++ b/data/web/fragment.com/css/auction.css @@ -27,6 +27,7 @@ --field-bg-color: #242e38; --field-second-color: #8494a3; --field-placeholder-color: #8a98a6; + --field-accent-color: #248bda; --btn-primary-color: #fff; --btn-primary-bg-rgb: 36, 139, 218; --btn-primary-bg-color: rgb(var(--btn-primary-bg-rgb)); @@ -65,7 +66,6 @@ --tooltip-color: #fff; --header-tab-color-rgb: 203, 215, 229; --header-tab-color-active: #fff; - --header-tab-accent-color: #248bda; --unavail-color-rgb: 255, 88, 99; --unavail-color: rgb(var(--unavail-color-rgb)); } @@ -272,6 +272,7 @@ i.icon { } .tm-form-radio-item { display: block; + position: relative; margin-bottom: 0; cursor: pointer; } @@ -307,7 +308,7 @@ i.icon { background-color: var(--accent-color); box-shadow: inset 0 0 0 20px var(--field-bg-color); transition: border-color var(--def-transition), box-shadow var(--def-transition); - margin-right: 21px; + margin-right: 19px; } .tm-form-radio-item input.radio:checked ~ .tm-form-radio-label { box-shadow: 0 0 0 2px var(--accent-color); @@ -322,8 +323,20 @@ i.icon { .tm-form-radio-label .tm-radio-label { flex-grow: 1; } +.tm-form-radio-label .tm-radio-label-badge { + display: inline-block; + font-size: 11px; + line-height: 14px; + font-weight: bold; + padding: 2px 4px; + margin: 1px 4px 1px 8px; + vertical-align: top; + border-radius: 4px; + background-color: var(--field-accent-color); + white-space: nowrap; +} .tm-form-radio-label .tm-value { - width: 90px; + width: 70px; } .tm-form-radio-label .tm-radio-desc { font-weight: normal; @@ -332,6 +345,55 @@ i.icon { width: 70px; } +.tm-form-checkbox-item { + display: inline-block; + font-weight: normal; + position: relative; + margin-bottom: 0; + cursor: pointer; +} +.tm-form-checkbox-item input.checkbox { + position: absolute; + left: -5000px; +} +.tm-form-checkbox-label { + display: block; + font-size: 13px; + line-height: 18px; + padding: 5px 10px; + color: var(--field-color); + position: relative; + overflow: hidden; +} +.tm-form-checkbox-item input.checkbox ~ .tm-form-checkbox-label:before { + display: inline-block; + flex-shrink: 0; + flex-grow: 0; + content: ''; + width: 18px; + height: 18px; + border-radius: 50%; + box-shadow: inset 0 0 0 1.4px var(--field-second-color); + background: transparent var(--image-url-checkbox-icon) center no-repeat; + background-size: 0%; + transition: box-shadow var(--def-transition), background var(--def-transition); + margin-right: 9px; +} +.tm-form-checkbox-item input.checkbox:checked ~ .tm-form-checkbox-label:before { + box-shadow: inset 0 0 0 0 var(--field-second-color); + background-color: #119bf7; + background-size: 100%; +} +.tm-form-checkbox-label { + display: inline-block; +} +.tm-form-checkbox-label { + display: flex; +} +.tm-form-checkbox-label .tm-checkbox-label { + flex-grow: 1; +} + .fit-text { display: inline-block; white-space: nowrap; @@ -572,7 +634,7 @@ i.icon-telegram-premium { background-image: var(--image-url-telegram-premium); } svg.icon-telegram-premium use { - fill: var(--header-tab-accent-color); + fill: var(--field-accent-color); scale: 0.833; } .tm-qr-code-label .icon-telegram-premium { @@ -634,7 +696,7 @@ a.tm-pagination-item.active:focus { left: 0; right: 0; bottom: 0; - background-color: var(--header-tab-accent-color); + background-color: var(--field-accent-color); border-radius: 3px 3px 0 0; } .tm-header-tab + .tm-header-tab { @@ -646,7 +708,7 @@ a.tm-pagination-item.active:focus { font-weight: bold; padding: 1px 5px; margin-left: 4px; - background-color: var(--header-tab-accent-color); + background-color: var(--field-accent-color); color: #fff; border-radius: 4px; } @@ -2403,8 +2465,28 @@ a.tm-table-action-link:hover { color: var(--text-color); } .popup-body { + position: relative; padding: 22px 20px 30px; } +.popup-side-icons { + position: absolute; + z-index: 1; + right: 0; + top: 0; +} +.popup-body .icon-popup-close { + display: inline-block; + vertical-align: top; + line-height: 0; + padding: 17px; + border-radius: var(--popup-border-radius); + cursor: pointer; +} +.popup-body .icon-popup-close:before { + width: 10px; + height: 10px; + background-image: var(--image-url-popup-close); +} .popup .popup-text { margin: 0; position: relative; @@ -2659,13 +2741,83 @@ a.tm-table-action-link:hover { } .gift-premium-popup-container .popup { - width: 420px; + text-align: center; } .gift-premium-popup-container .popup section { - max-width: 420px; + padding-bottom: 0; } -.tm-gift-premium-summary { - margin: 16px -8px 0; +.gift-premium-popup-container .popup .popup-text { + color: var(--text-color); +} +.gift-premium-popup-container .popup .popup-text + .popup-text { + margin-top: 10px; +} +.gift-premium-popup-container form { + text-align: center; + padding: 0; +} +.gift-premium-popup-container .tm-form-checkbox-label { + margin-top: 10px; +} +.gift-premium-popup-container .form-main-button { + margin-top: 30px; +} +.tm-gift-premium-preview { + margin: 14px auto 0; + width: 224px; + padding: 16px 0 11px; + border-radius: 16px; + background-color: var(--field-bg-color); +} +.preview-sender-shown, +.gift-premium-popup-container.iam-sender .tm-form-checkbox-item, +.gift-premium-popup-container.show-sender .preview-sender-hidden, +.gift-premium-popup-container.show-sender.iam-sender .preview-sender-shown { + display: none; +} +.gift-premium-popup-container.show-sender .preview-sender-shown, +.gift-premium-popup-container.show-sender.iam-sender .preview-sender-hidden { + display: block; +} +.tm-gift-premium-preview .preview-sender-name, +.tm-gift-premium-preview .preview-sender-text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.tm-gift-premium-preview .preview-sender-name { + font-size: 14px; + line-height: 19px; + font-weight: bold; +} +.tm-gift-premium-preview .preview-sender-text { + font-size: 13px; + line-height: 19px; + color: var(--text-color); +} +.tm-gift-premium-preview .preview-sticker { + display: inline-block; + vertical-align: top; + position: relative; + width: 144px; + height: 144px; + margin: 1px 0 10px; +} +.tm-gift-premium-preview .preview-sticker canvas, +.tm-gift-premium-preview .preview-sticker img { + position: absolute; + width: 100%; + left: 0; + top: 0; +} +.tm-gift-premium-preview .preview-gift-text { + font-size: 15px; + line-height: 20px; + font-weight: bold; +} +.tm-gift-premium-preview .preview-gift-desc { + font-size: 13px; + line-height: 20px; } .toast-container { @@ -3273,8 +3425,17 @@ a.tm-table-action-link:hover { padding: 0 8px; } - .tm-gift-premium-summary { - margin: 23px -8px 8px; + .tm-form-radio-label .tm-value { + width: 90px; + } + .tm-form-radio-label .tm-radio-desc { + width: 70px; + } + .gift-premium-popup-container .popup .popup-text + .popup-text { + margin-top: 15px; + } + .tm-gift-premium-preview { + margin: 20px auto 0; } } @@ -3298,6 +3459,8 @@ a.tm-table-action-link:hover { --image-url-change-account: url('data:image/svg+xml,%3Csvg%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20width%3D%2219%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.4%22%3E%3Cpath%20d%3D%22m11.39%205.06v-1.23c0-1.01-.82-1.83-1.83-1.83h-6.73c-1.01%200-1.83.82-1.83%201.83v9.78c0%201.01.82%201.83%201.83%201.83h6.73c1.01%200%201.83-.82%201.83-1.83v-1.53%22%2F%3E%3Cpath%20d%3D%22m5.89%208.72h12.07%22%2F%3E%3Cpath%20d%3D%22m14.9%205.21%203.3%203.3c.12.12.12.31%200%20.43l-3.3%203.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + --image-url-popup-close: url('data:image/svg+xml,%3Csvg%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20width%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1%209%208-8m0%208-8-8%22%20fill%3D%22none%22%20stroke%3D%22%238794a1%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E'); + --image-url-header-menu: url('data:image/svg+xml,%3Csvg%20height%3D%2218%22%20viewBox%3D%220%200%2022%2018%22%20width%3D%2222%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3%209h16m-16-6h16m-16%2012h16%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.733333%22%2F%3E%3C%2Fsvg%3E'); --image-url-header-menu-close: url('data:image/svg+xml,%3Csvg%20height%3D%2218%22%20viewBox%3D%220%200%2022%2018%22%20width%3D%2222%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5%2015%2012-12m0%2012-12-12%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.733333%22%2F%3E%3C%2Fsvg%3E'); @@ -3340,6 +3503,8 @@ a.tm-table-action-link:hover { --image-url-dropdown-actions: url('data:image/svg+xml,%3Csvg%20height%3D%2248%22%20viewBox%3D%220%200%2033%2048%22%20width%3D%2233%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%229%22%20r%3D%224.5%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2224%22%20r%3D%224.5%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2239%22%20r%3D%224.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + --image-url-checkbox-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20width%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m4.9%2010.17%202.57%202.57c.08.08.2.08.28%200l5.78-5.77%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E'); + --image-url-ton-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2219%22%20viewBox%3D%220%200%2015%2019%22%20width%3D%2215%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1.74%204.5h11.51c.24%200%20.44.2.44.44%200%20.08-.02.15-.05.22l-5.46%209.9c-.24.43-.78.59-1.21.35-.15-.08-.27-.21-.36-.36l-5.26-9.9c-.12-.21-.04-.48.18-.6.07-.03.14-.05.21-.05zm5.76%2010.67v-10.67z%22%20fill%3D%22none%22%20stroke%3D%22%234db2ff%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); --image-url-ton-btn-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2219%22%20viewBox%3D%220%200%2015%2019%22%20width%3D%2215%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1.74%204.5h11.51c.24%200%20.44.2.44.44%200%20.08-.02.15-.05.22l-5.46%209.9c-.24.43-.78.59-1.21.35-.15-.08-.27-.21-.36-.36l-5.26-9.9c-.12-.21-.04-.48.18-.6.07-.03.14-.05.21-.05zm5.76%2010.67v-10.67z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E'); diff --git a/data/web/fragment.com/js/auction.js b/data/web/fragment.com/js/auction.js index fc0e8d67b3..e6426735b4 100644 --- a/data/web/fragment.com/js/auction.js +++ b/data/web/fragment.com/js/auction.js @@ -1528,6 +1528,7 @@ var Premium = { state.$premiumSearchForm.field('query').on('input', Premium.eSearchInput); $('.js-form-clear', state.$premiumSearchForm).on('click', Premium.eSearchClear); state.$premiumSearchForm.on('change', '.js-premium-options input.radio', Premium.eRadioChanged); + state.$giftPremiumForm.on('change', 'input.checkbox', Premium.eCheckboxChanged); state.$giftPremiumBtn = $('.js-gift-premium-btn'); state.updLastReq = +Date.now(); if (state.needUpdate) { @@ -1542,6 +1543,7 @@ var Premium = { state.$premiumSearchForm.field('query').off('input', Premium.eSearchInput); $('.js-form-clear', state.$premiumSearchForm).off('click', Premium.eSearchClear); state.$premiumSearchForm.off('change', '.js-premium-options input.radio', Premium.eRadioChanged); + state.$giftPremiumForm.off('change', 'input.checkbox', Premium.eCheckboxChanged); }); }, updateState: function() { @@ -1603,6 +1605,11 @@ var Premium = { eRadioChanged: function() { Premium.updateUrl(); }, + eCheckboxChanged: function() { + var $form = Aj.state.$giftPremiumForm; + var show_sender = $form.field('show_sender').prop('checked'); + Aj.state.$giftPremiumPopup.toggleClass('show-sender', show_sender); + }, eSearchSubmit: function(e) { e.preventDefault(); Premium.searchSubmit(); @@ -1700,12 +1707,25 @@ var Premium = { if (result.error) { return showAlert(result.error); } - $('.js-recepient-name', Aj.state.$giftPremiumPopup).html(result.name); - $('.js-gift-premium-summary', Aj.state.$giftPremiumPopup).html(result.summary); + $('.js-gift-premium-content', Aj.state.$giftPremiumPopup).html(result.content); + $('.js-gift-premium-button', Aj.state.$giftPremiumPopup).html(result.button); + Aj.state.$giftPremiumPopup.toggleClass('iam-sender', result.myself); Aj.state.giftPrice = result.amount; Aj.state.itemTitle = result.item_title; Aj.state.$giftPremiumForm.field('id').value(result.req_id); - openPopup(Aj.state.$giftPremiumPopup); + RLottie.WORKERS_LIMIT = 1; + openPopup(Aj.state.$giftPremiumPopup, { + onOpen: function() { + $('.js-preview-sticker').each(function() { + RLottie.init(this, {playUntilEnd: true}); + }); + }, + onClose: function() { + $('.js-preview-sticker').each(function() { + RLottie.destroy(this); + }); + } + }); }); }, eGiftPremiumSubmit: function(e) { @@ -1713,12 +1733,14 @@ var Premium = { var $form = $(this); var item_title = Aj.state.itemTitle; var req_id = $form.field('id').value(); + var show_sender = $form.field('show_sender').prop('checked'); closePopup(Aj.state.$giftPremiumPopup); QR.showPopup({ request: { method: 'getGiftPremiumLink', params: { - id: req_id + id: req_id, + show_sender: show_sender ? 1 : 0 } }, title: l('WEB_POPUP_QR_PREMIUM_HEADER'),