Skip to content

Commit 7c8b8a0

Browse files
SalteinSaltein
committed
цвета и стили, прокрутка списка
1 parent 9b118a6 commit 7c8b8a0

File tree

10 files changed

+65
-105
lines changed

10 files changed

+65
-105
lines changed

‎src/entities/task/ui/Task.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
display: flex;
33
padding: 8px;
44
align-items: center;
5-
gap: 8px
5+
gap: 8px;
66
}
77

88
.doneButton {
99
min-width: 32px;
1010
min-height: 32px;
1111
border-radius: 16px;
1212
border: none;
13-
border: 2px solid brown;
13+
border-bottom: 2px solid brown;
1414
background-color: antiquewhite;
1515
}
1616

‎src/features/sortingPanel/ui/SortingPanel.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.wrapper {
22
display: flex;
33
min-height: 64px;
4-
background-color: aliceblue;
4+
background-color: rgb(229, 208, 172);
55
margin: 16px;
66

77
border-radius: 16px;
8+
border-bottom: 2px solid rgb(120, 120, 120);
89
}

‎src/pages/PlanPage/PlanPage.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { SortingPanel } from "../../features";
2+
import { DefaultDivider } from "../../shared/ui/DefaultDivider/DefaultDivider";
23
import { TaskList } from "../../widgets";
34
import s from "./PlanPage.module.css";
45

56
export const PlanPage = (props) => {
67
return (
78
<div className={s.wrapper}>
89
<div className={s.tasksWrapper}>
9-
<SortingPanel/>
10-
<TaskList/>
10+
<SortingPanel />
11+
<TaskList />
1112
</div>
13+
<DefaultDivider margin="32px" />
1214
<div className={s.timerWrapper}>
1315
timer
1416
</div>

‎src/pages/PlanPage/PlanPage.module.css‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,41 @@
11
.wrapper {
22
display: flex;
33
height: 100vh;
4+
background-color: rgb(254, 249, 225);
45
}
56

67
.tasksWrapper {
78
flex: 2;
8-
background-color: aqua;
9+
overflow-y: auto;
10+
border-radius: 16px;
911
}
1012

1113
.timerWrapper {
1214
flex: 3;
13-
background-color: bisque;
15+
}
16+
17+
@media (max-width: 1024px) {
18+
.wrapper {
19+
flex-direction: column-reverse;
20+
}
21+
22+
.tasksWrapper {
23+
max-height: 40vh;
24+
}
25+
}
26+
27+
.tasksWrapper::-webkit-scrollbar {
28+
width: 4px;
29+
}
30+
31+
.tasksWrapper::-webkit-scrollbar-track {
32+
background: rgba(255, 166, 0, 0);
33+
/* цвет дорожки */
34+
}
35+
36+
.tasksWrapper::-webkit-scrollbar-thumb {
37+
background-color: rgb(200, 80, 80);
38+
/* цвет плашки */
39+
border-radius: 20px;
40+
/* закругления плашки */
1441
}

‎src/shared/ui/DefaultButton/DefaultButton.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
border: none;
66
border-bottom: 2px solid rgb(120, 120, 120);
77
transition: 0.2s;
8+
font-weight: 600;
9+
color: rgb(80, 80, 80);
810

911
background-color: antiquewhite;
1012
}

‎src/shared/ui/DefaultDivider/DefaultDivider.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import s from "./DefaultDivider.module.css"
2+
3+
export const DefaultDivider = (props) => {
4+
return (
5+
<div className={s.divider} style={{ "--margin": props.margin }}/>
6+
)
7+
}

‎src/shared/ui/DefaultDivider/DefaultDivider.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.divider {
2+
margin: 4px var(--margin);
3+
height: 1px;
4+
background-color: brown;
5+
}

‎src/widgets/Authentication/ui/backup.jsx‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎src/widgets/TaskList/ui/TaskList.jsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Task } from "../../../entities/task"
2+
import { DefaultDivider } from "../../../shared/ui/DefaultDivider/DefaultDivider"
23
import s from "./TaskList.module.css"
34

45
const data = {
@@ -7,6 +8,15 @@ const data = {
78
{ id: 2, title: "title 2", description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", priority: 2, status: false, pomodoros: 3 },
89
{ id: 3, title: "title 3", description: "description 3", priority: 3, status: false, pomodoros: 3 },
910
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
11+
{ id: 4, title: "title 4", description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", priority: 4, status: false, pomodoros: 3 },
12+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
13+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
14+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
15+
{ id: 4, title: "title 4", description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", priority: 4, status: false, pomodoros: 3 },
16+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
17+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
18+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
19+
{ id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
1020
]
1121
}
1222

@@ -17,7 +27,7 @@ export const TaskList = (props) => {
1727
<div key={task.id}>
1828
<Task {...task} /> {/* {...task} — это синтаксис spread-оператора (...) в JSX,
1929
который используется для передачи всех свойств объекта task в компонент Task в виде отдельных пропсов. */}
20-
{index !== data.tasks.length - 1 && <div className={s.divider} />}
30+
{index !== data.tasks.length - 1 && <DefaultDivider margin="16px" />}
2131
</div>
2232
))}
2333
</div>

‎src/widgets/TaskList/ui/TaskList.module.css‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@
22
display: flex;
33
flex-direction: column;
44
margin: 16px;
5-
background-color: aliceblue;
5+
background-color: rgb(229, 208, 172);
66

77
border-radius: 16px;
8-
}
9-
10-
.divider {
11-
margin: 4px 16px 4px 16px;
12-
height: 1px;
13-
background-color: brown;
8+
border-bottom: 2px solid rgb(120, 120, 120);
9+
overflow: hidden;
1410
}

0 commit comments

Comments
 (0)