add mobile page

This commit is contained in:
Hope87 2021-06-07 17:48:07 +03:00
parent ba3ee0a588
commit 0784d38a97
13 changed files with 406 additions and 214 deletions

View File

@ -39,9 +39,13 @@ const Candidate = () => {
<div className="col-12"> <div className="col-12">
<div className={style.candidate__header}> <div className={style.candidate__header}>
<div className={style.arrow} onClick={() => history.push('/')}> <div className={style.arrow} onClick={() => history.push('/')}>
<div className={style.arrow__img}>
<img src={arrow} alt="" /> <img src={arrow} alt="" />
</div>
<div className={style.arrow__sp}>
<span>Вернуться к списку</span> <span>Вернуться к списку</span>
</div> </div>
</div>
<div className="icon"> <div className="icon">
<img src={img} alt="" /> <img src={img} alt="" />

View File

@ -72,7 +72,6 @@
} }
} */ } */
.candidate__title { .candidate__title {
margin-top: 60px; margin-top: 60px;
} }
@ -102,11 +101,17 @@
margin-left: 60px; margin-left: 60px;
} }
.arrow > img { .arrow {
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow__img > img {
cursor: pointer; cursor: pointer;
} }
.arrow > span { .arrow__sp > span {
margin-left: 40px; margin-left: 40px;
margin-right: 120px; margin-right: 120px;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';

View File

@ -6,7 +6,7 @@ import arrowLeft from '../../images/arrow_left.png';
import arrowRight from '../../images/arrow_right.png'; import arrowRight from '../../images/arrow_right.png';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
const Description = ({ candidatesListArr, onhandleTabBar }) => { const Description = ({ candidatesListArr }) => {
return ( return (
<section className={style.description}> <section className={style.description}>
<div className="container"> <div className="container">
@ -16,7 +16,7 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
<div className="col-2"> <div className="col-2">
<img className={style.description__img} src={photo} alt="" /> <img className={style.description__img} src={photo} alt="" />
</div> </div>
<div className="col-6"> <div className="col-12 col-xl-6">
<h3 className={style.description__title}>{el.name} разработчик, Middle</h3> <h3 className={style.description__title}>{el.name} разработчик, Middle</h3>
<p className={style.description__text}> <p className={style.description__text}>
- 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift. - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
@ -24,17 +24,17 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
<p className={style.description__text}>- 5 лет руковожу командами мобильной разработки.</p> <p className={style.description__text}>- 5 лет руковожу командами мобильной разработки.</p>
<p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p> <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
</div> </div>
<div className="col-4"> <div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}> <Link to={`/candidate/${el.id}`}>
<button className={style.description__button}>Подробное резюме</button> <button className={style.description__button}>Подробное резюме</button>
</Link> </Link>
</div> </div>
<div className="col-2"></div> <div className="col-xl-2"></div>
<div className="col-6"> <div className="col-12 col-xl-6">
<span className={style.description__sp}> {el.tags}</span> <span className={style.description__sp}> {el.tags}</span>
<img className={style.description__rectangle} src={rectangle} alt="" /> <img className={style.description__rectangle} src={rectangle} alt="" />
</div> </div>
<div className="col-4"></div> <div className="col-xl-4"></div>
</div> </div>
))} ))}
</div> </div>

View File

