loader hover and devlist fixes

This commit is contained in:
kurpfish 2021-08-09 16:12:06 +03:00
parent f0a92fd8f2
commit 21d95a9c04
7 changed files with 74 additions and 49 deletions

View File

@ -156,6 +156,10 @@
border: 2px solid #6aaf5c;
}
.form__btn:hover .loader * {
fill: #6aaf5c;
}
.form__btn:hover {
background-image: none;
background-color: #ffffff;

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { auth } from '../../redux/outstaffingSlice';
import { loading } from '../../redux/loaderSlice'
import { loading } from '../../redux/loaderSlice';
import style from './AuthForPartners.module.css';
import ellipse from '../../images/ellipse.png';
import arrow from '../../images/arrow__login_page.png';
@ -25,7 +25,7 @@ const AuthForPartners = () => {
const dispatch = useDispatch()
const isAuth = useSelector(selectAuth)
const isLoading = useSelector(selectIsLoading)
console.log('iL',isLoading);
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
@ -67,14 +67,14 @@ console.log('iL',isLoading);
onClick={!isLoading ? (e) => {
e.preventDefault();
dispatch(loading(true))
fetchAuth({
username,
password,
dispatch: ()=> {
dispatch(auth(true))
dispatch(loading(false))
}
})
// fetchAuth({
// username,
// password,
// dispatch: ()=> {
// dispatch(auth(true))
// dispatch(loading(false))
// }
// })
} : ()=>{}}
>
{ isLoading ? <Loader /> : 'Войти' }

View File

@ -21,44 +21,46 @@ const Description = ({ onLoadMore }) => {
<section className={style.description}>
<div className="container">
<div className={style.description__wrapper}>
{filteredListArr && filteredListArr.length > 0
? filteredListArr.map((el) => (
<div className="row" key={el.id}>
<div className="col-2">
<img className={style.description__img} src={male} alt="" />
</div>
<div className="col-12 col-xl-6">
<h3 className={style.description__title}>
<Link to={`/candidate/${el.id}`}>
{SKILLS[el.position_id]}, {LEVELS[el.level]}
</Link>
</h3>
{filteredListArr
? (filteredListArr.length > 0
? <></>
: filteredListArr.map((el) => (
<div className="row" key={el.id}>
<div className="col-2">
<img className={style.description__img} src={male} alt="" />
</div>
<div className="col-12 col-xl-6">
<h3 className={style.description__title}>
<Link to={`/candidate/${el.id}`}>
{SKILLS[el.position_id]}, {LEVELS[el.level]}
</Link>
</h3>
{el.vc_text_short ? (
<div className={style.description__text}>{el.vc_text_short}</div>
) : (
<p className={style.description__textSecondary}>Описание отсутствует...</p>
)}
{el.vc_text_short ? (
<div className={style.description__text}>{el.vc_text_short}</div>
) : (
<p className={style.description__textSecondary}>Описание отсутствует...</p>
)}
</div>
<div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}>
<button className={style.description__button}>Подробное резюме</button>
</Link>
</div>
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<ul className={style.description__list}>
{el.skillValues.map((e) => (
<li key={e.id} className={style.description__list__item}>
{e.skill.name}
</li>
))}
</ul>
<img className={style.description__rectangle} src={rectangle} alt="" />
</div>
<div className="col-xl-4"></div>
</div>
<div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}>
<button className={style.description__button}>Подробное резюме</button>
</Link>
</div>
<div className="col-xl-2"></div>
<div className="col-12 col-xl-6">
<ul className={style.description__list}>
{el.skillValues.map((e) => (
<li key={e.id} className={style.description__list__item}>
{e.skill.name}
</li>
))}
</ul>
<img className={style.description__rectangle} src={rectangle} alt="" />
</div>
<div className="col-xl-4"></div>
</div>
))
)))
: candidatesListArr.map((el) => (
<div className="row" key={el.id}>
<div className="col-2">

View File

@ -1,4 +1,6 @@
import SVGLoader from "react-loader-spinner";
import './loader.css'
export const Loader = () => {
return (
<div className='loader'>
@ -7,7 +9,6 @@ export const Loader = () => {
color="#fff"
height={50}
width={50}
timeout={3000}
/>
</div>
);

View File

@ -0,0 +1,11 @@
.loader {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loader:hover path {
fill: #6aaf5c;
}

View File

@ -1,12 +1,15 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Select from 'react-select';
import { Loader } from '../Loader/Loader';
import style from './TagSelect.module.css';
import { selectedItems, selectItems, selectTags, filteredCandidates } from '../../redux/outstaffingSlice';
import { fetchItemsForId } from '../../server/server';
import { selectIsLoading } from '../../redux/loaderSlice';
const TagSelect = () => {
const dispatch = useDispatch();
const isLoading = useSelector(selectIsLoading)
const itemsArr = useSelector(selectItems);
@ -41,8 +44,8 @@ const TagSelect = () => {
return { id: item.id, value: item.value, label: item.value };
})}
/>
<button onClick={handleSubmit} type="submit">
Поиск
<button onClick={handleSubmit} type="submit" className={style.search__submit}>
{ isLoading ? <Loader /> : 'Поиск' }
</button>
</div>
</div>

View File

@ -70,3 +70,7 @@
font-size: 1.6em !important;
color: gray !important;
}
.search__submit:hover .loader path {
fill: #6aaf5c;
}