partner bid page
This commit is contained in:
parent
e26b8cc22e
commit
15ed4b8c1d
@ -24,6 +24,7 @@ import {Payouts} from './pages/Payouts/Payouts'
|
||||
import {Settings} from './pages/Settings/Settings'
|
||||
import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests'
|
||||
import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest'
|
||||
import {PartnerBid} from './pages/PartnerBid/PartnerBid'
|
||||
|
||||
import './fonts/stylesheet.css'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
@ -68,6 +69,7 @@ const App = () => {
|
||||
<Route exact path='settings' element={<Settings/>}/>
|
||||
<Route exact path='requests' element={<PartnerRequests/>}/>
|
||||
<Route exact path='add-request' element={<PartnerAddRequest/>}/>
|
||||
<Route exact path='bid' element={<PartnerBid/>}/>
|
||||
</Route>
|
||||
|
||||
<Route path="*" element={<Navigate to="/" replace/>}/>
|
||||
|
||||
@ -21,7 +21,7 @@ export const ProfileHeader = () => {
|
||||
|
||||
const userRole = useSelector(getRole);
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [user] = useState('developer')
|
||||
const [user] = useState('partner')
|
||||
const [navInfo] = useState({
|
||||
developer: [
|
||||
{
|
||||
|
||||
BIN
src/images/QualificationInfo.png
Normal file
BIN
src/images/QualificationInfo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 672 B |
BIN
src/images/QualificationInfoMiddle.png
Normal file
BIN
src/images/QualificationInfoMiddle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 B |
BIN
src/images/mokPerson.png
Normal file
BIN
src/images/mokPerson.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
@ -22,7 +22,7 @@ const AuthForPartners = () => {
|
||||
|
||||
useEffect(()=> {
|
||||
if (isAuth || getToken) {
|
||||
navigate('/')
|
||||
navigate('/profile')
|
||||
}
|
||||
}, [getToken]);
|
||||
|
||||
|
||||
119
src/pages/PartnerBid/PartnerBid.js
Normal file
119
src/pages/PartnerBid/PartnerBid.js
Normal file
@ -0,0 +1,119 @@
|
||||
import React, {useState} from 'react';
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
|
||||
import {Footer} from "../../components/Footer/Footer";
|
||||
|
||||
import arrowSwitchDate from "../../images/arrowViewReport.png";
|
||||
import backEndImg from "../../images/QualificationInfo.png";
|
||||
import middle from "../../images/QualificationInfoMiddle.png";
|
||||
import personImg from "../../images/mokPerson.png"
|
||||
|
||||
import './partnerBid.scss'
|
||||
|
||||
export const PartnerBid = () => {
|
||||
const [mokPersons] = useState([
|
||||
{
|
||||
name: 'Дмитрий, PHP Back end - разработчик, Middle',
|
||||
link: '',
|
||||
img: personImg
|
||||
},
|
||||
{
|
||||
name: 'Дмитрий, PHP Back end - разработчик, Middle',
|
||||
link: '',
|
||||
img: personImg
|
||||
},
|
||||
{
|
||||
name: 'Дмитрий, PHP Back end - разработчик, Middle',
|
||||
link: '',
|
||||
img: personImg
|
||||
}
|
||||
])
|
||||
return (
|
||||
<div className='partnerBid'>
|
||||
<ProfileHeader />
|
||||
<div className='container'>
|
||||
<h2 className='partnerBid__title'>Страница заявки </h2>
|
||||
<div className='partnerBid__qualification'>
|
||||
<h3>PHP разработчик</h3>
|
||||
</div>
|
||||
<div className='partnerBid__switcher'>
|
||||
<div className='partnerBid__switcher__prev switchDate'>
|
||||
<img src={arrowSwitchDate} alt='arrow'/>
|
||||
</div>
|
||||
<p>Дата заявки : 19 декабря 2022 года </p>
|
||||
<div className='partnerBid__switcher__next switchDate'>
|
||||
<img src={arrowSwitchDate} alt='arrow'/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='table__wrapper'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><p>Требования к стеку разработчика</p></th>
|
||||
<th><p>Квалификация</p></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
PHP приветствуется аккуратность в коде. MySQL - умение писать запросы к MySQL,
|
||||
понимание как происходит запрос. Средний уровень: AJAX, JSON, общее понимание;
|
||||
CSS/CSS3, HTML, Bootstrap;
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<div className='qualification__info'>
|
||||
<div className='img__wrapper'>
|
||||
<img src={backEndImg} alt='backEndImg' />
|
||||
</div>
|
||||
<p>Backend разработчик</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
Знание современных фреймворков Laravel, Yii 2, FuelPHP, Симфони;
|
||||
Знания по разработке REST API;
|
||||
Знание PHP,HTML,CSS,MySQL,Pyhton,JavaScript.
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<div className='qualification__info'>
|
||||
<div className='img__wrapper'>
|
||||
<img src={middle} alt='middleImg' />
|
||||
</div>
|
||||
<p className='middle'>Средний<br/>(Middle)</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className='partnerBid__suitable'>
|
||||
<div className='partnerBid__suitable__title'>
|
||||
<p>Подходящие сотрудники по запросу</p>
|
||||
</div>
|
||||
<div className='partnerBid__suitable__persons'>
|
||||
{mokPersons.map((person) => {
|
||||
return <div className='partnerBid__suitable__person'>
|
||||
<img src={person.img} alt='avatar' />
|
||||
<p>{person.name}</p>
|
||||
<Link className='partnerBid__suitable__person__more' to={person.link}>
|
||||
Подробнее
|
||||
</Link>
|
||||
<div className='partnerBid__suitable__person__info'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
440
src/pages/PartnerBid/partnerBid.scss
Normal file
440
src/pages/PartnerBid/partnerBid.scss
Normal file
@ -0,0 +1,440 @@
|
||||
.partnerBid {
|
||||
background: #F1F1F1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
|
||||
.container {
|
||||
max-width: 1160px;
|
||||
margin-top: 23px;
|
||||
|
||||
@media (max-width: 570px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&__qualification {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 20px 37px;
|
||||
margin-top: 20px;
|
||||
|
||||
h3 {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__switcher {
|
||||
display: flex;
|
||||
margin: 30px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.switchDate {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #8DC63F;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__prev {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000000;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
margin: 0 100px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table__wrapper {
|
||||
margin: 0 -28px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 28px 0;
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
}
|
||||
tr {
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
grid-template-columns: 74% calc(26% - 28px);
|
||||
column-gap: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: 65% calc(35% - 28px);
|
||||
}
|
||||
|
||||
@media (max-width: 515px) {
|
||||
grid-template-columns: 65% calc(35% - 10px);
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: white;
|
||||
border-radius: 12px 12px 0 0;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
|
||||
&:first-child {
|
||||
padding: 32px 37px;
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: 32px 50px 32px 48px;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 515px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
}
|
||||
tr {
|
||||
|
||||
@media (max-width: 1205px) {
|
||||
display: grid;
|
||||
grid-template-columns: 74% calc(26% - 28px);
|
||||
column-gap: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: 65% calc(35% - 28px);
|
||||
}
|
||||
|
||||
@media (max-width: 515px) {
|
||||
column-gap: 10px;
|
||||
grid-template-columns: 65% calc(35% - 10px);
|
||||
}
|
||||
td {
|
||||
background: white;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color: #000000;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
|
||||
@media (max-width: 515px) {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
padding: 0 27px 35px 39px;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding: 0 45px 35px;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.qualification__info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
|
||||
p {
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.img__wrapper {
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
background: #8DC63F;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 515px) {
|
||||
min-width: 25px;
|
||||
height: 25px;
|
||||
|
||||
img {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin-left: 25px;
|
||||
|
||||
@media (max-width: 515px) {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.middle {
|
||||
color: #406128;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
@media (max-width: 515px) {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td {
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__suitable {
|
||||
&__title {
|
||||
background: #E1FCCF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
margin-top: 48px;
|
||||
padding: 18px 37px;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
|
||||
@media (max-width: 540px) {
|
||||
font-size: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__persons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 18px;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
&__person {
|
||||
display: flex;
|
||||
padding: 21px 45px 19px;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
|
||||
img {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-left: 60px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #52B709;
|
||||
border-radius: 12px;
|
||||
width: 70%;
|
||||
height: 8px;
|
||||
bottom: -14px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__more {
|
||||
padding: 9px 45px;
|
||||
background: #52B709;
|
||||
border-radius: 44px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-left: 200px;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #DDDDDD;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 60px;
|
||||
|
||||
&:before {
|
||||
content: "...";
|
||||
color: #6F6F6F;
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
justify-content: space-between;
|
||||
p {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&__more {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 825px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
p {
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
&__more {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 510px) {
|
||||
p {
|
||||
font-size: 12px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
&__more {
|
||||
font-size: 12px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
@ -34,7 +34,7 @@ export const PartnerRequests = () => {
|
||||
<div className='partnerRequests__section__items'>
|
||||
{
|
||||
items.map((item, index) => {
|
||||
return <Link key={index} to={''} className='partnerRequests__section__item'>
|
||||
return <Link key={index} to={'/profile/bid'} className='partnerRequests__section__item'>
|
||||
<p className='partnerRequests__section__item__name'>
|
||||
{item.name}
|
||||
</p>
|
||||
|
||||
@ -22,7 +22,7 @@ import './profile.scss'
|
||||
export const Profile = () => {
|
||||
|
||||
const profileInfo = useSelector(getProfileInfo);
|
||||
const [user] = useState('developer')
|
||||
const [user] = useState('partner')
|
||||
const [profileItemsInfo] = useState({
|
||||
developer: [
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user