@ -1,7 +1,6 @@
.description { .description {
margin-top: 120px; margin-top: 40px;
margin-bottom: 120px; margin-bottom: 120px;
} }
.description__wrapper { .description__wrapper {
@ -9,14 +8,40 @@
background-color: #fdfdfd; background-color: #fdfdfd;
padding-top: 60px; padding-top: 60px;
border-bottom: none; border-bottom: none;
position: relative;
} }
.description__img { .description__img {
margin-left: 40px; margin-left: 40px;
margin-top: 16px; margin-top: 16px;
} }
@media (max-width: 575.98px) {
.description__img {
position: absolute;
top: 90px;
left: 90px;
}
}
@media (max-width: 375.98px) {
.description__img {
position: absolute;
top: 90px;
left: 90px;
}
}
@media (max-width: 340.98px) {
.description__img {
position: absolute;
top: 90px;
left: 60px;
}
}
.description__title { .description__title {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 2.5em; font-size: 2.6em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;
@ -24,6 +49,21 @@
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 10px;
} }
@media (max-width: 575.98px) {
.description__title {
text-align: center;
margin-bottom: 190px;
font-size: 3em;
}
}
@media (max-width: 376px) {
.description__title {
font-size: 2.8em;
}
}
.description__text { .description__text {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.7em; font-size: 1.7em;
@ -34,6 +74,15 @@
text-align: left; text-align: left;
line-height: 28px; line-height: 28px;
} }
@media (max-width: 575.98px) {
.description__text {
/* text-align: center; */
margin-left: 20px;
font-size: 1.6em;
}
}
.description__button { .description__button {
width: 280px; width: 280px;
height: 60px; height: 60px;
@ -41,16 +90,38 @@
background-color: #73c141; background-color: #73c141;
border: none; border: none;
color: #ffffff; color: #ffffff;
font-family: 'Muller Extra Bold'; font-family: 'Muller';
font-size: 1.6em; font-size: 1.6em;
font-weight: 600;
line-height: normal; line-height: normal;
font-style: normal;
letter-spacing: 0.8px; letter-spacing: 0.8px;
text-align: center; text-align: center;
margin-top: 74px; margin-top: 74px;
margin-left: 30px; margin-left: 30px;
} }
@media (max-width: 575.98px) {
.description__button {
width: 220px;
height: 50px;
position: absolute;
bottom: -170px;
z-index: 5;
margin-left: 85px;
}
}
@media (max-width: 375.98px) {
.description__button {
margin-left: 60px;
}
}
@media (max-width: 325.98px) {
.description__button {
margin-left: 30px;
}
}
.description__sp { .description__sp {
display: block; display: block;
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
@ -62,10 +133,26 @@
line-height: 36px; line-height: 36px;
margin-top: 20px; margin-top: 20px;
} }
@media (max-width: 575.98px) {
.description__sp {
font-size: 1.6em;
text-align: center;
margin-bottom: 120px;
}
}
.description__rectangle { .description__rectangle {
display: block; display: block;
margin: 50px auto; margin: 50px auto;
} }
@media (max-width: 575.98px) {
.description__rectangle {
width: 80%;
}
}
.description__footer { .description__footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -88,6 +175,15 @@
line-height: normal; line-height: normal;
text-align: center; text-align: center;
} }
@media (max-width: 575.98px) {
.description__footer__btn > button {
width: 160px;
margin-right: 10px;
font-size: 1.6em;
}
}
.description__footer__box { .description__footer__box {
display: flex; display: flex;
align-items: center; align-items: center;
@ -133,6 +229,4 @@ cursor: pointer;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import Outstaffing from '../Outstaffing/Outstaffing'; import Outstaffing from '../Outstaffing/Outstaffing';
import Description from '../Description/Description'; import Description from '../Description/Description';
import front from '../../images/front_end.png'; import front from '../../images/front_end.png';
@ -27,20 +27,51 @@ export const candidatesList = [
}, },
]; ];
const tabsList = [
{
name: 'Frontend',
img: front,
text: '# Популярный стек',
header: 'Фронтенд',
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
},
{
name: 'Backend',
img: back,
text: '# Популярный стек',
header: 'Бэкенд',
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
},
{
name: 'Design',
img: design,
text: '# Популярный стек',
header: 'Дизайн',
tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
},
];
const Home = () => { const Home = () => {
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
const [candidates, setCandidates] = useState([]);
const handleTabBar = (name) => { const [selectedTab, setSelectedTab] = useState('');
const tabFilter = candidatesList.filter((el) => el.name.toLowerCase() === name);
console.log(tabFilter); useEffect(() => {
setTabs(tabsList);
setCandidates(candidatesList);
}, []);
setTabs(tabFilter); const handleBlockClick = (name) => {
setSelectedTab(name);
}; };
return ( return (
<> <>
<Outstaffing onhandleTabBar={(name) => handleTabBar(name)} /> <Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} />
<Description candidatesListArr={tabs.length > 0 ? tabs : candidatesList} /> <Description
candidatesListArr={selectedTab ? candidates.filter((item) => item.name === selectedTab) : candidates}
/>
</> </>
); );
}; };

