Оценка работы
This commit is contained in:
Denis
parent
c8d6de0556
commit
0d7936ed7f
5118
css/main/style.css
5118
css/main/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -201,13 +201,13 @@ main {
|
||||
|
||||
.back {
|
||||
padding-left: 28px;
|
||||
background:url("../../public/assets/images/icons/page-back.svg") no-repeat left center;
|
||||
background: url("../../public/assets/images/icons/page-back.svg") no-repeat left center;
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
margin-right: 25px;
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
& + .section_title {
|
||||
&+.section_title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1774,7 +1774,7 @@ main {
|
||||
margin-right: 50px;
|
||||
border: 0 !important;
|
||||
|
||||
& + .dropdown_blocks_list {
|
||||
&+.dropdown_blocks_list {
|
||||
width: calc(100% - 290px);
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
@ -1782,11 +1782,11 @@ main {
|
||||
}
|
||||
|
||||
.dropdown_block {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2033,26 +2033,27 @@ main {
|
||||
display: none;
|
||||
|
||||
@media all and (max-width: 1279px) {
|
||||
display: block;
|
||||
height: 23px;
|
||||
z-index: 3;
|
||||
background-image: url("/assets/images/icons/icon-select.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
font-size: 13px;
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
//padding-right: 24px;
|
||||
padding-left: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 285px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
display: block;
|
||||
height: 23px;
|
||||
z-index: 3;
|
||||
background-image: url("/assets/images/icons/icon-select.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
font-size: 13px;
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
//padding-right: 24px;
|
||||
padding-left: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 285px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.aside_nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -2089,7 +2090,7 @@ main {
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 11px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -2937,10 +2938,10 @@ main {
|
||||
min-width: 15%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
&:nth-child(4) {
|
||||
width: 15%;
|
||||
min-width: 15%;
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
@ -3031,6 +3032,7 @@ main {
|
||||
&[data-additional-service="7"] {
|
||||
background: url("/assets/images/icons/additional-service-7.svg") no-repeat bottom center;
|
||||
}
|
||||
|
||||
&[data-additional-service="8"] {
|
||||
background: url("/assets/images/icons/additional-service-8.svg") no-repeat bottom center;
|
||||
}
|
||||
@ -3866,8 +3868,8 @@ main {
|
||||
margin-right: 50px;
|
||||
|
||||
@media all and (max-width: 1279px) {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -4022,12 +4024,12 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
margin-bottom: -40px;
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
width: calc(100% - 32px);
|
||||
margin-bottom: -80px;
|
||||
margin-bottom: -80px;
|
||||
}
|
||||
|
||||
.helpBox {
|
||||
@ -4048,14 +4050,14 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
top: calc(100vh - 240px);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
&.hidden {
|
||||
display: none;
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
display: flex;
|
||||
@media all and (max-width: 960px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 62px;
|
||||
@ -4142,30 +4144,30 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url("/assets/images/icons/close-blue.svg") no-repeat center;
|
||||
.button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url("/assets/images/icons/close-blue.svg") no-repeat center;
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 960px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helpBox_small {
|
||||
.helpBox_small {
|
||||
max-width: 100px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
|
||||
border-top-right-radius: 17px;
|
||||
border-bottom-right-radius: 17px;
|
||||
border-top-left-radius: 17px;
|
||||
border-bottom-left-radius: 17px;
|
||||
border-top-right-radius: 17px;
|
||||
border-bottom-right-radius: 17px;
|
||||
border-top-left-radius: 17px;
|
||||
border-bottom-left-radius: 17px;
|
||||
|
||||
padding: 20px 20px;
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
@ -4175,18 +4177,18 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
top: calc(100vh - 150px);
|
||||
|
||||
@media all and (max-width: 1420px) {
|
||||
margin-left: -80px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
display: none;
|
||||
margin-left: -80px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
@media all and (max-width: 960px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 62px;
|
||||
@ -4207,7 +4209,117 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
|
||||
.rate_us {
|
||||
position: sticky;
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
|
||||
pointer-events: all;
|
||||
top: calc(100vh - 150px);
|
||||
/* tile shadow */
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 102px;
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rate_start {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rate_body {
|
||||
margin-left: auto;
|
||||
border-radius: 16px;
|
||||
background: var(--white, #FFF);
|
||||
width: 343px;
|
||||
padding: 16px 24px;
|
||||
box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 23px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rate_start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0 2px;
|
||||
|
||||
label {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5514 20.8416L19.8558 24.8358C20.6617 25.3464 21.6622 24.587 21.4231 23.6463L19.6016 16.481C19.5503 16.2815 19.5564 16.0715 19.6191 15.8752C19.6819 15.6789 19.7987 15.5044 19.9563 15.3715L25.6097 10.6661C26.3525 10.0478 25.9691 8.81502 25.0147 8.75308L17.6318 8.27392C17.4329 8.25971 17.2422 8.18931 17.0818 8.0709C16.9214 7.95249 16.7979 7.79095 16.7258 7.6051L13.9722 0.670972C13.8974 0.473703 13.7643 0.30387 13.5906 0.184027C13.417 0.0641833 13.211 0 13 0C12.789 0 12.583 0.0641833 12.4094 0.184027C12.2357 0.30387 12.1026 0.473703 12.0278 0.670972L9.27423 7.6051C9.20209 7.79095 9.07863 7.95249 8.91823 8.0709C8.75784 8.18931 8.5671 8.25971 8.36824 8.27392L0.985254 8.75308C0.03087 8.81502 -0.352537 10.0478 0.390298 10.6661L6.04371 15.3715C6.20126 15.5044 6.31813 15.6789 6.38088 15.8752C6.44362 16.0715 6.4497 16.2815 6.39841 16.481L4.70918 23.126C4.42222 24.2549 5.62287 25.1661 6.58991 24.5534L12.4486 20.8416C12.6134 20.7367 12.8047 20.681 13 20.681C13.1953 20.681 13.3866 20.7367 13.5514 20.8416Z' fill='%23EDEFF5'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.hover,
|
||||
&:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5514 20.8416L19.8558 24.8358C20.6617 25.3464 21.6622 24.587 21.4231 23.6463L19.6016 16.481C19.5503 16.2815 19.5564 16.0715 19.6191 15.8752C19.6819 15.6789 19.7987 15.5044 19.9563 15.3715L25.6097 10.6661C26.3525 10.0478 25.9691 8.81502 25.0147 8.75308L17.6318 8.27392C17.4329 8.25971 17.2422 8.18931 17.0818 8.0709C16.9214 7.95249 16.7979 7.79095 16.7258 7.6051L13.9722 0.670972C13.8974 0.473703 13.7643 0.30387 13.5906 0.184027C13.417 0.0641833 13.211 0 13 0C12.789 0 12.583 0.0641833 12.4094 0.184027C12.2357 0.30387 12.1026 0.473703 12.0278 0.670972L9.27423 7.6051C9.20209 7.79095 9.07863 7.95249 8.91823 8.0709C8.75784 8.18931 8.5671 8.25971 8.36824 8.27392L0.985254 8.75308C0.03087 8.81502 -0.352537 10.0478 0.390298 10.6661L6.04371 15.3715C6.20126 15.5044 6.31813 15.6789 6.38088 15.8752C6.44362 16.0715 6.4497 16.2815 6.39841 16.481L4.70918 23.126C4.42222 24.2549 5.62287 25.1661 6.58991 24.5534L12.4486 20.8416C12.6134 20.7367 12.8047 20.681 13 20.681C13.1953 20.681 13.3866 20.7367 13.5514 20.8416Z' fill='%231c01a9'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5514 20.8416L19.8558 24.8358C20.6617 25.3464 21.6622 24.587 21.4231 23.6463L19.6016 16.481C19.5503 16.2815 19.5564 16.0715 19.6191 15.8752C19.6819 15.6789 19.7987 15.5044 19.9563 15.3715L25.6097 10.6661C26.3525 10.0478 25.9691 8.81502 25.0147 8.75308L17.6318 8.27392C17.4329 8.25971 17.2422 8.18931 17.0818 8.0709C16.9214 7.95249 16.7979 7.79095 16.7258 7.6051L13.9722 0.670972C13.8974 0.473703 13.7643 0.30387 13.5906 0.184027C13.417 0.0641833 13.211 0 13 0C12.789 0 12.583 0.0641833 12.4094 0.184027C12.2357 0.30387 12.1026 0.473703 12.0278 0.670972L9.27423 7.6051C9.20209 7.79095 9.07863 7.95249 8.91823 8.0709C8.75784 8.18931 8.5671 8.25971 8.36824 8.27392L0.985254 8.75308C0.03087 8.81502 -0.352537 10.0478 0.390298 10.6661L6.04371 15.3715C6.20126 15.5044 6.31813 15.6789 6.38088 15.8752C6.44362 16.0715 6.4497 16.2815 6.39841 16.481L4.70918 23.126C4.42222 24.2549 5.62287 25.1661 6.58991 24.5534L12.4486 20.8416C12.6134 20.7367 12.8047 20.681 13 20.681C13.1953 20.681 13.3866 20.7367 13.5514 20.8416Z' fill='%231c01a9'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 12px;
|
||||
display: none;
|
||||
|
||||
.form_field {
|
||||
margin-bottom: 8px;
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feed {
|
||||
position: relative;
|
||||
@ -4228,11 +4340,14 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
|
||||
&.quest {
|
||||
padding: 5px 16px;
|
||||
&.quest {
|
||||
padding: 5px 16px;
|
||||
|
||||
img { width: 48px; height: 48px; }
|
||||
}
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
margin-left: 16px;
|
||||
@ -4289,7 +4404,9 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
margin-right: 30px;
|
||||
width: 480px;
|
||||
|
||||
div {height: 100%;}
|
||||
div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
@ -4474,12 +4591,16 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
|
||||
.grecaptcha-badge { visibility: hidden; }
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.changes {
|
||||
@media all and (max-width:1279px) {
|
||||
min-height: 60vh;
|
||||
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 55px;
|
||||
|
||||
@ -4570,11 +4691,11 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 768px) {
|
||||
&+.help_content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 768px) {
|
||||
&+.help_content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4645,12 +4766,12 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
|
||||
.help_tooltip_content {
|
||||
ul {
|
||||
list-style: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.help_tooltip_content {
|
||||
ul {
|
||||
list-style: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calc {
|
||||
@ -4725,12 +4846,12 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.help_tooltip_content {
|
||||
ul {
|
||||
list-style: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.help_tooltip_content {
|
||||
ul {
|
||||
list-style: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5271,6 +5392,7 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
|
||||
.block_header {
|
||||
padding-top: 0;
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
@ -5297,100 +5419,104 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
|
||||
.appeal_list {
|
||||
.appeal_item {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 16, 61, 0.12);
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.item_header {
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(0, 16, 61, 0.12);
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
padding-top: 35px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
padding: 4px 10px;
|
||||
background: #04A8A4;
|
||||
border-radius: 4px;
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
right: auto;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_body {
|
||||
.item_text {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
.item_header {
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
@media all and (max-width: 768px) {
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(0, 16, 61, 0.12);;
|
||||
}
|
||||
|
||||
.dosc_list {
|
||||
display: flex;
|
||||
gap: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16px;
|
||||
|
||||
.row {
|
||||
width: calc(33.333% - 20px);
|
||||
|
||||
@media all and (max-width: 1279px) {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
padding: 4px 10px;
|
||||
background: #04A8A4;
|
||||
border-radius: 4px;
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
right: auto;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc_name {
|
||||
max-width: 100%;
|
||||
span {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new_appeal {
|
||||
.item_body {
|
||||
.item_text {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(0, 16, 61, 0.12);
|
||||
;
|
||||
}
|
||||
|
||||
.dosc_list {
|
||||
display: flex;
|
||||
gap: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16px;
|
||||
|
||||
.row {
|
||||
width: calc(33.333% - 20px);
|
||||
|
||||
@media all and (max-width: 1279px) {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc_name {
|
||||
max-width: 100%;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new_appeal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
@ -5476,6 +5602,7 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.appeal_item {
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -5517,9 +5644,9 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gibdd.dropdown_blocks_list {
|
||||
.gibdd.dropdown_blocks_list {
|
||||
@media all and (max-width: 1279px) {
|
||||
.dropdown_block .block_body .company {
|
||||
padding: 0;
|
||||
@ -5540,9 +5667,9 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_list {
|
||||
.search_list {
|
||||
.search_item {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
@ -5567,9 +5694,9 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form_field {
|
||||
.form_field {
|
||||
.input_with_notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -5592,10 +5719,10 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
margin-bottom: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fix for gibdd*/
|
||||
main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
|
||||
/* fix for gibdd*/
|
||||
main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
|
||||
&:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -5666,109 +5793,108 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.services_invoice_button
|
||||
{
|
||||
min-width: 220px;
|
||||
.services_invoice_button {
|
||||
min-width: 220px;
|
||||
|
||||
@media all and (max-width: 1600px) {
|
||||
min-width: 195px;
|
||||
}
|
||||
@media all and (max-width: 1600px) {
|
||||
min-width: 195px;
|
||||
}
|
||||
}
|
||||
|
||||
.contract_payments_status_cell {
|
||||
@media all and (max-width: 1280px) {
|
||||
border-top: unset!important;
|
||||
}
|
||||
@media all and (max-width: 1280px) {
|
||||
border-top: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contract_payments_invoices_cell {
|
||||
@media all and (max-width: 1279px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
@media all and (max-width: 1279px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
|
||||
p {
|
||||
white-space: nowrap!important;
|
||||
display: flex;
|
||||
p {
|
||||
white-space: nowrap !important;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
margin-top: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
@media all and (max-width: 900px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
|
||||
p {
|
||||
white-space: normal!important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
p {
|
||||
white-space: normal !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
@media all and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
|
||||
p {
|
||||
flex-direction: row;
|
||||
white-space: nowrap!important;
|
||||
display: flex;
|
||||
p {
|
||||
flex-direction: row;
|
||||
white-space: nowrap !important;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
margin-top: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
@media all and (max-width: 400px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
min-width: 100% !important;
|
||||
|
||||
p {
|
||||
white-space: normal!important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
p {
|
||||
white-space: normal !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_form_buttons_wrapper {
|
||||
flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
|
||||
.button {
|
||||
display: block!important;
|
||||
}
|
||||
.button {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
10657
package-lock.json
generated
10657
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,119 +1,135 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { SpinnerCircular } from 'spinners-react';
|
||||
import React from "react"
|
||||
import { connect } from "react-redux"
|
||||
import { SpinnerCircular } from "spinners-react"
|
||||
import Rating from "../Rating"
|
||||
import { getImage } from "../../../actions"
|
||||
|
||||
import { getImage } from '../../../actions';
|
||||
class Manager extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
company: {},
|
||||
photo: undefined,
|
||||
loading: true,
|
||||
full: false
|
||||
}
|
||||
}
|
||||
|
||||
class Manager extends React.Component
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
company: {},
|
||||
photo: undefined,
|
||||
loading: true,
|
||||
full: false,
|
||||
};
|
||||
}
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
return {
|
||||
company: nextProps.company
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState)
|
||||
{
|
||||
return {
|
||||
company: nextProps.company,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
const { company } = this.state
|
||||
|
||||
componentDidMount()
|
||||
{
|
||||
const { company } = this.state;
|
||||
this._loadManagerAvatar()
|
||||
}
|
||||
|
||||
this._loadManagerAvatar();
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.company.manager_photo === undefined && this.state.company.manager_photo !== undefined) {
|
||||
this._loadManagerAvatar()
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState)
|
||||
{
|
||||
if(prevState.company.manager_photo === undefined && this.state.company.manager_photo !== undefined)
|
||||
{
|
||||
this._loadManagerAvatar();
|
||||
}
|
||||
}
|
||||
_loadManagerAvatar = () => {
|
||||
const { company } = this.state
|
||||
|
||||
_loadManagerAvatar = () =>
|
||||
{
|
||||
const { company } = this.state;
|
||||
if (company.manager_photo !== undefined && company.manager_photo !== null && company.manager_photo !== "") {
|
||||
getImage({ id: company.manager_photo }).then((result) => {
|
||||
this.setState({ photo: result, loading: false })
|
||||
})
|
||||
} else {
|
||||
if (company.manager_photo !== undefined) {
|
||||
this.setState({ photo: null, loading: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(company.manager_photo !== undefined && company.manager_photo !== null && company.manager_photo !== "")
|
||||
{
|
||||
getImage({ id: company.manager_photo })
|
||||
.then((result) =>
|
||||
{
|
||||
this.setState({ photo: result, loading: false });
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
if(company.manager_photo !== undefined)
|
||||
{
|
||||
this.setState({ photo: null, loading: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
_handle_onFull = () => {
|
||||
this.setState({ full: this.state.full ? false : true })
|
||||
}
|
||||
|
||||
_handle_onFull = () =>
|
||||
{
|
||||
this.setState({ full: this.state.full ? false : true });
|
||||
}
|
||||
render() {
|
||||
const { company, loading, photo, full } = this.state
|
||||
|
||||
render()
|
||||
{
|
||||
const { company, loading, photo, full, } = this.state;
|
||||
return (
|
||||
<div className="helpBox_wrapper">
|
||||
<div className={`helpBox ${!full ? "hidden" : ""}`}>
|
||||
<div className="avatar">
|
||||
{loading ? (
|
||||
<SpinnerCircular
|
||||
size={24}
|
||||
thickness={51}
|
||||
speed={100}
|
||||
color="rgba(28, 1, 169, 1)"
|
||||
secondaryColor="rgba(236, 239, 244, 1)"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={photo !== null ? photo : `/assets/images/icons/avatar.svg`}
|
||||
loading="lazy"
|
||||
alt={company.manager_fio}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="content">
|
||||
<p className="message">Помогу выбрать новый автомобиль</p>
|
||||
<p className="name">{company.manager_fio}</p>
|
||||
<p className="position">{company.manager_jobtitle}</p>
|
||||
<div className="info">
|
||||
<a href={`mailto:${company.manager_email}`}>{company.manager_email}</a>
|
||||
{company.manager_mobilephone !== undefined &&
|
||||
company.manager_mobilephone !== null &&
|
||||
company.manager_mobilephone !== "" && (
|
||||
<a href={`tel:+${company.manager_mobilephone.replace(/[^\d]/gm, "")}`}>
|
||||
{company.manager_mobilephone}
|
||||
</a>
|
||||
)}
|
||||
{company.manager_telegram !== undefined &&
|
||||
company.manager_telegram !== null &&
|
||||
company.manager_telegram !== "" && (
|
||||
<a
|
||||
href={`https://telegram.me/${company.manager_telegram.replace("@", "")}`}
|
||||
target="_blank"
|
||||
>{`@${company.manager_telegram.replace("@", "")}`}</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="button" onClick={this._handle_onFull}></div>
|
||||
</div>
|
||||
<div className={`helpBox_small interactive ${full ? "hidden" : ""}`} onClick={this._handle_onFull}>
|
||||
<div className="avatar">
|
||||
{loading ? (
|
||||
<SpinnerCircular
|
||||
size={24}
|
||||
thickness={51}
|
||||
speed={100}
|
||||
color="rgba(28, 1, 169, 1)"
|
||||
secondaryColor="rgba(236, 239, 244, 1)"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={photo !== null ? photo : `/assets/images/icons/avatar.svg`}
|
||||
loading="lazy"
|
||||
alt={company.manager_fio}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className="helpBox_wrapper">
|
||||
<div className={ `helpBox ${ !full ? "hidden" : "" }` }>
|
||||
<div className="avatar">
|
||||
{ loading ? (
|
||||
<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||||
) : (
|
||||
<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
|
||||
) }
|
||||
</div>
|
||||
<div className="content">
|
||||
<p className="message">Помогу выбрать новый автомобиль</p>
|
||||
<p className="name">{ company.manager_fio }</p>
|
||||
<p className="position">{ company.manager_jobtitle }</p>
|
||||
<div className="info">
|
||||
<a href={ `mailto:${ company.manager_email }` }>{ company.manager_email }</a>
|
||||
{ company.manager_mobilephone !== undefined && company.manager_mobilephone !== null && company.manager_mobilephone !== "" && (
|
||||
<a href={ `tel:+${ company.manager_mobilephone.replace(/[^\d]/mg, '') }` }>{ company.manager_mobilephone }</a>
|
||||
) }
|
||||
{ company.manager_telegram !== undefined && company.manager_telegram !== null && company.manager_telegram !== "" && (
|
||||
<a href={ `https://telegram.me/${ company.manager_telegram.replace("@", "") }` } target="_blank">{ `@${ company.manager_telegram.replace("@", "")}` }</a>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
<div className="button" onClick={ this._handle_onFull }></div>
|
||||
</div>
|
||||
<div className={ `helpBox_small interactive ${ full ? "hidden" : "" }` } onClick={ this._handle_onFull }>
|
||||
<div className="avatar">
|
||||
{ loading ? (
|
||||
<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||||
) : (
|
||||
<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{/* Оценка */}
|
||||
<Rating />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state, ownProps)
|
||||
{
|
||||
return {
|
||||
company: state.company,
|
||||
}
|
||||
function mapStateToProps(state, ownProps) {
|
||||
return {
|
||||
company: state.company
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Manager);
|
||||
export default connect(mapStateToProps)(Manager)
|
||||
|
||||
115
pages/components/Rating/index.js
Normal file
115
pages/components/Rating/index.js
Normal file
@ -0,0 +1,115 @@
|
||||
import React from "react"
|
||||
import { connect } from "react-redux"
|
||||
|
||||
class Rating extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
opened: false,
|
||||
rating: 0,
|
||||
hovered: 0,
|
||||
stars: []
|
||||
}
|
||||
|
||||
let outOf = props.outOf ? props.outOf : 5
|
||||
|
||||
for (var i = 0; i < outOf; i++) {
|
||||
this.state.stars.push(i + 1)
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
return {}
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {}
|
||||
|
||||
changeRating(newRating) {
|
||||
this.setState({
|
||||
rating: newRating
|
||||
})
|
||||
|
||||
if (this.props.onChange) this.props.onChange(newRating)
|
||||
}
|
||||
|
||||
hoverRating(rating) {
|
||||
this.setState({
|
||||
hovered: rating
|
||||
})
|
||||
}
|
||||
|
||||
_handleRate = () => {
|
||||
if (this.state.rating > 0) {
|
||||
this.setState({
|
||||
opened: true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { opened, stars, rating, hovered } = this.state
|
||||
const data = ["Очень плохо", "Плохо", "Нормально", "Хорошо", "Отлично"]
|
||||
|
||||
return (
|
||||
<div className={opened ? "rate_us opened" : "rate_us"}>
|
||||
<div className="rate_body">
|
||||
<p>Оцените нас</p>
|
||||
<div className="rate_start">
|
||||
<div className="stars">
|
||||
{stars.map((star) => {
|
||||
return (
|
||||
<label
|
||||
className={rating < star ? (hovered < star ? "" : "hover") : "active"}
|
||||
onClick={() => {
|
||||
this.changeRating(star)
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
this.hoverRating(star)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
this.hoverRating(0)
|
||||
}}
|
||||
></label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{opened ? (
|
||||
<p>{data[this.state.rating - 1]}</p>
|
||||
) : (
|
||||
<button
|
||||
className="button button button-blue"
|
||||
onClick={() => {
|
||||
this._handleRate()
|
||||
}}
|
||||
>
|
||||
Оценить
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<form>
|
||||
<div className="form_field">
|
||||
<input type="text" value="" placeholder="Имя" />
|
||||
</div>
|
||||
<div className="form_field">
|
||||
<input type="text" value="" placeholder="Телефон" />
|
||||
</div>
|
||||
<div className="form_field">
|
||||
<textarea placeholder="Комментарий"></textarea>
|
||||
</div>
|
||||
<button type="submit" className="button button button-blue">
|
||||
Отправить
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state, ownProps) {
|
||||
return {}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Rating)
|
||||
Loading…
x
Reference in New Issue
Block a user