articles styles fix
All checks were successful
publish-main / release-image (push) Successful in 10m46s

This commit is contained in:
Ivan 2024-07-03 18:56:34 +03:00
parent 0e1dc49f59
commit 2b50f7c332
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
3 changed files with 404 additions and 297 deletions

View File

@ -1,94 +1,166 @@
.main {
width: 100%;
height: 100%;
padding: 4% 8%;
width: 100%;
min-height: 100%;
padding: 4% 8%;
}
.wrapper {
width: 100%;
height: 100%;
width: 100%;
min-height: 100%;
}
.panel {
width: 100%;
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 25px;
gap: 15px;
div:first-child {
flex-grow: 1;
input {
width: 100%;
}
}
}
.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: space-between;
align-items: end;
padding: 0 5%;
justify-content: start;
align-items: center;
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 {
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
border-radius: 5px;
margin-top: 5%;
height: 70%;
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;
font-family: "Montserrat", sans-serif;
}
}
&__forms {
width: 100%;
&__columns {
display: flex;
justify-content: start;
align-items: center;
padding: 0 2%;
height: 15%;
width: 100%;
border-bottom: 1px solid rgb(220, 220, 220);
&__item {
width: 33.3%;
font-size: 15px;
// text-align: center;
font-family: "Montserrat", sans-serif;
}
height: 85%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 7px;
}
&__forms {
width: 100%;
height: 85%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__item {
display: flex;
justify-content: start;
align-items: center;
padding: 0 2%;
height: 25%;
width: 100%;
font-family: "Montserrat", sans-serif;
position: relative;
&:hover {
background-color: rgba(240, 240, 240, 0.8);
}
&__title {
width: 33.3%;
// text-align: center;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__date {
width: 33.3%;
// text-align: center;
}
&__author {
width: 33.3%;
// text-align: center;
}
i {
position: absolute;
font-size: 15px;
right: 30px;
top: calc(50% - 7px);
cursor: pointer;
}
ul {
li {
cursor: pointer;
}
}
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
}
&__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 {
width: 33.3%;
// text-align: center;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__date {
width: 33.3%;
// text-align: center;
}
&__author {
width: 33.3%;
// text-align: center;
}
i {
position: absolute;
font-size: 15px;
right: 30px;
top: calc(50% - 7px);
cursor: pointer;
}
ul {
li {
cursor: pointer;
}
}
}
}
}

View File

