feat: Добавление канбан доски
- просмотр/создание/изменение/удаление категорий; - просмотр/создание/изменение/удаление задач; - просмотр общей информации о канбан доске
This commit is contained in:
Vladiysss
242
src/css/Board.css
Normal file
242
src/css/Board.css
Normal file
@@ -0,0 +1,242 @@
|
||||
.inf-panel{
|
||||
flex: 0 0 auto;
|
||||
background-color: #2b3245;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.inf-panel strong {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
.inf-panel .row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row p, .row h3{
|
||||
display: flex;
|
||||
margin: 0px 0px;
|
||||
word-break: break-all;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.row+.row p {
|
||||
margin: 20px 0px 0px 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.set-panel{
|
||||
flex: 0 0 auto;
|
||||
background-color: #2b3245;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.board-panel{
|
||||
flex: 1 1 auto;
|
||||
background-color: #2b3245;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
gap: 15px;
|
||||
padding: 5px;
|
||||
border: 5px dashed #2b3245;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.categori{
|
||||
flex: 1 1 auto; /* занимает всё свободное место */
|
||||
overflow-y: auto; /* вертикальный скролл при переполнении */
|
||||
overflow-x: hidden; /* горизонтальный скролл отключён */
|
||||
border: 3px solid #3d4763;
|
||||
background-color: #3d4763;
|
||||
min-width: 300px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categori>button{
|
||||
display: flex;
|
||||
background-color: #0000;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
justify-content: center;
|
||||
}
|
||||
.categori>button:hover{
|
||||
background-color: #0000;
|
||||
}
|
||||
|
||||
.bib {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.categ-h{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
flex: 1 1 auto; /* занимает всё свободное место */
|
||||
overflow-y: auto; /* вертикальный скролл при переполнении */
|
||||
overflow-x: hidden; /* горизонтальный скролл отключён */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 300px;
|
||||
margin-top: 16px;
|
||||
margin-right: -4px; /* компенсируем отступ контейнера */
|
||||
padding-right: 4px; /* создаём отступ для контента */
|
||||
}
|
||||
|
||||
.task {
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
|
||||
color: #CAD1D8;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
background-color: #2b3245;
|
||||
border: 2px solid #617099;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.task+.task {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.task:hover {
|
||||
background-color: #3d4763;
|
||||
}
|
||||
|
||||
.create {
|
||||
margin-top: 16px;
|
||||
background-color: #fff0;
|
||||
border: 3px dashed #3d4763;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow-y: hidden;
|
||||
button{
|
||||
height: 100%;
|
||||
background-color: #fff0;
|
||||
font-size: 20px;
|
||||
color: #3d4763;
|
||||
margin: 0px;
|
||||
div{
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
button:hover{
|
||||
background-color: #3d4763;
|
||||
color: #CAD1D8;
|
||||
}
|
||||
}
|
||||
|
||||
.categori .create {
|
||||
margin-top: 0px;
|
||||
background-color: #fff0;
|
||||
border: 3px dashed #617099;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow-y: unset;
|
||||
button{
|
||||
height: 50px;
|
||||
background-color: #fff0;
|
||||
font-size: 20px;
|
||||
color: #617099;
|
||||
margin: 0px;
|
||||
div{
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
button:hover{
|
||||
background-color: #617099;
|
||||
color: #CAD1D8;
|
||||
}
|
||||
}
|
||||
|
||||
.categori.create {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.task.create {
|
||||
margin-top: 16px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Стили для полосы прокрутки (опционально) */
|
||||
.task-list::-webkit-scrollbar{
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.board-panel::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.task-list::-webkit-scrollbar-track ,
|
||||
.board-panel::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.task-list::-webkit-scrollbar-thumb,
|
||||
.board-panel::-webkit-scrollbar-thumb {
|
||||
background: #aaa;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.task-list::-webkit-scrollbar-thumb:hover,
|
||||
.board-panel::-webkit-scrollbar-thumb:hover {
|
||||
background: #888;
|
||||
}
|
||||
Reference in New Issue
Block a user