diff --git a/AuthApp/views.py b/AuthApp/views.py index 4d5980a..681a2ce 100644 --- a/AuthApp/views.py +++ b/AuthApp/views.py @@ -111,11 +111,16 @@ def profile_page_View(request, page_name, id=None): page_html = get_profile_page_content_html(request, page_name, id) if not page_html: raise Http404 + if page_name == 'create_route_for_customer': + tag = 'tb_base2.html' + else: + tag = 'tb_base.html' Dict = { 'page_html': page_html, 'page_name': page_name, - 'page_type': 'profile' + 'page_type': 'profile', + 'tag': tag } if request.session and 'mailingSubscribeRequired' in request.session and request.session['mailingSubscribeRequired'] == 'true': diff --git a/RoutesApp/funcs.py b/RoutesApp/funcs.py index 5e0ba8f..548c500 100644 --- a/RoutesApp/funcs.py +++ b/RoutesApp/funcs.py @@ -107,7 +107,7 @@ def get_profile_new_route_page_html(request, data): # form.errors.append({'__all__': f'Ошибка: {str(e)}'}) print(str(e)) - html = render_to_string('blocks/profile/b_new_route.html', Dict, request=request) + html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request) return html diff --git a/TWB/settings.py b/TWB/settings.py index 3b989f3..77326a0 100644 --- a/TWB/settings.py +++ b/TWB/settings.py @@ -17,6 +17,8 @@ BASE_DIR = Path(__file__).resolve().parent.parent SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') CSRF_TRUSTED_ORIGINS = ['https://tripwb.com'] +# hide in production +#CSRF_TRUSTED_ORIGINS=["http://localhost:3000"] # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/ diff --git a/static/css/create_poster.css b/static/css/create_poster.css new file mode 100644 index 0000000..e2d0b75 --- /dev/null +++ b/static/css/create_poster.css @@ -0,0 +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__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}}@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}@media (max-width: 1319.98px){.poster__col:not(:last-child){margin-bottom:20px}}.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 .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/critical.css b/static/css/critical.css new file mode 100644 index 0000000..730877d --- /dev/null +++ b/static/css/critical.css @@ -0,0 +1 @@ +.container{margin:0 auto;max-width:1280px;position:relative;box-sizing:border-box}.container.black{background-color:#0088cc;height:200px;margin:0}@media (min-width: 1760px){.container{max-width:1720px}}@media (max-width: 1319.98px){.container{max-width:952px}}@media (max-width: 991.98px){.container{width:728px}}@media (max-width: 767.98px){.container{width:536px}}@media (max-width: 575.98px){.container{max-width:100vw;margin:0;padding:0 16px}}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}@media (min-width: 576px){.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width: 768px){.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width: 992px){.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}@media (min-width: 1320px){.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}}@media (min-width: 1760px){.col-xxl-12{width:100%}.col-xxl-11{width:91.66666667%}.col-xxl-10{width:83.33333333%}.col-xxl-9{width:75%}.col-xxl-8{width:66.66666667%}.col-xxl-7{width:58.33333333%}.col-xxl-6{width:50%}.col-xxl-5{width:41.66666667%}.col-xxl-4{width:33.33333333%}.col-xxl-3{width:25%}.col-xxl-2{width:16.66666667%}.col-xxl-1{width:8.33333333%}}:root{--brand-primary: #FF613A;--brand-white: #fff;--brand-black: #000;--brand-black2: #272424;--brand-grey: #F1F1F1;--brand-grey2: #E6E6E6;--brand-grey3: #7A7979;--brand-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198,199,203,0.2),0 -1px 10px 0 rgba(198,199,203,0.2);--base-border-radius: 10px;--base-border: 2.5px solid #E6E6E6;--base-input-height: 60px;text-align:center;color:var(--brand-black2)}html,body{max-width:100vw;max-height:initial;overflow-x:hidden}html{overflow:hidden}label{display:inline-block}label[required]:before{content:"*";color:var(--brand-primary)}input,textarea{outline:none;border:var(--base-border);border-radius:var(--base-border-radius);height:var(--base-input-height);width:100%;font-size:16px;line-height:22px;cursor:pointer;padding:10px 40px 10px 7px;box-sizing:border-box;max-width:100%}input.date,textarea.date{background:white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat}input.locate,textarea.locate{background:white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--brand-primary);color:var(--brand-white)} diff --git a/static/img/svg/Info3.svg b/static/img/svg/Info3.svg new file mode 100644 index 0000000..4ffcf68 --- /dev/null +++ b/static/img/svg/Info3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/svg/MapPinLine.svg b/static/img/svg/MapPinLine.svg new file mode 100644 index 0000000..e6aec51 --- /dev/null +++ b/static/img/svg/MapPinLine.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/styles/base/btn.scss b/styles/base/btn.scss new file mode 100644 index 0000000..82f402e --- /dev/null +++ b/styles/base/btn.scss @@ -0,0 +1,20 @@ +@import "variables"; + +.btn { + display: inline-flex; + text-decoration: none; + color: black; + line-height: 22px; + border-radius: 10px; + padding: 20px 76px 18px; + justify-content: center; + align-items: center; + margin: 0 3px; + letter-spacing: 0.2px; + font-size: 18px; +} + +.btn--primary { + background: var(--brand-primary); + color: var(--brand-white); +} \ No newline at end of file diff --git a/styles/base/cargo.scss b/styles/base/cargo.scss new file mode 100644 index 0000000..5627565 --- /dev/null +++ b/styles/base/cargo.scss @@ -0,0 +1,55 @@ +.cargo { + + &--inline { + display: inline-block; + margin-right: 33px; + } + + &--info { + label { + background: url(/static/img/svg/Info3.svg) right bottom 45% no-repeat; + background-size: 20px; + padding-right: 26px; + + @media (max-width: $screen-xs-max) { + padding-right: 20px; + } + } + } + + input { + width: 0; + height: 0; + display: none; + + &:checked { + + label::before { + background-color: var(--brand-primary); + border-color: var(--brand-primary); + } + } + } + + &__label { + display: flex; + align-items: center; + justify-content: left; + margin-bottom: 0; + + &: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; + } + } +} \ No newline at end of file diff --git a/styles/base/grid.scss b/styles/base/grid.scss new file mode 100644 index 0000000..bb16e47 --- /dev/null +++ b/styles/base/grid.scss @@ -0,0 +1,278 @@ +@import "variables"; + +.container { + margin: 0 auto; + max-width: $container-xl; //1280 + position: relative; + box-sizing: border-box; + + &.black { + background-color: #0088cc; + height: 200px; + margin: 0; + } +} + +@media (min-width: $screen-xxl-min) { + .container { + max-width: $container-xxl; //1720 + } +} + +@media (max-width: $screen-lg-max) { + .container { + max-width: $container-lg; //1720 + } +} + +@media (max-width: $screen-md-max) { + .container { + width: $container-md; + } +} + +@media (max-width: $screen-sm-max) { + .container { + width: $container-sm; + } +} + +@media (max-width: $screen-xs-max) { + .container { + max-width: 100vw; + margin: 0; + padding: 0 16px; + } +} + +.col-12 { + width: 100% +} +.col-11 { + width: 91.66666667% +} +.col-10 { + width: 83.33333333% +} +.col-9 { + width: 75% +} +.col-8 { + width: 66.66666667% +} +.col-7 { + width: 58.33333333% +} +.col-6 { + width: 50% +} +.col-5 { + width: 41.66666667% +} +.col-4 { + width: 33.33333333% +} +.col-3 { + width: 25% +} +.col-2 { + width: 16.66666667% +} +.col-1 { + width: 8.33333333% +} + +@media (min-width: $screen-sm-min) { + .col-sm-12 { + width: 100% + } + .col-sm-11 { + width: 91.66666667% + } + .col-sm-10 { + width: 83.33333333% + } + .col-sm-9 { + width: 75% + } + .col-sm-8 { + width: 66.66666667% + } + .col-sm-7 { + width: 58.33333333% + } + .col-sm-6 { + width: 50% + } + .col-sm-5 { + width: 41.66666667% + } + .col-sm-4 { + width: 33.33333333% + } + .col-sm-3 { + width: 25% + } + .col-sm-2 { + width: 16.66666667% + } + .col-sm-1 { + width: 8.33333333% + } +} + +@media (min-width: $screen-md-min) { + .col-md-12 { + width: 100% + } + .col-md-11 { + width: 91.66666667% + } + .col-md-10 { + width: 83.33333333% + } + .col-md-9 { + width: 75% + } + .col-md-8 { + width: 66.66666667% + } + .col-md-7 { + width: 58.33333333% + } + .col-md-6 { + width: 50% + } + .col-md-5 { + width: 41.66666667% + } + .col-md-4 { + width: 33.33333333% + } + .col-md-3 { + width: 25% + } + .col-md-2 { + width: 16.66666667% + } + .col-md-1 { + width: 8.33333333% + } +} + +@media (min-width: $screen-lg-min) { + .col-lg-12 { + width: 100% + } + .col-lg-11 { + width: 91.66666667% + } + .col-lg-10 { + width: 83.33333333% + } + .col-lg-9 { + width: 75% + } + .col-lg-8 { + width: 66.66666667% + } + .col-lg-7 { + width: 58.33333333% + } + .col-lg-6 { + width: 50% + } + .col-lg-5 { + width: 41.66666667% + } + .col-lg-4 { + width: 33.33333333% + } + .col-lg-3 { + width: 25% + } + .col-lg-2 { + width: 16.66666667% + } + .col-lg-1 { + width: 8.33333333% + } +} + +@media (min-width: $screen-xl-min) { + .col-xl-12 { + width: 100% + } + .col-xl-11 { + width: 91.66666667% + } + .col-xl-10 { + width: 83.33333333% + } + .col-xl-9 { + width: 75% + } + .col-xl-8 { + width: 66.66666667% + } + .col-xl-7 { + width: 58.33333333% + } + .col-xl-6 { + width: 50% + } + .col-xl-5 { + width: 41.66666667% + } + .col-xl-4 { + width: 33.33333333% + } + .col-xl-3 { + width: 25% + } + .col-xl-2 { + width: 16.66666667% + } + .col-xl-1 { + width: 8.33333333% + } +} + +@media (min-width: $screen-xxl-min) { + .col-xxl-12 { + width: 100% + } + .col-xxl-11 { + width: 91.66666667% + } + .col-xxl-10 { + width: 83.33333333% + } + .col-xxl-9 { + width: 75% + } + .col-xxl-8 { + width: 66.66666667% + } + .col-xxl-7 { + width: 58.33333333% + } + .col-xxl-6 { + width: 50% + } + .col-xxl-5 { + width: 41.66666667% + } + .col-xxl-4 { + width: 33.33333333% + } + .col-xxl-3 { + width: 25% + } + .col-xxl-2 { + width: 16.66666667% + } + .col-xxl-1 { + width: 8.33333333% + } +} diff --git a/styles/base/redefine.scss b/styles/base/redefine.scss new file mode 100644 index 0000000..a69ae22 --- /dev/null +++ b/styles/base/redefine.scss @@ -0,0 +1,44 @@ +@import "variables"; + +header { + padding-left: 0; + padding-right: 0; +} + +footer { + overflow: hidden; +} + +.wrapper_header_content { + max-width: initial; +} + +@media only screen and (max-width: $screen-xl-max) { + + section.profile { + width: 100%; + } + + .info_profile { + width: 100%; + } +} + +@media (max-width: $screen-sm-max) { + + .menu_buttons.right.open { + right: 0; + transition: 200ms; + position: fixed; + display: block; + padding-top: 0; + top: 45px; + background: #ffffff; + } +} + +@media (max-width: $screen-sm-max) { + .menu_buttons.right.open { + //display: none; + } +} diff --git a/styles/base/typograph.scss b/styles/base/typograph.scss new file mode 100644 index 0000000..3be70de --- /dev/null +++ b/styles/base/typograph.scss @@ -0,0 +1,67 @@ +@import "variables"; + +:root { + --brand-primary: #{$brand-primary}; + --brand-white: #{$brand-white}; + --brand-black: #{$brand-black}; + --brand-black2: #{$brand-black2}; + --brand-grey: #{$brand-grey}; + --brand-grey2: #{$brand-grey2}; + --brand-grey3: #{$brand-grey3}; + --brand-orange: #{$brand-orange}; + + --box-shadow-primary: #{$box-shadow-primary}; + + --base-border-radius: #{$base-border-radius}; + --base-border: #{$base-border}; + --base-input-height: #{$base-input-height}; + + + text-align: center; + color: var(--brand-black2); +} + +html, +body { + max-width: 100vw; + max-height: initial; + overflow-x: hidden; +} + +html { + overflow: hidden; +} + +label { + display: inline-block; + + &[required] { + + &:before { + content: "*"; + color: var(--brand-primary); + } + } +} + +input, textarea { + outline: none; + border: var(--base-border); + border-radius: var(--base-border-radius); + height: var(--base-input-height); + width: 100%; + font-size: 16px; + line-height: 22px; + cursor: pointer; + padding: 10px 40px 10px 7px; + box-sizing: border-box; + max-width: 100%; + + &.date { + background: white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat; + } + + &.locate { + background: white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat; + } +} diff --git a/styles/base/variables.scss b/styles/base/variables.scss new file mode 100644 index 0000000..c0f3f1e --- /dev/null +++ b/styles/base/variables.scss @@ -0,0 +1,56 @@ +//================================================================================// +//================================== grid ========================================// +//================================================================================// + +$grid-columns: 12; + +//$grid-gutter-width: 20px; + +// media breakpoints +$screen-xxl-min: 1760px;//* +$container-xxl: 1720px;//* + +$screen-xl-min: 1320px; +$container-xl: 1280px; +$screen-xl-max: ($screen-xl-min - .02); + +$screen-lg-min: 992px; +$container-lg: 952px; +$screen-lg-max: ($screen-xl-min - .02); + +$screen-md-min: 768px; +$container-md: 728px; +$screen-md-max: ($screen-lg-min - .02); + +$screen-sm-min: 576px; +$container-sm: 536px; +$screen-sm-max: ($screen-md-min - .02); + +$screen-xs-min: 0; +$screen-xs-max: ($screen-sm-min - .02); + +//================================================================================// +//================================= colors =======================================// +//================================================================================// +$brand-primary: #FF613A; +$brand-white: #FFFFFF; +$brand-black: #000000; +$brand-black2: #272424; +$brand-grey: #F1F1F1; +$brand-grey2: #E6E6E6; +$brand-grey3: #7A7979; +$brand-orange: #FF613A; + + +//================================================================================// +//================================ Shadow ========================================// +//================================================================================// +$box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), + 0 -1px 10px 0 rgba(198, 199, 203, 0.20); + +//================================================================================// +//================================ Inputs ========================================// +//================================================================================// +$base-border-radius: 10px; +$base-border: 2.5px solid $brand-grey2; +$base-input-height: 60px; diff --git a/styles/create_poster.scss b/styles/create_poster.scss new file mode 100644 index 0000000..8666f2e --- /dev/null +++ b/styles/create_poster.scss @@ -0,0 +1,4 @@ +@import "./base/variables"; +@import "./base/cargo"; +@import "./base/redefine"; +@import "./create_poster/create_poster"; diff --git a/styles/create_poster/create_poster.scss b/styles/create_poster/create_poster.scss new file mode 100644 index 0000000..530d740 --- /dev/null +++ b/styles/create_poster/create_poster.scss @@ -0,0 +1,307 @@ +@import "../base/variables"; + +.poster { + text-align: left; + box-sizing: border-box; + padding-top: 31px; + + @media (max-width: $screen-lg-max) { + max-width: 65%; + } + + @media (max-width: $screen-md-max) { + max-width: 55%; + } + + @media (max-width: $screen-sm-max) { + max-width: 100%; + } + + @media (max-width: $screen-xs-max) { + padding-top: 44px; + } + + &__title { + max-width: 95%; + margin: 0 auto 5px; + font-size: 44px; + font-weight: 700; + line-height: 52px; + text-align: center; + + @media (min-width: $screen-xl-min) { + max-width: 100%; + margin-bottom: 21px; + } + + @media (max-width: $screen-lg-max) { + font-size: 32px; + line-height: 38.73px; + margin-bottom: 0; + } + + @media (max-width: $screen-xs-max) { + max-width: 100%; + } + } + + &__row { + display: flex; + padding: 40px 0; + border-bottom: 1px solid #E6E6E6; + gap: 40px; + + @media (min-width: $screen-xl-min) { + padding: 39px 0; + } + + @media (max-width: $screen-lg-max) { + display: block; + } + + + &--from-to { + + @media (max-width: $screen-md-max) { + padding-top: 14px + } + + @media (max-width: $screen-sm-max) { + padding-top: 30px; + } + + @media (max-width: $screen-xs-max) { + padding-top: 40px; + } + + + label { + padding-left: 9px; + + @media (max-width: $screen-lg-max) { + padding-left: 0; + } + + @media (max-width: $screen-md-max) { + padding-left: 11px; + } + } + } + + &--cargo { + @media (max-width: $screen-xs-max) { + padding-bottom: 29px; + } + } + + &--date { + @media (max-width: $screen-lg-max) { + padding-bottom: 20px; + } + + label { + padding-left: 9px; + + @media (max-width: $screen-lg-max) { + margin-bottom: 20px; + } + + @media (max-width: $screen-xs-max) { + padding-left: 0; + } + } + } + + &--transport { + + @media (max-width: $screen-lg-max) { + padding-bottom: 50px; + } + + @media (max-width: $screen-md-max) { + padding-bottom: 39px; + } + + @media (max-width: $screen-xs-max) { + padding-top: 42px; + } + + + label { + margin-bottom: 20px; + + @media (max-width: $screen-xs-max) { + margin-bottom: 19px; + } + } + } + + &--phone { + + @media (max-width: $screen-lg-max) { + padding-top: 29px; + } + + @media (max-width: $screen-md-max) { + padding-top: 38px; + } + + @media (max-width: $screen-xs-max) { + padding-top: 40px; + padding-bottom: 39px; + } + + label { + padding-left: 9px; + margin-bottom: 11px; + + @media (max-width: $screen-lg-max) { + padding-left: 0; + margin-bottom: 20px; + } + } + + input { + margin-bottom: 21px; + } + } + + &--description { + + @media (max-width: $screen-md-max) { + padding-top: 30px; + } + + @media (max-width: $screen-xs-max) { + padding-top: 39px; + } + + label { + padding-left: 9px; + margin-bottom: 10px; + + @media (max-width: $screen-lg-max) { + padding-left: 0; + margin-bottom: 20px; + } + } + + textarea { + min-height: 128px; + padding-top: 18px; + margin-bottom: 3px; + + @media (max-width: $screen-lg-max) { + min-height: 210px; + margin-bottom: 6px; + } + + @media (max-width: $screen-md-max) { + min-height: 305px; + } + } + } + + &--distribution { + border-bottom: 0; + + @media (max-width: $screen-lg-max) { + padding-bottom: 30px; + } + + @media (max-width: $screen-md-max) { + padding-top: 38px; + padding-bottom: 40px; + } + + label { + letter-spacing: -0.08px; + } + } + } + + &__col { + flex: 1; + + @media (max-width: $screen-lg-max) { + &:not(:last-child) { + + margin-bottom: 20px; + } + } + } + + &__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + + @media (min-width: $screen-xl-min) { + max-width: 80%; + margin-bottom: 37px; + } + + @media (max-width: $screen-lg-max) { + grid-template-columns: repeat(auto-fill, 261px); + } + + label { + margin-bottom: 0; + padding-top: 10px; + padding-bottom: 10px; + } + } + + &__info { + padding-left: 30px; + background: url(/static/img/svg/Info3.svg) left top no-repeat; + line-height: 22px; + + @media (max-width: $screen-lg-max) { + font-size: 12px; + line-height: 20px; + max-width: 90%; + } + } + + &__label { + margin-bottom: 10px; + } + + &__area-descr { + text-align: right; + font-size: 14px; + line-height: 20px; + padding-right: 11px; + color: var(--brand-grey3); + + @media (max-width: $screen-sm-max) { + padding-right: 0; + } + } + + &__errors { + + @media (max-width: $screen-lg-max) { + margin-bottom: 2px; + } + } + + .btn { + margin: 0; + + @media (max-width: $screen-xs-max) { + padding-left: 5px; + padding-right: 5px; + } + } + + .cargo { + + &--inline { + + @media (max-width: $screen-sm-max) { + width: 100%; + } + } + } +} diff --git a/styles/critical.scss b/styles/critical.scss new file mode 100644 index 0000000..800bcae --- /dev/null +++ b/styles/critical.scss @@ -0,0 +1,4 @@ +@import "./base/variables"; +@import "./base/grid"; +@import "./base/typograph"; +@import "./base/btn"; diff --git a/styles/moover/animate.scss b/styles/moover/animate.scss index 9d05777..fb4862e 100644 --- a/styles/moover/animate.scss +++ b/styles/moover/animate.scss @@ -1,7 +1,7 @@ .animate { padding: 60px 40px 49px; opacity: 0; - background-color: var(--color-black2); + background-color: var(--brand-black2); border-radius: 30px; color: white; margin-bottom: 160px; diff --git a/styles/moover/cards.scss b/styles/moover/cards.scss index a1fbb4c..7175224 100644 --- a/styles/moover/cards.scss +++ b/styles/moover/cards.scss @@ -94,7 +94,7 @@ } a { - color: var(--color-orange); + color: var(--brand-orange); } } diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss index c04e44e..05587c9 100644 --- a/styles/moover/chatterbox.scss +++ b/styles/moover/chatterbox.scss @@ -157,7 +157,7 @@ display: flex; align-items: center; justify-content: center; - background: var(--color-primary); + background: var(--brand-primary); border: 0; border-radius: 50%; transition: opacity 100ms linear; diff --git a/styles/moover/easy.scss b/styles/moover/easy.scss index c03fa48..0757d66 100644 --- a/styles/moover/easy.scss +++ b/styles/moover/easy.scss @@ -82,7 +82,7 @@ &__item { border-radius: 30px; - background-color: var(--color-grey); + background-color: var(--brand-grey); /*background-color: #a72525;*/ text-align: left; padding: 21px; diff --git a/styles/moover/header.scss b/styles/moover/header.scss index d65f0c9..15b782c 100644 --- a/styles/moover/header.scss +++ b/styles/moover/header.scss @@ -18,7 +18,7 @@ padding-top: 7px; padding-bottom: 7px; box-shadow: var(--box-shadow-primary); - border-bottom: 1px solid var(--color-grey); + border-bottom: 1px solid var(--brand-grey); } &__grid, diff --git a/styles/moover/root.scss b/styles/moover/root.scss index 860ab84..f3b8f2a 100644 --- a/styles/moover/root.scss +++ b/styles/moover/root.scss @@ -33,19 +33,19 @@ } :root { - --color-primary: #FF613A; - --color-white: #FFFFFF; - --color-black: #000000; - --color-black2: #272424; - --color-grey: #F1F1F1; - --color-grey2: #7A7979; - --color-orange: #FF613A; + --brand-primary: #FF613A; + --brand-white: #FFFFFF; + --brand-black: #000000; + --brand-black2: #272424; + --brand-grey: #F1F1F1; + --brand-grey3: #7A7979; + --brand-orange: #FF613A; --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20); text-align: center; - color: var(--color-black2); + color: var(--brand-black2); } html, diff --git a/styles/moover/use.scss b/styles/moover/use.scss index 4c96f53..f395197 100644 --- a/styles/moover/use.scss +++ b/styles/moover/use.scss @@ -56,7 +56,7 @@ font-size: 18px; font-weight: 600; line-height: 26px; - color: var(--color-grey2); + color: var(--brand-grey3); } .title { diff --git a/templates/blocks/profile/b_create_form_poster.html b/templates/blocks/profile/b_create_form_poster.html new file mode 100644 index 0000000..592d82c --- /dev/null +++ b/templates/blocks/profile/b_create_form_poster.html @@ -0,0 +1,200 @@ +{% load static %} +{% load i18n %} +{% trans "300" as maxLetterLength %} + +{% if owner_type == 'customer' %} + {% trans "Заполните форму, чтобы отправить посылку" as p_title %} +{% elif owner_type == 'mover' %} + {% trans "Заполните форму, чтобы перевезти посылку" as p_title %} +{% endif %} + + + + +
+

