diff --git a/static/css/create_poster.css b/static/css/create_poster.css index 70c4ea9..e2d4d77 100644 --- a/static/css/create_poster.css +++ b/static/css/create_poster.css @@ -1 +1 @@ -.cargo--inline{display:inline-block;margin-right:33px}.cargo--info label{background:url(/static/img/svg/Info3.svg) right bottom 45% no-repeat;background-size:20px;padding-right:26px}@media (max-width: 575.98px){.cargo--info label{padding-right:20px}}.cargo input{width:0;height:0;display:none}.cargo input:checked+label::before{background-color:var(--brand-primary);border-color:var(--brand-primary)}.cargo input:disabled+label{color:var(--brand-grey3);cursor:not-allowed}.cargo__label{display:flex;align-items:center;justify-content:left;margin-bottom:0}.cargo__label:before{content:'';display:inline-block;width:26px;height:26px;flex-shrink:0;flex-grow:0;border:var(--base-border);border-radius:var(--base-border-radius);margin-right:10px;background-repeat:no-repeat;background-position:center center;background-size:50% 50%;background-color:white}header{padding-left:0;padding-right:0}footer{overflow:hidden}.wrapper_header_content{max-width:initial}@media only screen and (max-width: 1319.98px){section.profile{width:100%}.info_profile{width:100%}}@media (max-width: 767.98px){.menu_buttons.right.open{right:0;transition:200ms;position:fixed;display:block;padding-top:0;top:45px;background:#ffffff}}.poster{text-align:left;box-sizing:border-box;padding-top:31px}@media (max-width: 1319.98px){.poster{max-width:65%}}@media (max-width: 991.98px){.poster{max-width:55%}}@media (max-width: 767.98px){.poster{max-width:100%}}@media (max-width: 575.98px){.poster{padding-top:44px}}.poster__title{max-width:95%;margin:0 auto 5px;font-size:44px;font-weight:700;line-height:52px;text-align:center}@media (min-width: 1320px){.poster__title{max-width:100%;margin-bottom:21px}}@media (max-width: 1319.98px){.poster__title{font-size:32px;line-height:38.73px;margin-bottom:0}}@media (max-width: 575.98px){.poster__title{max-width:100%}}.poster__row{display:flex;padding:40px 0;border-bottom:1px solid #E6E6E6;gap:40px}@media (min-width: 1320px){.poster__row{padding:39px 0}}@media (max-width: 1319.98px){.poster__row{display:block}}.poster__row--from-to{flex-wrap:wrap}@media (max-width: 991.98px){.poster__row--from-to{padding-top:14px}}@media (max-width: 767.98px){.poster__row--from-to{padding-top:30px}}@media (max-width: 575.98px){.poster__row--from-to{padding-top:40px}}.poster__row--from-to label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--from-to label{padding-left:0}}@media (max-width: 991.98px){.poster__row--from-to label{padding-left:11px}}@media (max-width: 575.98px){.poster__row--cargo{padding-bottom:29px}}@media (max-width: 1319.98px){.poster__row--date{padding-bottom:20px}}.poster__row--date label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--date label{margin-bottom:20px}}@media (max-width: 575.98px){.poster__row--date label{padding-left:0}}@media (max-width: 1319.98px){.poster__row--transport{padding-bottom:50px}}@media (max-width: 991.98px){.poster__row--transport{padding-bottom:39px}}@media (max-width: 575.98px){.poster__row--transport{padding-top:42px}}.poster__row--transport label{margin-bottom:20px}@media (max-width: 575.98px){.poster__row--transport label{margin-bottom:19px}}@media (max-width: 1319.98px){.poster__row--phone{padding-top:29px}}@media (max-width: 991.98px){.poster__row--phone{padding-top:38px}}@media (max-width: 575.98px){.poster__row--phone{padding-top:40px;padding-bottom:39px}}.poster__row--phone label{padding-left:9px;margin-bottom:11px}@media (max-width: 1319.98px){.poster__row--phone label{padding-left:0;margin-bottom:20px}}.poster__row--phone input{margin-bottom:21px}@media (max-width: 991.98px){.poster__row--description{padding-top:30px}}@media (max-width: 575.98px){.poster__row--description{padding-top:39px}}.poster__row--description label{padding-left:9px;margin-bottom:10px}@media (max-width: 1319.98px){.poster__row--description label{padding-left:0;margin-bottom:20px}}.poster__row--description textarea{min-height:128px;padding-top:18px;margin-bottom:3px}@media (max-width: 1319.98px){.poster__row--description textarea{min-height:210px;margin-bottom:6px}}@media (max-width: 991.98px){.poster__row--description textarea{min-height:305px}}.poster__row--distribution{border-bottom:0}@media (max-width: 1319.98px){.poster__row--distribution{padding-bottom:30px}}@media (max-width: 991.98px){.poster__row--distribution{padding-top:38px;padding-bottom:40px}}.poster__row--distribution label{letter-spacing:-0.08px}.poster__col{flex:1;position:relative}@media (max-width: 1319.98px){.poster__col:not(:last-child){margin-bottom:20px}}.poster__col--inner{display:flex;min-width:100%;gap:40px}.poster__grid{display:grid;grid-template-columns:repeat(3, 1fr)}@media (min-width: 1320px){.poster__grid{max-width:80%;margin-bottom:37px}}@media (max-width: 1319.98px){.poster__grid{grid-template-columns:repeat(auto-fill, 261px)}}.poster__grid label{margin-bottom:0;padding-top:10px;padding-bottom:10px}.poster__info{padding-left:30px;background:url(/static/img/svg/Info3.svg) left top no-repeat;line-height:22px}@media (max-width: 1319.98px){.poster__info{font-size:12px;line-height:20px;max-width:90%}}.poster__label{margin-bottom:10px}.poster__area-descr{text-align:right;font-size:14px;line-height:20px;padding-right:11px;color:var(--brand-grey3)}@media (max-width: 767.98px){.poster__area-descr{padding-right:0}}@media (max-width: 1319.98px){.poster__errors{margin-bottom:2px}}.poster__towns-list{display:none;max-height:200px;width:100%;position:absolute;background-color:var(--brand-white);overflow:scroll;overflow-x:hidden;z-index:100}.poster__towns-list.show{display:block}.poster__towns-list::-webkit-scrollbar{width:10px}.poster__towns-list::-webkit-scrollbar-thumb{background-color:#FF613A;border-radius:20px;border:3px solid white}.poster__locate{appearance:none}.poster .btn{margin:0}@media (max-width: 575.98px){.poster .btn{padding-left:5px;padding-right:5px}}@media (max-width: 767.98px){.poster .cargo--inline{width:100%}} +.cargo--inline{display:inline-block;margin-right:33px}.cargo--info label{background:url(/static/img/svg/Info3.svg) right bottom 45% no-repeat;background-size:20px;padding-right:26px}@media (max-width: 575.98px){.cargo--info label{padding-right:20px}}.cargo input{width:0;height:0;display:none}.cargo input:checked+label::before{background-color:var(--brand-primary);border-color:var(--brand-primary)}.cargo input:disabled+label{color:var(--brand-grey3);cursor:not-allowed}.cargo__label{display:flex;align-items:center;justify-content:left;margin-bottom:0}.cargo__label:before{content:'';display:inline-block;width:26px;height:26px;flex-shrink:0;flex-grow:0;border:var(--base-border);border-radius:var(--base-border-radius);margin-right:10px;background-repeat:no-repeat;background-position:center center;background-size:50% 50%;background-color:white}header{padding-left:0;padding-right:0}footer{overflow:hidden}.wrapper_header_content{max-width:initial}@media only screen and (max-width: 1319.98px){section.profile{width:100%}.info_profile{width:100%}}@media (max-width: 767.98px){.menu_buttons.right.open{right:0;transition:200ms;position:fixed;display:block;padding-top:0;top:45px;background:#ffffff}}.poster{text-align:left;box-sizing:border-box;padding-top:31px}@media (max-width: 1319.98px){.poster{max-width:65%}}@media (max-width: 991.98px){.poster{max-width:55%}}@media (max-width: 767.98px){.poster{max-width:100%}}@media (max-width: 575.98px){.poster{padding-top:44px}}.poster__title{max-width:95%;margin:0 auto 5px;font-size:44px;font-weight:700;line-height:52px;text-align:center}@media (min-width: 1320px){.poster__title{max-width:100%;margin-bottom:21px}}@media (max-width: 1319.98px){.poster__title{font-size:32px;line-height:38.73px;margin-bottom:0}}@media (max-width: 575.98px){.poster__title{max-width:100%}}.poster__row{display:flex;padding:40px 0;border-bottom:1px solid #E6E6E6;gap:40px}@media (min-width: 1320px){.poster__row{padding:39px 0}}@media (max-width: 1319.98px){.poster__row{display:block}}.poster__row--from-to{flex-wrap:wrap}@media (max-width: 991.98px){.poster__row--from-to{padding-top:14px}}@media (max-width: 767.98px){.poster__row--from-to{padding-top:30px}}@media (max-width: 575.98px){.poster__row--from-to{padding-top:40px}}.poster__row--from-to label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--from-to label{padding-left:0}}@media (max-width: 991.98px){.poster__row--from-to label{padding-left:11px}}@media (max-width: 575.98px){.poster__row--cargo{padding-bottom:29px}}@media (max-width: 1319.98px){.poster__row--date{padding-bottom:20px}}.poster__row--date label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--date label{margin-bottom:20px}}@media (max-width: 575.98px){.poster__row--date label{padding-left:0}}@media (max-width: 1319.98px){.poster__row--transport{padding-bottom:50px}}@media (max-width: 991.98px){.poster__row--transport{padding-bottom:39px}}@media (max-width: 575.98px){.poster__row--transport{padding-top:42px}}.poster__row--transport label{margin-bottom:20px}@media (max-width: 575.98px){.poster__row--transport label{margin-bottom:19px}}@media (max-width: 1319.98px){.poster__row--phone{padding-top:29px}}@media (max-width: 991.98px){.poster__row--phone{padding-top:38px}}@media (max-width: 575.98px){.poster__row--phone{padding-top:40px;padding-bottom:39px}}.poster__row--phone label{padding-left:9px;margin-bottom:11px}@media (max-width: 1319.98px){.poster__row--phone label{padding-left:0;margin-bottom:20px}}.poster__row--phone input{margin-bottom:21px}@media (max-width: 991.98px){.poster__row--description{padding-top:30px}}@media (max-width: 575.98px){.poster__row--description{padding-top:39px}}.poster__row--description label{padding-left:9px;margin-bottom:10px}@media (max-width: 1319.98px){.poster__row--description label{padding-left:0;margin-bottom:20px}}.poster__row--description textarea{min-height:128px;padding-top:18px;margin-bottom:3px}@media (max-width: 1319.98px){.poster__row--description textarea{min-height:210px;margin-bottom:6px}}@media (max-width: 991.98px){.poster__row--description textarea{min-height:305px}}.poster__row--distribution{border-bottom:0}@media (max-width: 1319.98px){.poster__row--distribution{padding-bottom:30px}}@media (max-width: 991.98px){.poster__row--distribution{padding-top:38px;padding-bottom:40px}}.poster__row--distribution label{letter-spacing:-0.08px}.poster__col{flex:1;position:relative}@media (max-width: 1319.98px){.poster__col:not(:last-child){margin-bottom:20px}}.poster__col--inner{display:flex;min-width:100%;gap:40px}.poster__grid{display:grid;grid-template-columns:repeat(3, 1fr)}@media (min-width: 1320px){.poster__grid{max-width:80%;margin-bottom:37px}}@media (max-width: 1319.98px){.poster__grid{grid-template-columns:repeat(auto-fill, 261px)}}.poster__grid label{margin-bottom:0;padding-top:10px;padding-bottom:10px}.poster__info{padding-left:30px;background:url(/static/img/svg/Info3.svg) left top no-repeat;line-height:22px}@media (max-width: 1319.98px){.poster__info{font-size:12px;line-height:20px;max-width:90%}}.poster__label{margin-bottom:10px;cursor:default}.poster__inp-box{position:relative}.poster__inp-box.is-set .poster__locate{padding-left:65px}.poster__inp-box .poster__inp-country{position:absolute;display:flex;align-items:center;left:10px;top:50%;gap:5px;transform:translateY(-50%)}.poster__inp-box .poster__inp-country img{width:24px}.poster__area-descr{text-align:right;font-size:14px;line-height:20px;padding-right:11px;color:var(--brand-grey3)}@media (max-width: 767.98px){.poster__area-descr{padding-right:0}}@media (max-width: 1319.98px){.poster__errors{margin-bottom:2px}}.poster__towns-list{display:none;max-height:200px;width:100%;position:absolute;background-color:var(--brand-white);overflow:scroll;overflow-x:hidden;z-index:100}.poster__towns-list.show{display:block}.poster__towns-list::-webkit-scrollbar{width:10px}.poster__towns-list::-webkit-scrollbar-thumb{background-color:#FF613A;border-radius:20px;border:3px solid white}.poster__towns-item{display:flex;align-items:center;padding:5px 5px;font-size:16px;line-height:22px;cursor:pointer}.poster__towns-item:hover{background:var(--brand-grey)}.poster__towns-item img{width:24px;margin-right:5px}.poster__towns-item span{margin-right:8px}.poster__locate{appearance:none}.poster .btn{margin:0}@media (max-width: 575.98px){.poster .btn{padding-left:5px;padding-right:5px}}@media (max-width: 767.98px){.poster .cargo--inline{width:100%}} diff --git a/static/css/create_poster/create_poster.css b/static/css/create_poster/create_poster.css index 408c6f2..98167f7 100644 --- a/static/css/create_poster/create_poster.css +++ b/static/css/create_poster/create_poster.css @@ -1 +1 @@ -.poster{text-align:left;box-sizing:border-box;padding-top:31px}@media (max-width: 1319.98px){.poster{max-width:65%}}@media (max-width: 991.98px){.poster{max-width:55%}}@media (max-width: 767.98px){.poster{max-width:100%}}@media (max-width: 575.98px){.poster{padding-top:44px}}.poster__title{max-width:95%;margin:0 auto 5px;font-size:44px;font-weight:700;line-height:52px;text-align:center}@media (min-width: 1320px){.poster__title{max-width:100%;margin-bottom:21px}}@media (max-width: 1319.98px){.poster__title{font-size:32px;line-height:38.73px;margin-bottom:0}}@media (max-width: 575.98px){.poster__title{max-width:100%}}.poster__row{display:flex;padding:40px 0;border-bottom:1px solid #E6E6E6;gap:40px}@media (min-width: 1320px){.poster__row{padding:39px 0}}@media (max-width: 1319.98px){.poster__row{display:block}}.poster__row--from-to{flex-wrap:wrap}@media (max-width: 991.98px){.poster__row--from-to{padding-top:14px}}@media (max-width: 767.98px){.poster__row--from-to{padding-top:30px}}@media (max-width: 575.98px){.poster__row--from-to{padding-top:40px}}.poster__row--from-to label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--from-to label{padding-left:0}}@media (max-width: 991.98px){.poster__row--from-to label{padding-left:11px}}@media (max-width: 575.98px){.poster__row--cargo{padding-bottom:29px}}@media (max-width: 1319.98px){.poster__row--date{padding-bottom:20px}}.poster__row--date label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--date label{margin-bottom:20px}}@media (max-width: 575.98px){.poster__row--date label{padding-left:0}}@media (max-width: 1319.98px){.poster__row--transport{padding-bottom:50px}}@media (max-width: 991.98px){.poster__row--transport{padding-bottom:39px}}@media (max-width: 575.98px){.poster__row--transport{padding-top:42px}}.poster__row--transport label{margin-bottom:20px}@media (max-width: 575.98px){.poster__row--transport label{margin-bottom:19px}}@media (max-width: 1319.98px){.poster__row--phone{padding-top:29px}}@media (max-width: 991.98px){.poster__row--phone{padding-top:38px}}@media (max-width: 575.98px){.poster__row--phone{padding-top:40px;padding-bottom:39px}}.poster__row--phone label{padding-left:9px;margin-bottom:11px}@media (max-width: 1319.98px){.poster__row--phone label{padding-left:0;margin-bottom:20px}}.poster__row--phone input{margin-bottom:21px}@media (max-width: 991.98px){.poster__row--description{padding-top:30px}}@media (max-width: 575.98px){.poster__row--description{padding-top:39px}}.poster__row--description label{padding-left:9px;margin-bottom:10px}@media (max-width: 1319.98px){.poster__row--description label{padding-left:0;margin-bottom:20px}}.poster__row--description textarea{min-height:128px;padding-top:18px;margin-bottom:3px}@media (max-width: 1319.98px){.poster__row--description textarea{min-height:210px;margin-bottom:6px}}@media (max-width: 991.98px){.poster__row--description textarea{min-height:305px}}.poster__row--distribution{border-bottom:0}@media (max-width: 1319.98px){.poster__row--distribution{padding-bottom:30px}}@media (max-width: 991.98px){.poster__row--distribution{padding-top:38px;padding-bottom:40px}}.poster__row--distribution label{letter-spacing:-0.08px}.poster__col{flex:1;position:relative}@media (max-width: 1319.98px){.poster__col:not(:last-child){margin-bottom:20px}}.poster__col--inner{display:flex;min-width:100%;gap:40px}.poster__grid{display:grid;grid-template-columns:repeat(3, 1fr)}@media (min-width: 1320px){.poster__grid{max-width:80%;margin-bottom:37px}}@media (max-width: 1319.98px){.poster__grid{grid-template-columns:repeat(auto-fill, 261px)}}.poster__grid label{margin-bottom:0;padding-top:10px;padding-bottom:10px}.poster__info{padding-left:30px;background:url(/static/img/svg/Info3.svg) left top no-repeat;line-height:22px}@media (max-width: 1319.98px){.poster__info{font-size:12px;line-height:20px;max-width:90%}}.poster__label{margin-bottom:10px}.poster__area-descr{text-align:right;font-size:14px;line-height:20px;padding-right:11px;color:var(--brand-grey3)}@media (max-width: 767.98px){.poster__area-descr{padding-right:0}}@media (max-width: 1319.98px){.poster__errors{margin-bottom:2px}}.poster__towns-list{display:none;max-height:200px;width:100%;position:absolute;background-color:var(--brand-white);overflow:scroll;overflow-x:hidden;z-index:100}.poster__towns-list.show{display:block}.poster__towns-list::-webkit-scrollbar{width:10px}.poster__towns-list::-webkit-scrollbar-thumb{background-color:#FF613A;border-radius:20px;border:3px solid white}.poster__locate{appearance:none}.poster .btn{margin:0}@media (max-width: 575.98px){.poster .btn{padding-left:5px;padding-right:5px}}@media (max-width: 767.98px){.poster .cargo--inline{width:100%}} +.poster{text-align:left;box-sizing:border-box;padding-top:31px}@media (max-width: 1319.98px){.poster{max-width:65%}}@media (max-width: 991.98px){.poster{max-width:55%}}@media (max-width: 767.98px){.poster{max-width:100%}}@media (max-width: 575.98px){.poster{padding-top:44px}}.poster__title{max-width:95%;margin:0 auto 5px;font-size:44px;font-weight:700;line-height:52px;text-align:center}@media (min-width: 1320px){.poster__title{max-width:100%;margin-bottom:21px}}@media (max-width: 1319.98px){.poster__title{font-size:32px;line-height:38.73px;margin-bottom:0}}@media (max-width: 575.98px){.poster__title{max-width:100%}}.poster__row{display:flex;padding:40px 0;border-bottom:1px solid #E6E6E6;gap:40px}@media (min-width: 1320px){.poster__row{padding:39px 0}}@media (max-width: 1319.98px){.poster__row{display:block}}.poster__row--from-to{flex-wrap:wrap}@media (max-width: 991.98px){.poster__row--from-to{padding-top:14px}}@media (max-width: 767.98px){.poster__row--from-to{padding-top:30px}}@media (max-width: 575.98px){.poster__row--from-to{padding-top:40px}}.poster__row--from-to label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--from-to label{padding-left:0}}@media (max-width: 991.98px){.poster__row--from-to label{padding-left:11px}}@media (max-width: 575.98px){.poster__row--cargo{padding-bottom:29px}}@media (max-width: 1319.98px){.poster__row--date{padding-bottom:20px}}.poster__row--date label{padding-left:9px}@media (max-width: 1319.98px){.poster__row--date label{margin-bottom:20px}}@media (max-width: 575.98px){.poster__row--date label{padding-left:0}}@media (max-width: 1319.98px){.poster__row--transport{padding-bottom:50px}}@media (max-width: 991.98px){.poster__row--transport{padding-bottom:39px}}@media (max-width: 575.98px){.poster__row--transport{padding-top:42px}}.poster__row--transport label{margin-bottom:20px}@media (max-width: 575.98px){.poster__row--transport label{margin-bottom:19px}}@media (max-width: 1319.98px){.poster__row--phone{padding-top:29px}}@media (max-width: 991.98px){.poster__row--phone{padding-top:38px}}@media (max-width: 575.98px){.poster__row--phone{padding-top:40px;padding-bottom:39px}}.poster__row--phone label{padding-left:9px;margin-bottom:11px}@media (max-width: 1319.98px){.poster__row--phone label{padding-left:0;margin-bottom:20px}}.poster__row--phone input{margin-bottom:21px}@media (max-width: 991.98px){.poster__row--description{padding-top:30px}}@media (max-width: 575.98px){.poster__row--description{padding-top:39px}}.poster__row--description label{padding-left:9px;margin-bottom:10px}@media (max-width: 1319.98px){.poster__row--description label{padding-left:0;margin-bottom:20px}}.poster__row--description textarea{min-height:128px;padding-top:18px;margin-bottom:3px}@media (max-width: 1319.98px){.poster__row--description textarea{min-height:210px;margin-bottom:6px}}@media (max-width: 991.98px){.poster__row--description textarea{min-height:305px}}.poster__row--distribution{border-bottom:0}@media (max-width: 1319.98px){.poster__row--distribution{padding-bottom:30px}}@media (max-width: 991.98px){.poster__row--distribution{padding-top:38px;padding-bottom:40px}}.poster__row--distribution label{letter-spacing:-0.08px}.poster__col{flex:1;position:relative}@media (max-width: 1319.98px){.poster__col:not(:last-child){margin-bottom:20px}}.poster__col--inner{display:flex;min-width:100%;gap:40px}.poster__grid{display:grid;grid-template-columns:repeat(3, 1fr)}@media (min-width: 1320px){.poster__grid{max-width:80%;margin-bottom:37px}}@media (max-width: 1319.98px){.poster__grid{grid-template-columns:repeat(auto-fill, 261px)}}.poster__grid label{margin-bottom:0;padding-top:10px;padding-bottom:10px}.poster__info{padding-left:30px;background:url(/static/img/svg/Info3.svg) left top no-repeat;line-height:22px}@media (max-width: 1319.98px){.poster__info{font-size:12px;line-height:20px;max-width:90%}}.poster__label{margin-bottom:10px;cursor:default}.poster__inp-box{position:relative}.poster__inp-box.is-set .poster__locate{padding-left:65px}.poster__inp-box .poster__inp-country{position:absolute;display:flex;align-items:center;left:10px;top:50%;gap:5px;transform:translateY(-50%)}.poster__inp-box .poster__inp-country img{width:24px}.poster__area-descr{text-align:right;font-size:14px;line-height:20px;padding-right:11px;color:var(--brand-grey3)}@media (max-width: 767.98px){.poster__area-descr{padding-right:0}}@media (max-width: 1319.98px){.poster__errors{margin-bottom:2px}}.poster__towns-list{display:none;max-height:200px;width:100%;position:absolute;background-color:var(--brand-white);overflow:scroll;overflow-x:hidden;z-index:100}.poster__towns-list.show{display:block}.poster__towns-list::-webkit-scrollbar{width:10px}.poster__towns-list::-webkit-scrollbar-thumb{background-color:#FF613A;border-radius:20px;border:3px solid white}.poster__towns-item{display:flex;align-items:center;padding:5px 5px;font-size:16px;line-height:22px;cursor:pointer}.poster__towns-item:hover{background:var(--brand-grey)}.poster__towns-item img{width:24px;margin-right:5px}.poster__towns-item span{margin-right:8px}.poster__locate{appearance:none}.poster .btn{margin:0}@media (max-width: 575.98px){.poster .btn{padding-left:5px;padding-right:5px}}@media (max-width: 767.98px){.poster .cargo--inline{width:100%}} diff --git a/static/js/form-poster.js b/static/js/form-poster.js index 214352d..3f92309 100644 --- a/static/js/form-poster.js +++ b/static/js/form-poster.js @@ -1,96 +1,115 @@ !function () { 'use strict'; - var posterApp = { + // todo определение фоормата даты можно вынести на бэк для контроля initDatePickerr: function () { - const _this = this; [this._selector.inpDeparture, this._selector.inpArrival].forEach(i => { - let date = i.val(); - - if (!i.length) return false + if(!i.length) return + let date = i.val().trim() ? i.val() : new Date(); let startDate = null if (window.location.href.includes("/ru/")) { - startDate = moment(date, "D MMMM YYYY г. HH:mm", 'ru'); + startDate = moment(date, this._data.formatDateClient, 'ru'); } else { - startDate = moment(date, "MMMM D, YYYY, h:mm a", 'en'); + startDate = moment(date, this._data.formatDateClient, 'en'); } if (!i.attr('hidden')) { - i.daterangepicker({ "autoapply": true, "linkedCalendars": false, "singleDatePicker": true, - "timePicker": true, - "timePicker24Hour": true, + "timePicker": false, + "timePicker24Hour": false, "minDate": startDate, "locale": changeLangForDateTimePicker(), }, function (start, end, label) { - i.val(start.format('DD.MM.YYYY HH:mm')); + i.val(start.format('DD.MM.YYYY')); }); } + + i.off('mouseleave.i-disable').on('mouseleave.i-disable', e => { + i.attr('readonly', false); + i.blur(); + }) + i.off('mouseover.i-disable').on('mouseover.i-disable', e => { + i.attr('readonly', true); + }) + i.off('focus.i-disable').on('focus.i-disable', e => { + i.blur() + }) }); + }, + changeCargoType: function () { - let inpTypeAvia = this._selector.typeItems.filter((d,i)=>i.value === 'avia'); - let inpTypePassenger = this._selector.cargoItems.filter((d,i)=>i.value === 'passenger'); - this._selector.cargoItems.off('change.i-disable').on('change.i-disable', (e)=>{ - this.handlerDisabled(e.target,inpTypeAvia,'passenger') + let inpTypeAvia = this._selector.typeItems.filter((d, i) => i.value === 'avia'); + let inpTypePassenger = this._selector.cargoItems.filter((d, i) => i.value === 'passenger'); + this._selector.cargoItems.off('change.i-disable').on('change.i-disable', (e) => { + this.handlerDisabled(e.target, inpTypeAvia, 'passenger') }) // change other type - this.handlerDisabled(inpTypePassenger,inpTypeAvia,'passenger') + this.handlerDisabled(inpTypePassenger, inpTypeAvia, 'passenger') }, - handlerDisabled: function (el,el2,text) { - if($(el).val() === text) { - $(el2).attr('disabled', true); - } else { - $(el2).attr('disabled', false); - } + handlerDisabled: function (el, el2, text) { + if ($(el).val() === text) { + $(el2).attr('disabled', true); + } else { + $(el2).attr('disabled', false); + } }, changeTransportType: function () { - let inpTypePassenger = this._selector.cargoItems.filter((d,i)=>i.value === 'passenger'); - this._selector.typeItems.off('change.i-disable').on('change.i-disable', (e)=>{ - this.handlerDisabled(e.target,inpTypePassenger,'avia') + let inpTypePassenger = this._selector.cargoItems.filter((d, i) => i.value === 'passenger'); + this._selector.typeItems.off('change.i-disable').on('change.i-disable', (e) => { + this.handlerDisabled(e.target, inpTypePassenger, 'avia'); }) }, + createInpCoutryData: function (el, data) { + el.dataCoutry?.remove(); + let template = + `
+ ${data[1]} + ${data[2] || 'BY'} +
`; + el.after(template); + el.dataCoutry = el.next('.poster__inp-country'); + el.parent().addClass('is-set') + }, + initHandlerItemsTowns: function (el) { el.list.off('click.item').on('click.item', (e) => { let target = $(e.target) - let item = target.hasClass('autocomplete-result') ? target : target.parents('.autocomplete-result') - let dataStr = item.data('attr') - if (!dataStr.length) return - dataStr = dataStr.slice(1, -1).replace(/"/g, ''); + let item = target.hasClass('poster__towns-item') ? target : target.parents('.poster__towns-item') + let data = item.data('attrs') + if (!data.length) return + let [id, txt] = data; + this.createInpCoutryData(el, data); - let [id, txt, name, date] = dataStr.split(', '); let inpNames = { - id: 'from_address_point', + id: 'from_city', txt: 'from_address_point_txt', - date: 'departure_DT' } - if (name.match(/to/)) { + if (el[0].name.match(/to/)) { inpNames = { - id: 'to_address_point', + id: 'to_city', txt: 'to_address_point_txt', - date: 'arrival_DT' } } const collection = this._selector.root[0].elements; collection[inpNames.id].value = id; collection[inpNames.txt].value = txt; - collection[inpNames.date].value = date; - this.handlerShowList(el) + this.handlerShowList(el); + el.prevValue = el.val(); }) }, setDataTowns: function (data, inp) { - if (!data.res_search_list.length) return - const newSearchlist = data.res_search_list.replace(/onmousedown=\'selectItemAddrPoint/g, 'data-attr=\'') + const newSearchlist = data.res_search_list; inp.list.html(newSearchlist); }, @@ -111,7 +130,7 @@ subtree: false, characterDataOldValue: false }); - }, + }, handlerShowList: function (i, isHide) { if (!isHide && i.list.text()) { @@ -127,16 +146,30 @@ return formData; }, + validForm: function () { + let elems = this._selector.root[0].elements + //todo пустые значения + elems.departure_DT.value = elems.departure_DT.value.trim() + if (!elems.departure_DT.value) { + elems.departure_DT.value = moment(new Date()).format(this._data.formatDate); + } + // console.log(elems.departure_DT.value.trim(), elems.departure_DT.value === '', elems.departure_DT.value, elems.departure_DT) + }, + initSubmit: function () { const _this = this; this._selector.root.off('submit').on('submit', function (e) { e.preventDefault(); + _this.validForm(); let routeId = _this._selector.submitBtn.data('routeId'); var formData = _this.getDataForm(); let url = '/routes/create_or_change_route/' if (routeId) { url = '/routes/change_route/' + routeId + '/' } + + if (_this.getDataForm(true)) + console.log(_this.getDataForm(true)) $.ajax({ headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()}, url: url, @@ -146,7 +179,7 @@ contentType: false, data: formData, success: function (data) { - return + // return let data_route_id = data.route_id document.querySelector(".info_profile").innerHTML = data.html @@ -154,7 +187,7 @@ if (routeId) { el_route = document.querySelector(`[data-number-of-route="${routeId}"]`); } - if(el_route) { + if (el_route) { el_route.scrollIntoView({ behavior: "smooth", block: 'start', @@ -172,6 +205,7 @@ window.history.replaceState(null, '', newUrl); }, error: function (data, exception) { + console.log(data) document.querySelector(".info_profile").innerHTML = data.responseJSON.html; document.getElementById('departure_DT')?.scrollIntoView({ behavior: "smooth", @@ -185,62 +219,71 @@ getTowns: function (el) { const _this = this; - let timer = null - if (timer) { - clearTimeout(timer); + let data = _this.getDataForm(true); + let getTownData = { + type_transport: data.type_transport, + search_str: el.val(), + ctrl_name: el.attr('name') } - timer = setTimeout(function () { - timer = null; - let data = _this.getDataForm(true); - let getTownData = { - type_transport: data.type_transport, - search_str: el.val(), - ctrl_name: el.attr('name') - } - $.ajax({ - headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()}, - url: '/reference_data/get_address_point/', - type: "POST", - cache: false, - processData: false, - contentType: false, - data: JSON.stringify(getTownData), - success: function (data) { - el.removeClass('loading'); - const {res_search_list, unanswered_msgs_count} = data; - _this.setDataTowns(data, el) - _this.initHandlerItemsTowns(el) - _this.handlerShowList(el) - if (res_search_list.length) { - el.addClass('is-items') - el.parent().addClass('is-items') - el.list.addClass('is-items') - } else { - el.parent().removeClass('is-items') - el.removeClass('is-items') - el.list.removeClass('is-items') - } - console.log('fetch', data) - }, - error: function (data) { - - console.log('Error') - + $.ajax({ + headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()}, + url: '/reference_data/get_address_point/', + type: "POST", + cache: false, + processData: false, + contentType: false, + data: JSON.stringify(getTownData), + success: function (data) { + el.removeClass('loading'); + const {res_search_list, unanswered_msgs_count} = data; + _this.setDataTowns(data, el) + _this.initHandlerItemsTowns(el) + _this.handlerShowList(el) + if (res_search_list.length) { + el.addClass('is-items') + el.parent().addClass('is-items') + el.list.addClass('is-items') + } else { + el.parent().removeClass('is-items') + el.removeClass('is-items') + el.list.removeClass('is-items') } - }); - }, 500); + console.log('fetch', data) + }, + error: function (data) { + + console.log('Error') + + } + }); }, handlerSearchTown: function (e, i) { this._cl('handlerSearchTown'); let el = i; + console.log('out', el.prevValue, el.val()) + if (el.prevValue && el.val().length < el.prevValue.length) { + el.parent().removeClass('is-set') + el.next('.poster__inp-country').remove() + console.log(el, `${el[0].name.split('_')[0]}_city`, this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`]) + this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`].value = '' + el.val(''); + } if (el.val().length > 2) { + console.log('in') + el.addClass('loading'); - this.getTowns(el); + + clearTimeout(el.timer) + el.timer = setTimeout(() => { + this.getTowns(el); + el.timer = null; + }, 500) } else { el.removeClass('loading'); } + el.prevValue = el.val(); }, initHandlerRoute: function () { @@ -249,8 +292,8 @@ [this._selector.inpFrom, this._selector.inpTo].forEach(i => { if (!i.length) return false i.off('input.routes').on('input.routes', (e) => _this.handlerSearchTown(e, i)); - i.off('click.routes').on('click.routes', () => _this.handlerShowList(i)); - i.list.off('mouseleave.routes').on('mouseleave.routes', () => _this.handlerShowList(i, true)); + i.parent().off('click.routes').on('click.routes', () => _this.handlerShowList(i)); + i.parent().parent().off('mouseleave.routes').on('mouseleave.routes', () => _this.handlerShowList(i, true)); }); }, @@ -267,15 +310,20 @@ initData: function (root) { window.posterApp = this; this._data = { - debug: true + debug: true, + formatDate: 'DD.MM.YYYY', + formatDateClient: window.location.href.includes("/ru/") + ? "D MMMM YYYY г." + : "MMMM D, YYYY", + }; this._selector = { root: root, wrapper: $('.info_profile'), inpFrom: root.find('#from'), - inpFromList: root.find('#from').siblings('.poster__towns-list'), + inpFromList: root.find('#from').parent().siblings('.poster__towns-list'), inpTo: root.find('#to'), - inpToList: root.find('#to').siblings('.poster__towns-list'), + inpToList: root.find('#to').parent().siblings('.poster__towns-list'), cargoItems: root.find('.cargo__inp[name="cargo_type"]'), typeItems: root.find('.cargo__inp[name="type_transport"]'), inpDeparture: root.find('#departure_DT'), @@ -296,10 +344,10 @@ this._cl(this); this.handlerPageOut(); this.initHandlerRoute(); - this.initDatePickerr() + this.initDatePickerr(); this.initSubmit(); this.changeCargoType(); - this.changeTransportType() + this.changeTransportType(); }, }; diff --git a/styles/create_poster/create_poster.scss b/styles/create_poster/create_poster.scss index d784484..91f7a3f 100644 --- a/styles/create_poster/create_poster.scss +++ b/styles/create_poster/create_poster.scss @@ -273,6 +273,36 @@ $row-gap: 40px; &__label { margin-bottom: 10px; + cursor: default; + } + + &__inp-box { + position: relative; + + &.is-set { + + .poster__locate { + padding-left: 65px; + } + } + + input { + + } + + .poster__inp-country { + position: absolute; + display: flex; + align-items: center; + left: 10px; + top: 50%; + gap: 5px; + transform: translateY(-50%); + + img { + width: 24px; + } + } } &__area-descr { @@ -320,8 +350,42 @@ $row-gap: 40px; } + &__towns-item { + display: flex; + align-items: center; + padding: 5px 5px; + font-size: 16px; + line-height: 22px; + cursor: pointer; + + &:hover { + background: var(--brand-grey); + } + + img { + width: 24px; + margin-right: 5px; + } + + span { + margin-right: 8px; + } + + } + &__locate { appearance: none; + + //&:not(:placeholder-shown) { + // padding-left: 65px; + //} + + //&:placeholder-shown { + // + // +.poster__inp-country { + // display: none; + // } + //} } .btn { diff --git a/templates/blocks/profile/b_create_form_poster.html b/templates/blocks/profile/b_create_form_poster.html index 0b04860..eaf8a96 100644 --- a/templates/blocks/profile/b_create_form_poster.html +++ b/templates/blocks/profile/b_create_form_poster.html @@ -27,9 +27,9 @@