@ -1,150 +1,150 @@
.main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 90%;
height: 90%;
width: 90%;
height: 90%;
}
.header {
width: 100%;
// height: 10%;
&__wrapper {
width: 100%;
height: 10%;
&__wrapper {
width: 100%;
height: 100%;
border: 1px solid rgb(180, 180, 180);
border-bottom: none;
border-radius: 5px 5px 0 0;
padding: 0 5px;
&__article {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&__title {
width: 20%;
height: 75%;
display: flex;
border-right: 1px solid rgb(180, 180, 180);
justify-content: center;
align-items: center;
position: relative;
&__name {
position: absolute;
top: -20%;
left: 3px;
font-size: 8px;
font-family: "Montserrat", sans-serif;
}
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
&__tags {
width: 60%;
height: 75%;
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
padding: 0 5px;
position: relative;
overflow-y: auto;
// &::-webkit-scrollbar {
// width: 10px;
// }
// &::-webkit-scrollbar-thumb {
// background-color: rgb(200, 200, 200);
// }
// &::-webkit-scrollbar-button:single-button {
// background-color: #bbbbbb;
// display: block;
// border-style: solid;
// height: 10px;
// width: 16px;
// }
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
span {
}
}
}
&__owner {
width: 20%;
height: 75%;
border-left: 1px solid rgb(180, 180, 180);
display: flex;
justify-content: center;
align-items: center;
position: relative;
&__name {
position: absolute;
top: -20%;
right: 3px;
font-size: 8px;
font-family: "Montserrat", sans-serif;
}
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
height: 100%;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
border-radius: 5px 5px 0 0;
padding: 0 5px;
&__article {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&__title {
width: 20%;
height: 75%;
display: flex;
border-right: 1px solid rgb(180, 180, 180);
justify-content: center;
align-items: center;
position: relative;
&__name {
position: absolute;
top: -20%;
left: 3px;
font-size: 8px;
font-family: "Montserrat", sans-serif;
}
&__tags {
width: 100%;
height: 50%;
display: flex;
justify-content: start;
align-items: center;
margin-top: 20px;
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
span {
}
}
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
&__tags {
width: 60%;
height: 75%;
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
padding: 5px;
position: relative;
overflow-y: auto;
// &::-webkit-scrollbar {
// width: 10px;
// }
// &::-webkit-scrollbar-thumb {
// background-color: rgb(200, 200, 200);
// }
// &::-webkit-scrollbar-button:single-button {
// background-color: #bbbbbb;
// display: block;
// border-style: solid;
// height: 10px;
// width: 16px;
// }
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
span {
}
}
}
&__owner {
width: 20%;
height: 75%;
border-left: 1px solid rgb(180, 180, 180);
display: flex;
justify-content: center;
align-items: center;
position: relative;
&__name {
position: absolute;
top: -20%;
right: 3px;
font-size: 8px;
font-family: "Montserrat", sans-serif;
}
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
}
&__tags {
width: 100%;
height: 50%;
display: flex;
justify-content: start;
align-items: center;
margin-top: 20px;
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
span {
}
}
}
}
}
.content {
width: 100%;
height: 90%;
&__wrapper {
width: 100%;
height: 90%;
&__wrapper {
width: 100%;
height: 100%;
border: 1px solid rgb(180, 180, 180);
padding: 5px;
// border-radius: 0 0 5px 5px;
overflow: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar {
height: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__article {
max-width: 100%;
height: 100%;
}
height: 100%;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px;
border-radius: 0 0 5px 5px;
overflow: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar {
height: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__article {
max-width: 100%;
height: 100%;
}
}
}
// .image {
@ -156,4 +156,4 @@
// height: 200px;
// aspect-ratio: 1000/700;
// }
// }
// }

View File

@ -1,103 +1,138 @@
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 [stateLoading, setStateLoading] = useState(false);
const navigate = useNavigate();
const { user, setUser } = useContext(UserData);
const [stateLoading, setStateLoading] = useState(false);
const [listArticles, setListArticles] = useState([]);
const [listArticles, setListArticles] = useState([]);
const [cookies, _, __] = useCookies(["user"]);
const [cookies, _, __] = useCookies(["user"]);
useEffect(() => {
async function getListArticles() {
const response = await getListArticlesApi(cookies.token)
useEffect(() => {
async function getListArticles() {
const response = await getListArticlesApi(cookies.token);
if (response.status === 200) {
setListArticles(response.data)
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
getListArticles()
}, [])
async function createArticle() {
const response = await createArticleApi(cookies.token)
if (response.status === 200) {
navigate(`/articles/${response.data.id}/edit`)
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
if (response.status === 200) {
setListArticles(response.data);
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
return (
<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">
<span class="visually-hidden">Загрузка...</span>
</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>
<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>
<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>
</ul>
getListArticles();
}, []);
<CheckModal
postfix={'test'}
message={`Вы хотетите удалить статью <Test article>?`}
action={{
execute: () => {},
cancel: () => {}
}}
/>
</div>)}
</div>
async function createArticle() {
const response = await createArticleApi(cookies.token);
if (response.status === 200) {
navigate(`/articles/${response.data.id}/edit`);
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.panel}>
<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>
<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>
<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>
</ul>
export default Articles;
<CheckModal
postfix={"test"}
message={`Вы хотетите удалить статью <Test article>?`}
action={{
execute: () => {},
cancel: () => {},
}}
/>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default Articles;