From 8c203875b8008db9533efdb39a4ae2c656781de5 Mon Sep 17 00:00:00 2001 From: artwebUser Date: Mon, 25 Nov 2019 10:18:27 +0200 Subject: [PATCH] add form legal, change contact page phones --- common/messages/ru/app.php | 2 ++ common/messages/ua/app.php | 3 ++- frontend/assets/AppAsset.php | 1 + frontend/views/site/contact.php | 12 +++++++----- frontend/views/site/legal.php | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- frontend/web/css/new-style/_contacts.scss | 27 +++++++++++++++++++++++++++ frontend/web/css/new-style/_inputs.scss | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ frontend/web/css/new-style/_legal.scss | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ frontend/web/css/new-style/_mixin.scss | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ frontend/web/css/new-style/_radio-check.scss | 227 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ frontend/web/css/new-style/new.scss | 7 +++++++ frontend/web/css/style.blue.css | 3 ++- frontend/web/img/mail-ico-form.svg | 26 ++++++++++++++++++++++++++ frontend/web/img/phone-ico-form.svg | 19 +++++++++++++++++++ 14 files changed, 741 insertions(+), 8 deletions(-) create mode 100644 frontend/web/css/new-style/_contacts.scss create mode 100644 frontend/web/css/new-style/_inputs.scss create mode 100644 frontend/web/css/new-style/_legal.scss create mode 100644 frontend/web/css/new-style/_mixin.scss create mode 100644 frontend/web/css/new-style/_radio-check.scss create mode 100644 frontend/web/css/new-style/new.scss create mode 100644 frontend/web/img/mail-ico-form.svg create mode 100644 frontend/web/img/phone-ico-form.svg diff --git a/common/messages/ru/app.php b/common/messages/ru/app.php index 41091b4..8aaa566 100755 --- a/common/messages/ru/app.php +++ b/common/messages/ru/app.php @@ -334,5 +334,7 @@ return [ 'wrongName'=>'Имя может состоять только из латинских или кириллических символов', 'requiredField'=>'Данное поле является обязательным для заполнения', 'cookie-text' => 'На нашем сайте используются файлы cookie. Пожалуйста, ознакомьтесь с политикой о конфиденциальности', + 'ContactPhoneInd' => 'Контактный телефон для физ лиц', + 'ContactPhoneLegal' => 'Контактный телефон для юр лиц', ]; \ No newline at end of file diff --git a/common/messages/ua/app.php b/common/messages/ua/app.php index 5411021..e3c524b 100755 --- a/common/messages/ua/app.php +++ b/common/messages/ua/app.php @@ -337,5 +337,6 @@ return [ 'requiredField'=>'Дане поле є обов\'язковим для заповнення', 'cookie-text' => 'На нашому сайті використовуються файли cookie. Будь ласка, ознайомтесь з політикою конфіденційності', - + 'ContactPhoneInd' => 'Контактний телефон для фіз осіб', + 'ContactPhoneLegal' => 'Контактний телефон для юр осіб', ]; \ No newline at end of file diff --git a/frontend/assets/AppAsset.php b/frontend/assets/AppAsset.php index 83327b8..fae0931 100644 --- a/frontend/assets/AppAsset.php +++ b/frontend/assets/AppAsset.php @@ -22,6 +22,7 @@ 'css/custom.css', 'css/main.css', 'css/scroll.css', + 'css/new-style/new.css', ]; public $js = [ 'js/jquery.cookie.js', diff --git a/frontend/views/site/contact.php b/frontend/views/site/contact.php index a721b1d..1d6da2c 100755 --- a/frontend/views/site/contact.php +++ b/frontend/views/site/contact.php @@ -87,17 +87,19 @@ JS;

-

-

+

+

phone), 'tel:' . $settings->phone); ?> -

-

+ phone2), 'tel:' . $settings->phone2); + echo Html::a(Html::tag('strong', $settings->phone2), 'tel:' . $settings->phone2); ?>

+ +

+

+38(067)326-38-81

