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={style.candidate__header}>
<div className={style.arrow} onClick={() => history.push('/')}>
<div className={style.arrow__img}>
<img src={arrow} alt="" />
</div>
<div className={style.arrow__sp}>
<span>Вернуться к списку</span>
</div>
</div>
<div className="icon">
<img src={img} alt="" />

View File

@ -72,7 +72,6 @@
}
} */
.candidate__title {
margin-top: 60px;
}
@ -102,11 +101,17 @@
margin-left: 60px;
}
.arrow > img {
.arrow {
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow__img > img {
cursor: pointer;
}
.arrow > span {
.arrow__sp > span {
margin-left: 40px;
margin-right: 120px;
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 { Link } from 'react-router-dom';
const Description = ({ candidatesListArr, onhandleTabBar }) => {
const Description = ({ candidatesListArr }) => {
return (
<section className={style.description}>
<div className="container">
@ -16,7 +16,7 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
<div className="col-2">
<img className={style.description__img} src={photo} alt="" />
</div>
<div className="col-6">
<div className="col-12 col-xl-6">
<h3 className={style.description__title}>{el.name} разработчик, Middle</h3>
<p className={style.description__text}>
- 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}>- 3 года преподаю в IOS-школе Сбера</p>
</div>
<div className="col-4">
<div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}>
<button className={style.description__button}>Подробное резюме</button>
</Link>
</div>
<div className="col-2"></div>
<div className="col-6">
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<span className={style.description__sp}> {el.tags}</span>
<img className={style.description__rectangle} src={rectangle} alt="" />
</div>
<div className="col-4"></div>
<div className="col-xl-4"></div>
</div>
))}
</div>

View File

@ -1,7 +1,6 @@
.description {
margin-top: 120px;
margin-top: 40px;
margin-bottom: 120px;
}
.description__wrapper {
@ -9,14 +8,40 @@
background-color: #fdfdfd;
padding-top: 60px;
border-bottom: none;
position: relative;
}
.description__img {
margin-left: 40px;
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 {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-size: 2.6em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
@ -24,6 +49,21 @@
text-align: left;
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 {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
@ -34,6 +74,15 @@
text-align: left;
line-height: 28px;
}
@media (max-width: 575.98px) {
.description__text {
/* text-align: center; */
margin-left: 20px;
font-size: 1.6em;
}
}
.description__button {
width: 280px;
height: 60px;
@ -41,16 +90,38 @@
background-color: #73c141;
border: none;
color: #ffffff;
font-family: 'Muller Extra Bold';
font-family: 'Muller';
font-size: 1.6em;
font-weight: 600;
line-height: normal;
font-style: normal;
letter-spacing: 0.8px;
text-align: center;
margin-top: 74px;
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 {
display: block;
font-family: 'GT Eesti Pro Display';
@ -62,10 +133,26 @@
line-height: 36px;
margin-top: 20px;
}
@media (max-width: 575.98px) {
.description__sp {
font-size: 1.6em;
text-align: center;
margin-bottom: 120px;
}
}
.description__rectangle {
display: block;
margin: 50px auto;
}
@media (max-width: 575.98px) {
.description__rectangle {
width: 80%;
}
}
.description__footer {
display: flex;
justify-content: center;
@ -88,6 +175,15 @@
line-height: normal;
text-align: center;
}
@media (max-width: 575.98px) {
.description__footer__btn > button {
width: 160px;
margin-right: 10px;
font-size: 1.6em;
}
}
.description__footer__box {
display: flex;
align-items: center;
@ -133,6 +229,4 @@ cursor: pointer;
top: 50%;
left: 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 Description from '../Description/Description';
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 [tabs, setTabs] = useState([]);
const [candidates, setCandidates] = useState([]);
const handleTabBar = (name) => {
const tabFilter = candidatesList.filter((el) => el.name.toLowerCase() === name);
const [selectedTab, setSelectedTab] = useState('');
console.log(tabFilter);
useEffect(() => {
setTabs(tabsList);
setCandidates(candidatesList);
}, []);
setTabs(tabFilter);
const handleBlockClick = (name) => {
setSelectedTab(name);
};
return (
<>
<Outstaffing onhandleTabBar={(name) => handleTabBar(name)} />
<Description candidatesListArr={tabs.length > 0 ? tabs : candidatesList} />
<Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} />
<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 front from '../../images/front_end.png';
import back from '../../images/back_end.png';
import design from '../../images/design.png';
import OutstaffingBlock from './OutstaffingBlock';
import TagSelect from '../Select/TagSelect';
const Outstaffing = ({ onhandleTabBar }) => {
const [data, setData] = useState([]);
const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
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) => {
if (!selectedItems.find((el) => item === el.value)) {
setSelectedItems([...selectedItems, { value: item, label: item }]);
@ -67,32 +38,35 @@ const Outstaffing = ({ onhandleTabBar }) => {
</div>
<div className="row">
<div className="col-4">
<div className="col-12 col-xl-4">
<OutstaffingBlock
data={data.find((item) => item.name === 'frontend')}
data={tabs.find((item) => item.name === 'Frontend')}
onClick={(item) => handleBlockClick(item)}
onClickhandleTabBar={(name) => onhandleTabBar(name)}
onTabBarClick={(name) => onhandleTabBar(name)}
selected={selected === 'Frontend'}
/>
</div>
<div className="col-4">
<div className="col-12 col-xl-4">
<OutstaffingBlock
data={data.find((item) => item.name === 'backend')}
data={tabs.find((item) => item.name === 'Backend')}
onClick={(item) => handleBlockClick(item)}
onClickhandleTabBar={(name) => onhandleTabBar(name)}
onTabBarClick={(name) => onhandleTabBar(name)}
selected={selected === 'Backend'}
/>
</div>
<div className="col-4">
<div className="col-12 col-xl-4">
<OutstaffingBlock
data={data.find((item) => item.name === 'design')}
data={tabs.find((item) => item.name === 'Design')}
onClick={(item) => handleBlockClick(item)}
onClickhandleTabBar={(name) => onhandleTabBar(name)}
onTabBarClick={(name) => onhandleTabBar(name)}
selected={selected === 'Design'}
/>
</div>
</div>
</div>
</section>
<TagSelect
options={data}
options={tabs}
selectedItems={selectedItems}
tagSubmit={handleSubmit}
setSelectedItems={setSelectedItems}

View File

@ -1,4 +1,3 @@
.outstaffing__title {
margin-top: 60px;
}
@ -12,6 +11,21 @@
letter-spacing: normal;
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 {
color: #282828;
font-style: normal;
@ -25,10 +39,42 @@
align-items: center;
}
.outstaffing__box > img {
max-width: 240px;
@media (max-width: 575.98px) {
.outstaffing__box {
margin-top: 40px;
}
}
.outstaffing__box__img {
min-width: 260px;
min-height: 120px;
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 {
@ -39,18 +85,30 @@
letter-spacing: normal;
line-height: 36px;
text-align: left;
margin-top: 60px;
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;
}
.border {
border: 2px solid #cdeaba;
}
.items > li {
font-family: 'GT Eesti Pro Display';
@ -63,4 +121,3 @@
list-style: none;
cursor: pointer;
}

View File

@ -1,12 +1,29 @@
import React from 'react';
import style from './Outstaffing.module.css';
const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
const { img, header, tags, name } = data;
const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
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 (
<div className={style.outstaffing__box}>
<img onClick={() => onClickhandleTabBar(name)} src={img} alt="img" />
<p>{header}</p>
<div
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 && (
<ul className={style.items}>
{tags.map((item) => (
@ -17,6 +34,7 @@ const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
</ul>
)}
</div>
</div>
);
};

View File

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

View File

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