View File

@ -1,40 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import style from './Outstaffing.module.css'; import style from './Outstaffing.module.css';
import front from '../../images/front_end.png';
import back from '../../images/back_end.png';
import design from '../../images/design.png';
import OutstaffingBlock from './OutstaffingBlock'; import OutstaffingBlock from './OutstaffingBlock';
import TagSelect from '../Select/TagSelect'; import TagSelect from '../Select/TagSelect';
const Outstaffing = ({ onhandleTabBar }) => { const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
const [data, setData] = useState([]);
const [selectedItems, setSelectedItems] = useState([]); const [selectedItems, setSelectedItems] = useState([]);
useEffect(() => {
const tags = [
{
name: 'frontend',
img: front,
header: '# Популярный стек',
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
},
{
name: 'backend',
img: back,
header: '# Популярный стек',
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
},
{
name: 'design',
img: design,
header: '# Популярный стек',
tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
},
];
setData(tags);
}, []);
const handleBlockClick = (item) => { const handleBlockClick = (item) => {
if (!selectedItems.find((el) => item === el.value)) { if (!selectedItems.find((el) => item === el.value)) {
setSelectedItems([...selectedItems, { value: item, label: item }]); setSelectedItems([...selectedItems, { value: item, label: item }]);
@ -67,32 +38,35 @@ const Outstaffing = ({ onhandleTabBar }) => {
</div> </div>
<div className="row"> <div className="row">
<div className="col-4"> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
data={data.find((item) => item.name === 'frontend')} data={tabs.find((item) => item.name === 'Frontend')}
onClick={(item) => handleBlockClick(item)} onClick={(item) => handleBlockClick(item)}
onClickhandleTabBar={(name) => onhandleTabBar(name)} onTabBarClick={(name) => onhandleTabBar(name)}
selected={selected === 'Frontend'}
/> />
</div> </div>
<div className="col-4"> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
data={data.find((item) => item.name === 'backend')} data={tabs.find((item) => item.name === 'Backend')}
onClick={(item) => handleBlockClick(item)} onClick={(item) => handleBlockClick(item)}
onClickhandleTabBar={(name) => onhandleTabBar(name)} onTabBarClick={(name) => onhandleTabBar(name)}
selected={selected === 'Backend'}
/> />
</div> </div>
<div className="col-4"> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
data={data.find((item) => item.name === 'design')} data={tabs.find((item) => item.name === 'Design')}
onClick={(item) => handleBlockClick(item)} onClick={(item) => handleBlockClick(item)}
onClickhandleTabBar={(name) => onhandleTabBar(name)} onTabBarClick={(name) => onhandleTabBar(name)}
selected={selected === 'Design'}
/> />
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<TagSelect <TagSelect
options={data} options={tabs}
selectedItems={selectedItems} selectedItems={selectedItems}
tagSubmit={handleSubmit} tagSubmit={handleSubmit}
setSelectedItems={setSelectedItems} setSelectedItems={setSelectedItems}

View File

@ -1,4 +1,3 @@
.outstaffing__title { .outstaffing__title {
margin-top: 60px; margin-top: 60px;
} }
@ -12,6 +11,21 @@
letter-spacing: normal; letter-spacing: normal;
line-height: 77.81px; line-height: 77.81px;
} }
@media (max-width: 375.98px) {
.outstaffing__title > h2 {
font-size: 4.5em;
line-height: normal;
}
}
@media (min-width: 376px) {
.outstaffing__title > h2 {
font-size: 5em;
line-height: normal;
}
}
.outstaffing__title > h2 > span { .outstaffing__title > h2 > span {
color: #282828; color: #282828;
font-style: normal; font-style: normal;
@ -25,10 +39,42 @@
align-items: center; align-items: center;
} }
.outstaffing__box > img { @media (max-width: 575.98px) {
max-width: 240px; .outstaffing__box {
margin-top: 40px;
}
}
.outstaffing__box__img {
min-width: 260px;
min-height: 120px; min-height: 120px;
cursor: pointer; cursor: pointer;
/* border: 2px solid #cdeaba; */
background-color: #f9f9f9;
border-radius: 20px;
position: relative;
}
.outstaffing__box__img > h3 {
position: absolute;
right: 25%;
top: 40%;
font-family: 'GT Eesti Pro Display';
font-size: 18px;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
.outstaffing__box__img > img {
cursor: pointer;
position: absolute;
}
.outstaffing__box > div {
margin-top: 60px;
} }
.outstaffing__box > p { .outstaffing__box > p {
@ -39,18 +85,30 @@
letter-spacing: normal; letter-spacing: normal;
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
margin-top: 60px;
margin-bottom: 0; margin-bottom: 0;
/* margin-left: 40px; */
} }
.outstaffing__box > ul{ .front {
left: -5%;
}
.back {
top: 11%;
left: -9%;
}
.des {
top: 24%;
left: -9%;
}
.outstaffing__box > div > ul {
padding-left: 0; padding-left: 0;
} }
.border {
border: 2px solid #cdeaba;
}
.items > li { .items > li {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
@ -63,4 +121,3 @@
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
} }

View File

@ -1,12 +1,29 @@
import React from 'react'; import React from 'react';
import style from './Outstaffing.module.css'; import style from './Outstaffing.module.css';
const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => { const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
const { img, header, tags, name } = data; const { img, text, tags, name, header } = data;
let clas;
if (name === 'Backend') {
clas = style.back;
} else if (name === 'Design') {
clas = style.des;
} else if (name === 'Frontend') {
clas = style.front;
}
return ( return (
<div className={style.outstaffing__box}> <div className={style.outstaffing__box}>
<img onClick={() => onClickhandleTabBar(name)} src={img} alt="img" /> <div
<p>{header}</p> className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
onClick={() => onTabBarClick(name)}
>
<h3>{header}</h3>
<img className={clas} src={img} alt="img" />
</div>
<div>
<p>{text}</p>
{tags && ( {tags && (
<ul className={style.items}> <ul className={style.items}>
{tags.map((item) => ( {tags.map((item) => (
@ -17,6 +34,7 @@ const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
</ul> </ul>
)} )}
</div> </div>
</div>
); );
}; };

View File

@ -17,21 +17,31 @@
justify-content: space-between; justify-content: space-between;
} }
@media (max-width: 575.98px) {
.search__box {
flex-direction: column;
align-items: center;
}
}
.search__box > button { .search__box > button {
color: white; color: white;
width: 131px; width: 131px;
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
border: none; border: none;
font-family: 'Muller Extra Bold'; font-family: 'Muller';
font-size: 1.8em; font-size: 1.6em;
font-style: normal; letter-spacing: 0.8px;
letter-spacing: normal;
text-align: center; text-align: center;
background-color: #73c141; background-color: #73c141;
font-weight: 600;
} }
@media (max-width: 575.98px) {
.search__box > button {
margin-top: 40px;
}
}
.select { .select {
width: 85%; width: 85%;

View File

@ -4,7 +4,8 @@
align-items: center; align-items: center;
border: 2px solid whitesmoke; border: 2px solid whitesmoke;
border-bottom: none !important; border-bottom: none !important;
position: sticky;
top: 80px;
} }
.candidateSidebar__info { .candidateSidebar__info {
@ -51,7 +52,6 @@
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
margin-bottom: 120px; margin-bottom: 120px;
} }
.candidateSidebar__info__l { .candidateSidebar__info__l {
@ -68,7 +68,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
} }
.arrow__left { .arrow__left {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 14 KiB