registerJs($js, View::POS_END);
-
+
+
+
+
+38 067 326 38 81
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+ +
+
+ +
+ + +
diff --git a/frontend/web/css/new-style/_contacts.scss b/frontend/web/css/new-style/_contacts.scss new file mode 100644 index 0000000..9ddf53a --- /dev/null +++ b/frontend/web/css/new-style/_contacts.scss @@ -0,0 +1,27 @@ +.phones-ind { + a { + padding-left: 8px; + &:first-child { + padding-left: 0; + padding-right: 8px; + } + } +} + +.text-legal-phone { + margin-top: 26px; +} +#contact { + .text-muted { + margin-bottom: 9px; + } +} + +@media (max-width: 767px) { + .phones-ind { + a { + padding: 0 !important; + } + } + +} \ No newline at end of file diff --git a/frontend/web/css/new-style/_inputs.scss b/frontend/web/css/new-style/_inputs.scss new file mode 100644 index 0000000..91ea1c9 --- /dev/null +++ b/frontend/web/css/new-style/_inputs.scss @@ -0,0 +1,78 @@ +$inputs-border:#cccccc; +$requiredColor:#f26522; +.legal-form { + input { + width: 100%; + float: left; + outline: none!important; + height: 42px; + background: #fff; + border: 1px solid $inputs-border; + padding-left: 8px; + margin-top: 6px; + resize: none; + box-shadow: none; + &:focus { + box-shadow: 2px 3px 4px 0px rgba(238, 238, 238, 0.75) inset; + @include Transition(0.2); + } + } + textarea { + @extend input; + padding-top: 8px; + min-height: 82px; + max-height: 82px; + max-width: 100%; + } + select { + @extend input; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #fff url(../images/select-arrow.png) 98% 50% no-repeat !important; + } +button { + outline: none !important; +} + label { + margin: 19px 0 0 0; + float: left; + font-size: 17px; + font-weight: 300; + font-family: "Roboto"; + } + .has-error { + input, textarea, select { + border: 1px solid $requiredColor !important; + } + } + .required label { + position: relative; + &:before { + display: block; + content: "*"; + color: $requiredColor !important; + position: absolute; + top: 5px; + right: -7px; + font-size: 14px; + //font-family: Arial !important; + } + } + .help-block { + display: none; + width: 100%; + float: left; + font-size: 13px; + color: #888; + margin-top: 5px; + } +} + +@media (max-width: 767px) { + .legal-form { + label { + font-size: 16px; + } + } +} diff --git a/frontend/web/css/new-style/_legal.scss b/frontend/web/css/new-style/_legal.scss new file mode 100644 index 0000000..a938407 --- /dev/null +++ b/frontend/web/css/new-style/_legal.scss @@ -0,0 +1,141 @@ +.legal-form-wrapp { + box-shadow: 0px 0px 24px 0px rgba(233, 233, 233, 0.75); + padding: 28px 0 32px 0; + margin-bottom: 65px; + text-align: center; + margin-top: 41px; +} +.legal-form { + width: 780px; + max-width: 100%; + display: inline-block; + vertical-align: top; + text-align: left; + form { + margin-top: 4px; + @include dInline; + width: 100%; + } +} + +.legal-input { + float: left; + width: 50%; + padding: 0 15px; + label { + color: #467fbf; + } +} +.legal-area { + @include wfl; + padding: 0 15px; + margin-top: 7px; + label { + color: #467fbf; + } +} + +.legal-input-wrapp { + @include wfl; +} +.legal-radio-wrapp { + padding: 0 15px; + margin-top: 17px; + @include wfl; + .radio_custom { + margin-top: 12px; + } +} + +.legal-button-wrapp { + padding: 0 15px; + margin-top: 32px; + @include wfl; + text-align: center; + button { + @include dInline; + max-width: 100%; + width: 214px; + height: 42px; + background: #fff; + line-height: 42px; + border: 1px solid #467fbf; + padding: 0 0 0 0; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + cursor: pointer; + color: #467fbf; + @include Transition(0.2); + &:hover { + background: #467fbf; + color: #fff; + } + &:active { + background: #3f74ad; + border: 1px solid #3f74ad; + color: #fff; + } + } +} + +.legal-form-contacts { + @include wfl; + padding: 0 15px; + div { + float: left; + margin-top: 4px; + + span, a { + position: relative; + font-size: 17px; + line-height: 24px; + text-decoration: none !important; + padding-left: 22px; + color: #555555; + display: block; + font-family: "Helvetica"; + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + } + &.phone { + &:before { + width: 14px; + height: 24px; + background: url("../../img/phone-ico-form.svg"); + background-position: 50% 50%; + background-size: 14px 24px; + background-repeat: no-repeat; + } + } + &.mail { + padding-left: 31px; + + &:before { + width: 24px; + height: 24px; + background: url("../../img/mail-ico-form.svg"); + background-position: 50% 50%; + background-size: 24px 20px; + background-repeat: no-repeat; + } + } + } + &:first-child { + padding-right: 47px; + } + } +} + +@media (max-width: 550px) { + .legal-form-contacts div { + padding-right: 0; + width: 100%; + } + .legal-input { + width: 100%; + } +} \ No newline at end of file diff --git a/frontend/web/css/new-style/_mixin.scss b/frontend/web/css/new-style/_mixin.scss new file mode 100644 index 0000000..d229a59 --- /dev/null +++ b/frontend/web/css/new-style/_mixin.scss @@ -0,0 +1,143 @@ +@mixin ArrowMenu($wid,$hei) { + width: $wid + px; + height: $hei + px; + background: url("../images/ico-all/arrow-down.png") 50% 50% no-repeat; + content: ''; + position: absolute; + top: 50%; + margin-top: -($hei/2) +px; + @include Transition(0.3) +} +@mixin Transition($time){ + transition: $time + s; + -webkit-transition: $time + s; + -moz-transition: $time + s; + -ms-transition: $time + s; + -o-transition: $time + s; +} +@mixin Scale($size){ + transform: scale($size); + -webkit-transform: scale($size); + -moz-transform: scale($size); + -ms-transition: scale($size); + -o-transform: scale($size); +} +@mixin Rotate($deg){ + transform: rotate($deg + deg); + -webkit-transform: rotate($deg + deg); + -moz-transform: rotate($deg + deg); + -ms-transform: rotate($deg + deg); + -o-transform: rotate($deg + deg); +} +@mixin Opacity($opacity) { + $IEValue: $opacity*100; + opacity: $opacity; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")"; + filter: alpha(opacity=$IEValue); +} +@mixin Bradius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + border-radius: $radius; +} + +@mixin Auto($wi) { + margin: { + left: auto; + right: auto; + } + float:none; + display: block; + width:$wi + px; +} + +@mixin Gradient-horisontal($from-color, $to-color){ + background: $from-color; + background: -moz-linear-gradient(left, $from-color 0%, $to-color 100%); + background: -webkit-linear-gradient(left, $from-color 0%, $to-color 100%); + background: linear-gradient(to right, $from-color 0%, $to-color 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=1 ); +} + +@mixin Gradient-vertical($from-color, $to-color){ + background: $from-color; + background: -moz-linear-gradient(top, $from-color 0%, $to-color 100%); + background: -webkit-linear-gradient(top, $from-color 0%, $to-color 100%); + background: linear-gradient(to bottom, $from-color 0%, $to-color 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=1 ); +} + +@mixin Gradient-diagonal-bottom($from-color, $to-color){ + background: $from-color; + background: -moz-linear-gradient(-45deg, $from-color 0%, $to-color 100%); + background: -webkit-linear-gradient(-45deg, $from-color 0%, $to-color 100%); + background: linear-gradient(135deg, $from-color 0%, $to-color 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=1 ); +} + +@mixin Gradient-diagonal-up($from-color, $to-color){ + background: $from-color; + background: -moz-linear-gradient(45deg, $from-color 0%, $to-color 100%); + background: -webkit-linear-gradient(45deg, $from-color 0%, $to-color 100%); + background: linear-gradient(45deg, $from-color 0%, $to-color 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=1 ); +} + +@mixin Gradient-radial($from-color, $to-color){ + background: $from-color; + background: -moz-radial-gradient(center, ellipse cover, $from-color 0%, $to-color 100%); + background: -webkit-radial-gradient(center, ellipse cover, $from-color 0%,$to-color 100%); + background: radial-gradient(ellipse at center, $from-color 0%,$to-color 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=1 ); +} + +@mixin BgNoRepeat0 { + background-repeat: no-repeat; + background-position: 0 0; +} +@mixin BgNoRepeat50 { + background-repeat: no-repeat; + background-position: 50% 50%; +} + +@mixin filter-gray($pre) { + filter: url("data:image/svg+xml;utf8,#grayscale"); + filter: gray; + -webkit-filter: grayscale($pre); + -ms-filter: grayscale($pre); + -o-filter: grayscale($pre); + -moz-filter: grayscale($pre); +} +@mixin contrast($pre) { + -webkit-filter: contrast($pre); + filter: contrast($pre); + -ms-filter: contrast($pre); + -o-filter: contrast($pre); + -moz-filter: contrast($pre); +} +@mixin filter-blur($pre) { + + filter: blur($pre + px); + -webkit-filter: blur($pre + px); + -ms-filter: blur($pre + px); + -o-filter: blur($pre + px); + -moz-filter: blur($pre + px); + filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=$pre); +} +@mixin filter-none { + filter: none; + -webkit-filter: none; + -o-filter: none; + -moz-filter: none; + -ms-filter: none; +} +@mixin wfl { + width: 100%; + float: left; +} + +@mixin dInline { + display: inline-block; + vertical-align: top; +} diff --git a/frontend/web/css/new-style/_radio-check.scss b/frontend/web/css/new-style/_radio-check.scss new file mode 100644 index 0000000..1ecfe69 --- /dev/null +++ b/frontend/web/css/new-style/_radio-check.scss @@ -0,0 +1,227 @@ +$chekRadioColors: #dddddd; + +$checkRadioBg:#fff; +$checkTextColor: red; + + +.sidebar_checks, .radio_custom { + width: 100%; + float: left; + $LabelWidth: 12; + $LabelHeight: 12; + margin-top: 0px; + label { + + + } + input { + display: none; + + + label { + margin: 0; + font-size: 17px; + text-transform: none; + //color: $checkTextColor !important; + position: relative; + padding-left: 21px; + cursor: pointer; + line-height: 19px; + &:before { + position: absolute; + content: ''; + width: $LabelWidth + px; + height: $LabelHeight + px; + top: -1px; + left: 0; + background: $checkRadioBg; + border: 1px solid $chekRadioColors; + cursor: pointer; + } + a { + text-decoration: none !important; + padding-left: 0; + float: none; + &:before { + display: none; + } + } + + } + + + + &:hover { + + label { + &:before { + //border-color:$primary-color-hover; + + } + a { + //color: $primary-color-hover; + } + } + } + + &:active { + + label { + &:before { + //border-color:$primary-color-active; + + } + a { + //color: $primary-color-active; + } + } + } + + &:checked { + + + label { + + &:before { + //background: $primary-color; + //border: 1px solid $primary-color; + //@include svgIcon; + content: "\e909"; + color: red; + font-size: 6px; + text-align: center; + line-height: 15px; + font-weight: 700; + padding-left: 1px; + } + } + a { + } + } + + + &[disabled="disabled"]{ + + label { + &:before { + cursor: default; + border-color: #ddd !important; + background: #ddd !important; + //color: $main-color !important; + } + } + } + } + + a { + line-height: 16px; + font-size: 15px; + color: $checkTextColor; + position: relative; + padding-left: 30px; + cursor: pointer; + text-decoration: none !important; + float: left; + &:before { + position: absolute; + content: ''; + width: $LabelWidth + px; + height: $LabelHeight + px; + top: -1px; + left: 0; + background: $checkRadioBg; + border: 1px solid $chekRadioColors; + cursor: pointer; + } + p { + display: inline-block; + font-size: 13px; + color: #858585; + margin-left: 5px; + &.disabled { + @include Opacity(0.5); + } + } + &:hover { + + } + } +} + +.radio_custom { + input { + + label { + + color: #777777; + padding-left: 21px; + + &:before { + top: 3px; + border-radius: 100%; + border-top: 1px solid $chekRadioColors !important; + border-bottom: 1px solid $chekRadioColors !important; + border-right: 1px solid $chekRadioColors !important; + border-left: 1px solid $chekRadioColors !important; + } + + + } + + &:checked { + + + label { + + &:before { + background: none; + //border-top: 1px solid $link-color !important; + //border-bottom: 1px solid $link-color !important; + //border-right: 1px solid $link-color !important; + //border-left: 1px solid $link-color !important; + content: ''; + } + + &:after { + position: absolute; + content: ''; + width: 6px; + height: 6px; + top: 6px; + left: 3px; + background: #467fbf; + border-radius: 100%; + } + } + } + } + +} + + +.checked { + a { + &:before { + //background: $primary-color; + //border: 1px solid $primary-color; + //@include svgIcon; + content: "\e909"; + color: red; + font-size: 6px; + text-align: center; + line-height: 15px; + font-weight: 700; + padding-left: 1px; + } + } +} + + + + +@media (max-width: 992px) { + +} + +@media (max-width: 767px) { + .sidebar_checks, .radio_custom { + input { + + label { + font-size: 16px; + } + } + } +} diff --git a/frontend/web/css/new-style/new.scss b/frontend/web/css/new-style/new.scss new file mode 100644 index 0000000..428dada --- /dev/null +++ b/frontend/web/css/new-style/new.scss @@ -0,0 +1,7 @@ +@import "mixin"; +@import "radio-check"; +@import "inputs"; + + +@import "legal"; +@import "contacts"; \ No newline at end of file diff --git a/frontend/web/css/style.blue.css b/frontend/web/css/style.blue.css index 1a6feca..88ba79c 100755 --- a/frontend/web/css/style.blue.css +++ b/frontend/web/css/style.blue.css @@ -602,7 +602,8 @@ ul.list-style-none { position: fixed; width: 100%; top: 0; - z-index: 1000; + /*z-index: 1000;*/ + z-index: 99999; -webkit-box-shadow: 0 0 5px #cccccc; box-shadow: 0 0 5px #cccccc; -webkit-transition: all 0.5s ease-out; diff --git a/frontend/web/img/mail-ico-form.svg b/frontend/web/img/mail-ico-form.svg new file mode 100644 index 0000000..8b6ece0 --- /dev/null +++ b/frontend/web/img/mail-ico-form.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + diff --git a/frontend/web/img/phone-ico-form.svg b/frontend/web/img/phone-ico-form.svg new file mode 100644 index 0000000..516f70c --- /dev/null +++ b/frontend/web/img/phone-ico-form.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + -- libgit2 0.21.4