add mobile page

2021-06-07 17:48:07 +03:00 · 2021-06-07 17:48:07 +03:00 · 0784d38a97
commit 0784d38a97
parent ba3ee0a588
13 changed files with 406 additions and 214 deletions
--- a/src/components/Candidate/Candidate.js
+++ b/src/components/Candidate/Candidate.js
@ -39,8 +39,12 @@ const Candidate = () => {
          <div className="col-12">
            <div className={style.candidate__header}>
              <div className={style.arrow} onClick={() => history.push('/')}>
-                <img src={arrow} alt="" />
-                <span>Вернуться к списку</span>
+                <div className={style.arrow__img}>
+                  <img src={arrow} alt="" />
+                </div>
+                <div className={style.arrow__sp}>
+                  <span>Вернуться к списку</span>
+                </div>
              </div>

              <div className="icon">
--- a/src/components/Candidate/Candidate.module.css
+++ b/src/components/Candidate/Candidate.module.css
@ -72,41 +72,46 @@
  }
 } */

-
 .candidate__title {
  margin-top: 60px;
 }

 .candidate__title > h2 {
  text-align: center;
-      color: #52b709;
-      font-family: 'GT Eesti Pro Display';
-      font-size: 5em;
-      font-weight: 700;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 77.81px;
+  color: #52b709;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 5em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 77.81px;
 }

 .candidate__title > h2 > span {
  color: #282828;
-        font-style: normal;
-        letter-spacing: 0.56px;
-        line-height: normal;
+  font-style: normal;
+  letter-spacing: 0.56px;
+  line-height: normal;
 }

 .candidate__header {
  display: flex;
-    align-items: center;
-    margin-top: 120px;
-    margin-left: 60px;
+  align-items: center;
+  margin-top: 120px;
+  margin-left: 60px;
 }

-.arrow > img {
-cursor: pointer;
+.arrow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }

-.arrow > span {
+.arrow__img > img {
+  cursor: pointer;
+}
+
+.arrow__sp > span {
  margin-left: 40px;
  margin-right: 120px;
  font-family: 'GT Eesti Pro Display';
@ -116,33 +121,33 @@ cursor: pointer;
  letter-spacing: normal;
  line-height: 36px;
  text-align: left;
-  }
+}

-  .candidate__main {
-    margin-top: 60px;
-  }
+.candidate__main {
+  margin-top: 60px;
+}

-  .candidate__main__description {
-    padding-left: 16px;
-  }
+.candidate__main__description {
+  padding-left: 16px;
+}

-  .candidate__main__description > h2 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.8em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
+.candidate__main__description > h2 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.8em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+}

-  .candidate__main__description > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.2em;
-    font-weight: 300;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-    margin: 20px 0px;
-  }
+.candidate__main__description > p {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.2em;
+  font-weight: 300;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+  margin: 20px 0px;
+}
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@ -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>
--- a/src/components/Description/Description.module.css
+++ b/src/components/Description/Description.module.css
@ -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;
@ -125,7 +221,7 @@
  height: 30px;
  border-radius: 20px;
  background-color: #74be4d;
-cursor: pointer;
+  cursor: pointer;
 }

 .arrow__right > img {
@ -133,6 +229,4 @@ cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
-
 }
-
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@ -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}
+      />
    </>
  );
 };
--- a/src/components/Outstaffing/Outstaffing.js
+++ b/src/components/Outstaffing/Outstaffing.js
@ -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}
--- a/src/components/Outstaffing/Outstaffing.module.css
+++ b/src/components/Outstaffing/Outstaffing.module.css
@ -1,66 +1,123 @@
-
-  .outstaffing__title {
-    margin-top: 60px;
-    }
-    .outstaffing__title > h2 {
-      text-align: center;
-      color: #52b709;
-      font-family: 'GT Eesti Pro Display';
-      font-size: 5em;
-      font-weight: 700;
-      font-style: normal;
-      letter-spacing: normal;
-      line-height: 77.81px;
-    }
-      .outstaffing__title > h2 > span {
-        color: #282828 ;
-        font-style: normal ;
-        letter-spacing: 0.56px ;
-        line-height: normal ;
-      }
-      .outstaffing__box {
-    margin-top: 120px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-      }
-    
-  .outstaffing__box > img {
-    max-width: 240px;
-    min-height: 120px;
-    cursor: pointer;
-  }
-
-  .outstaffing__box > p{
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.2em;
-    font-weight: 300;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-    margin-top: 60px;
-    margin-bottom: 0;
-    /* margin-left: 40px; */
-  }
-
-  .outstaffing__box > ul{
-     padding-left: 0;
-
-  }
-
-
- 
-
-  .items > li {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 100;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-    list-style: none;
-    cursor: pointer;
+.outstaffing__title {
+  margin-top: 60px;
+}
+.outstaffing__title > h2 {
+  text-align: center;
+  color: #52b709;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 5em;
+  font-weight: 700;
+  font-style: normal;
+  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;
+  letter-spacing: 0.56px;
+  line-height: normal;
+}
+.outstaffing__box {
+  margin-top: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@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 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.2em;
+  font-weight: 300;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+  margin-bottom: 0;
+}
+
+.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';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+  list-style: none;
+  cursor: pointer;
+}
--- a/src/components/Outstaffing/OutstaffingBlock.js
+++ b/src/components/Outstaffing/OutstaffingBlock.js
@ -1,21 +1,39 @@
 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>
-      {tags && (
-        <ul className={style.items}>
-          {tags.map((item) => (
-            <li key={item} onClick={() => onClick(item)}>
-              {item}
-            </li>
-          ))}
-        </ul>
-      )}
+      <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) => (
+              <li key={item} onClick={() => onClick(item)}>
+                {item}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
    </div>
  );
 };
--- a/src/components/Select/TagSelect.module.css
+++ b/src/components/Select/TagSelect.module.css
@ -1,37 +1,47 @@
 .search {
  margin-top: 73px;
 }
-  .search__title {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.4em;
-    font-weight: 500;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: normal;
-    text-align: center;
-    margin-bottom: 40px;
-  }
+.search__title {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.4em;
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: center;
+  margin-bottom: 40px;
+}

+.search__box {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 575.98px) {
  .search__box {
-    display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
  }
+}

+.search__box > button {
+  color: white;
+  width: 131px;
+  height: 40px;
+  border-radius: 10px;
+  border: none;
+  font-family: 'Muller';
+  font-size: 1.6em;
+  letter-spacing: 0.8px;
+  text-align: center;
+  background-color: #73c141;
+}
+
+@media (max-width: 575.98px) {
  .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;
-    text-align: center;
-    background-color: #73c141;
-    font-weight: 600;
+    margin-top: 40px;
  }
-
+}

 .select {
  width: 85%;
--- a/src/components/Sidebar/Sidebar.module.css
+++ b/src/components/Sidebar/Sidebar.module.css
@ -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,10 +68,9 @@
  display: flex;
  align-items: center;
  margin-top: 20px;
-
 }

- .arrow__left {
+.arrow__left {
  position: relative;
  width: 30px;
  height: 30px;
--- a/src/images/back_end.png
+++ b/src/images/back_end.png
--- a/src/images/design.png
+++ b/src/images/design.png
--- a/src/images/front_end.png
+++ b/src/images/front_end.png