articles styles fix
All checks were successful
publish-main / release-image (push) Successful in 10m46s
All checks were successful
publish-main / release-image (push) Successful in 10m46s
This commit is contained in:
Ivan
parent
0e1dc49f59
commit
2b50f7c332
GPG Key ID:
0C191B86D9582583
@ -1,41 +1,113 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: 4% 8%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
padding: 0 5%;
|
||||
margin-bottom: 25px;
|
||||
gap: 15px;
|
||||
div:first-child {
|
||||
flex-grow: 1;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listArticles {
|
||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
||||
border-radius: 5px;
|
||||
margin-top: 5%;
|
||||
.listforms {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
height: 70%;
|
||||
min-height: 700px;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
&__columns {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0 2%;
|
||||
height: 15%;
|
||||
padding: 20px 25px;
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
&__item {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&__forms {
|
||||
min-height: 100%;
|
||||
display: inline;
|
||||
overflow-y: auto;
|
||||
&__item {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20px 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
&:hover {
|
||||
background-color: rgba(240, 240, 240, 0.8);
|
||||
}
|
||||
&__title {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&__answers {
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
&__update {
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
right: 30px;
|
||||
top: calc(50% - 7px);
|
||||
cursor: pointer;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listArticles {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
height: 70%;
|
||||
min-height: 700px;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
&__columns {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 20px 25px;
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
&__item {
|
||||
width: 33.3%;
|
||||
font-size: 15px;
|
||||
// text-align: center;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
}
|
||||
@ -53,11 +125,11 @@
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0 2%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
padding: 20px 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
&:hover {
|
||||
background-color: rgba(240, 240, 240, 0.8);
|
||||
}
|
||||
|
||||
@ -13,11 +13,12 @@
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
// height: 10%;
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid rgb(180, 180, 180);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 0 5px;
|
||||
@ -54,7 +55,7 @@
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
// &::-webkit-scrollbar {
|
||||
@ -76,7 +77,6 @@
|
||||
border: 1px solid rgb(100, 100, 100);
|
||||
margin: 1px 3px;
|
||||
span {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -114,7 +114,6 @@
|
||||
border: 1px solid rgb(100, 100, 100);
|
||||
margin: 1px 3px;
|
||||
span {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -127,9 +126,10 @@
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid rgb(180, 180, 180);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 5px;
|
||||
// border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
import React, { useState, useContext, useEffect } from "react";
|
||||
import { useCookies } from "react-cookie";
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import classes from "../assets/styles/articles.module.scss"
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import classes from "../assets/styles/articles.module.scss";
|
||||
import MyButton from "../components/MyButton.jsx";
|
||||
import MyInput from "../components/MyInput.jsx";
|
||||
import { UserData } from "../context";
|
||||
import CheckModal from "../components/CheckModal.jsx";
|
||||
import { createArticleApi, getListArticlesApi } from "../hooks/api/articleApi.js";
|
||||
|
||||
import {
|
||||
createArticleApi,
|
||||
getListArticlesApi,
|
||||
} from "../hooks/api/articleApi.js";
|
||||
|
||||
const Articles = () => {
|
||||
const navigate = useNavigate();
|
||||
const {user, setUser} = useContext(UserData);
|
||||
const { user, setUser } = useContext(UserData);
|
||||
const [stateLoading, setStateLoading] = useState(false);
|
||||
|
||||
const [listArticles, setListArticles] = useState([]);
|
||||
@ -20,39 +22,31 @@ const Articles = () => {
|
||||
|
||||
useEffect(() => {
|
||||
async function getListArticles() {
|
||||
const response = await getListArticlesApi(cookies.token)
|
||||
const response = await getListArticlesApi(cookies.token);
|
||||
|
||||
if (response.status === 200) {
|
||||
setListArticles(response.data)
|
||||
}
|
||||
else if (
|
||||
response.status === 401
|
||||
) {
|
||||
setListArticles(response.data);
|
||||
} else if (response.status === 401) {
|
||||
// navigate("/enter")
|
||||
setUser(false)
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
setUser(false);
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
getListArticles()
|
||||
}, [])
|
||||
getListArticles();
|
||||
}, []);
|
||||
|
||||
async function createArticle() {
|
||||
const response = await createArticleApi(cookies.token)
|
||||
const response = await createArticleApi(cookies.token);
|
||||
|
||||
if (response.status === 200) {
|
||||
navigate(`/articles/${response.data.id}/edit`)
|
||||
}
|
||||
else if (
|
||||
response.status === 401
|
||||
) {
|
||||
navigate(`/articles/${response.data.id}/edit`);
|
||||
} else if (response.status === 401) {
|
||||
// navigate("/enter")
|
||||
setUser(false)
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
setUser(false);
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,44 +54,85 @@ const Articles = () => {
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.panel}>
|
||||
<MyInput placeholder={'Поиск...'}/>
|
||||
<MyButton click={createArticle} class={"main__green"} otherStyle={{width: '200px'}} text={
|
||||
stateLoading ? <div class="spinner-border text-light" role="status">
|
||||
<MyInput placeholder={"Поиск..."} />
|
||||
<MyButton
|
||||
click={createArticle}
|
||||
class={"main__blue"}
|
||||
otherStyle={{ width: "200px" }}
|
||||
text={
|
||||
stateLoading ? (
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Загрузка...</span>
|
||||
</div> : 'Создать'
|
||||
}/>
|
||||
</div>
|
||||
) : (
|
||||
"Создать"
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.listArticles}>
|
||||
<div className={classes.listArticles__columns}>
|
||||
<div className={classes.listArticles__columns__item}>Название</div>
|
||||
<div className={classes.listArticles__columns__item}>Дата публикации</div>
|
||||
<div className={classes.listArticles__columns__item}>
|
||||
Дата публикации
|
||||
</div>
|
||||
<div className={classes.listArticles__columns__item}>Автор</div>
|
||||
</div>
|
||||
<div className={classes.listArticles__forms}>
|
||||
{listArticles.map(item => <div className={classes.listArticles__forms__item}>
|
||||
<div className={classes.listArticles__forms__item__title} onClick={() => navigate(`/articles/${item.id}/edit`)}>{item.title}</div>
|
||||
<div className={classes.listArticles__forms__item__date}>24.06.24</div>
|
||||
<div className={classes.listArticles__forms__item__author}>kuwsh1n</div>
|
||||
<i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i>
|
||||
{listArticles.map((item) => (
|
||||
<div className={classes.listArticles__forms__item}>
|
||||
<div
|
||||
className={classes.listArticles__forms__item__title}
|
||||
onClick={() => navigate(`/articles/${item.id}/edit`)}
|
||||
>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className={classes.listArticles__forms__item__date}>
|
||||
24.06.24
|
||||
</div>
|
||||
<div className={classes.listArticles__forms__item__author}>
|
||||
kuwsh1n
|
||||
</div>
|
||||
<i
|
||||
class="fa-solid fa-ellipsis-vertical"
|
||||
id="action"
|
||||
data-bs-toggle="dropdown"
|
||||
></i>
|
||||
<ul class="dropdown-menu" aria-labelledby="action">
|
||||
<li><a class="dropdown-item" onClick={() => navigate(`/articles/${item.id}/`)}>Открыть</a></li>
|
||||
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModaltest`}>Удалить</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
onClick={() => navigate(`/articles/${item.id}/`)}
|
||||
>
|
||||
Открыть
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="dropdown-item"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target={`#checkModaltest`}
|
||||
>
|
||||
Удалить
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<CheckModal
|
||||
postfix={'test'}
|
||||
postfix={"test"}
|
||||
message={`Вы хотетите удалить статью <Test article>?`}
|
||||
action={{
|
||||
execute: () => {},
|
||||
cancel: () => {}
|
||||
cancel: () => {},
|
||||
}}
|
||||
/>
|
||||
</div>)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Articles;
|
||||
Loading…
Reference in New Issue
Block a user