apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed description css

Browse Source
This commit is contained in:
Hope87
2021-07-21 14:40:06 +03:00
parent bccc5f98dc
commit f42f7a9f71
8 changed files with 60 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Candidate/Candidate.module.css
View File

@@ -222,7 +222,6 @@
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
flex-wrap: wrap;
}
@media (max-width: 575.98px) {
@@ -241,7 +240,14 @@
text-align: left;
}
.SectionSkills > p {
.SectionSkills > ul {
list-style: none;
display: flex;
padding-left: 0;
flex-wrap: wrap;
}
.SectionSkills > ul > li {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 100;

2
src/components/Candidate/SectionSkills.js
View File

@@ -5,7 +5,7 @@ const SectionSkills = ({ skillsArr }) => {
return (
<div className={style.SectionSkills}>
<h3>Навыки:</h3>
{skillsArr && skillsArr.map((skills) => <p key={skills.id}>{skills.skill.name}</p>)}
<ul>{skillsArr && skillsArr.map((skills) => <li key={skills.id}>{skills.skill.name}</li>)}</ul>
</div>
);
};

30
src/components/Description/Description.js
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import style from './Description.module.css';
import male from '../../images/medium_male.png';
import rectangle from '../../images/rectangle_secondPage.png';
@@ -6,14 +6,16 @@ import { Link } from 'react-router-dom';
import { LEVELS, SKILLS } from '../constants/constants';
import { selectProfiles, selectFilteredCandidates } from '../../redux/outstaffingSlice';
import { useSelector } from 'react-redux';
import { fetchProfile } from '../../server/server';
const Description = ({ onLoadMore }) => {
const candidatesListArr = useSelector(selectProfiles);
const filteredListArr = useSelector(selectFilteredCandidates);
const [allCandidates, getAllCandidates] = useState([]);
// function createMarkup(text) {
// return { __html: text.split('</p>').slice(0, 3).join('') };
// }
useEffect(() => {
fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', 1000).then((p) => getAllCandidates(p));
}, []);
return (
<section className={style.description}>
@@ -43,13 +45,13 @@ const Description = ({ onLoadMore }) => {
</div>
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<div className={style.description__spBox}>
<ul className={style.description__list}>
{el.skillValues.map((e) => (
<span key={e.id} className={style.description__sp}>
<li key={e.id} className={style.description__list__item}>
{e.skill.name}
</span>
</li>
))}
</div>
</ul>
<img className={style.description__rectangle} src={rectangle} alt="" />
</div>
<div className="col-xl-4"></div>
@@ -78,13 +80,13 @@ const Description = ({ onLoadMore }) => {
</div>
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<div className={style.description__spBox}>
<ul className={style.description__list}>
{el.skillValues.map((e) => (
<span key={e.id} className={style.description__sp}>
<li key={e.id} className={style.description__list__item}>
{e.skill.name}
</span>
</li>
))}
</div>
</ul>
<img className={style.description__rectangle} src={rectangle} alt="" />
</div>
<div className="col-xl-4"></div>
@@ -96,7 +98,9 @@ const Description = ({ onLoadMore }) => {
<div className="col-12">
<div className={style.description__footer}>
<div className={style.description__footer__btn}>
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
{candidatesListArr.length !== allCandidates.length && filteredListArr.length === 0 ? (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
) : null}
</div>
</div>
</div>

14
src/components/Description/Description.module.css
View File

@@ -85,10 +85,6 @@
word-wrap: break-word;
}
/* .description__text > p:first-child {
font-size: 1.8em;
} */
.description__textSecondary {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
@@ -152,11 +148,14 @@
}
}
.description__spBox {
.description__list {
padding: 5px;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.description__sp {
.description__list__item {
font-family: 'GT Eesti Pro Display';
font-size: 1.7em;
font-weight: 400;
@@ -164,13 +163,12 @@
letter-spacing: normal;
text-align: left;
line-height: 36px;
margin-top: 20px;
margin-left: 10px;
word-wrap: break-word;
}
@media (max-width: 575.98px) {
.description__sp {
.description__list__item {
font-size: 1.5em;
text-align: center;
margin-bottom: 120px;

3
src/components/Form/Form.js
View File

@@ -24,7 +24,6 @@ const Form = () => {
const handleSubmit = (e) => {
e.preventDefault();
console.log('submitData', data);
const formData = new FormData();
formData.append('email', data.email);
@@ -38,8 +37,6 @@ const Form = () => {
history.goBack();
};
console.log('data', data);
return (
<div className="container">
<div className="row">

1
src/components/Form/Form.module.css
View File

@@ -15,7 +15,6 @@
line-height: 16.81px;
text-align: left;
margin-bottom: 20px;
margin-left: 45px;
}
.form > input {

6
src/components/Home/Home.js
View File

@@ -11,9 +11,9 @@ const Home = () => {
const dispatch = useDispatch();
useEffect(() => {
fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', index)
.then((profileArr) => dispatch(profiles(profileArr)))
.catch((e) => console.log(e));
fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', index).then((profileArr) =>
dispatch(profiles(profileArr))
);
fetchSkills('https://guild.craft-group.xyz/api/skills/skills-on-main-page').then((skills) => {
const keys = Object.keys(skills);

42
src/server/server.js
View File

@@ -1,32 +1,40 @@
export const fetchProfile = async (link, index) => {
const response = await fetch(`${link}${index}`);
let data = await response.json();
try {
const response = await fetch(`${link}${index}`);
let data = await response.json();
return data;
return data;
} catch (error) {}
};
export const fetchSkills = async (link) => {
const response = await fetch(link);
let data = await response.json();
try {
const response = await fetch(link);
let data = await response.json();
return data;
return data;
} catch (error) {}
};
export const fetchItemsForId = async (link, id) => {
const response = await fetch(`${link}${id}`);
let data = await response.json();
try {
const response = await fetch(`${link}${id}`);
let data = await response.json();
return data;
return data;
} catch (error) {}
};
export const fetchForm = async (link, info) => {
const response = await fetch(link, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: info,
});
try {
const response = await fetch(link, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: info,
});
return response;
return response;
} catch (error) {}
};