{{ p_title }}

+ + +
+ {% csrf_token %} + {#from-to#} +
+
+ + +
+
+ + +
+
+ {#cargo-type#} +
+
+ +
+ + {% for item in form.fields.cargo_type.choices %} +
+ + + +
+ {% endfor %} +
+
+
+ {#date-poster#} +
+
+ + + +
+
+
+ {#type-transport#} +
+
+ + + {% for item in form.fields.type_transport.choices %} +
+ + +
+ {% endfor %} +
+ +
+
+ {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %} +
+
+
+ {#phone#} +
+
+ + + +
+ {% translate "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" %} +
+
+
+ {#description#} +
+
+ + + +
+ 0 + {% translate "из" %} + {{ maxLetterLength }} + {% translate "символов" %} +
+
+
+ {#distribution#} +
+
+ + + + +
+ + + + {% if not errors_off and form.errors and form.errors.receive_msg_by_email %} + {{ form.errors.receive_msg_by_email }} + {% endif %} +
+ + + +
+
diff --git a/templates/pages/profile/p_user_profile.html b/templates/pages/profile/p_user_profile.html index d2d92d5..ab02770 100644 --- a/templates/pages/profile/p_user_profile.html +++ b/templates/pages/profile/p_user_profile.html @@ -1,4 +1,4 @@ -{% extends 'tb_base.html' %} +{% extends tag %} {% load static %} {% load i18n %} diff --git a/templates/tb_base2.html b/templates/tb_base2.html new file mode 100644 index 0000000..6d72397 --- /dev/null +++ b/templates/tb_base2.html @@ -0,0 +1,172 @@ +{% load static %} +{% load tt_chat %} +{% load i18n %} +{% load webpush_notifications %} + + + + + + + {% if page.description %} + + {% else %} + {% block default_meta_description %}{% endblock %} + {% endif %} + + {% webpush_header %} + + + + {% include "inter/meta_OpenGraph_Schema.html" %} + + + + + + + {% if page.title %} + {{ page.title }} + {% else %} + {% block title %}{% endblock %} + {% endif %} + + + {% include "inter/meta_names.html" %} + + + + + + + + + + + {% if user and not user.is_anonymous %} + {% include "connect_ws_js.html" %} + + + + {% endif %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% block meta %} + {% endblock %} + + + + +
+
+ +
+ + {# header#} + {% include 'blocks/b_header.html' %} + + {#aside#} +
+
"> + + {% include "blocks/profile/b_buttons_menu_profile.html" %} +
+ +
+ +
+
+
+
+ + {#content#} + {% block content %} + {% endblock %} + +
+ +
+ +{#footer#} +{% include 'blocks/b_footer.html' %} + +{#before_close#} + +{% block before_close %} +{% endblock %} + + \ No newline at end of file