adaptive
This commit is contained in:
parent
85773bd7af
commit
2e4f15717b
@ -21,10 +21,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
padding: 8px 13px 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
@ -47,10 +43,6 @@
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 430px) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #6f6f6f;
|
||||
font-weight: 500;
|
||||
@ -90,10 +82,6 @@
|
||||
color: #6f6f6f;
|
||||
right: 0;
|
||||
top: -35%;
|
||||
|
||||
@media (max-width: 430px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ export const Tracker = () => {
|
||||
const [allCompletedTasks, setAllCompletedTasks] = useState([]);
|
||||
|
||||
const [modalCreateProject, setModalCreateProject] = useState(false);
|
||||
const tabs = ['projectsTab', 'tasksTab', 'archiveTab']
|
||||
|
||||
useEffect(() => {
|
||||
setLoader(true);
|
||||
@ -135,28 +136,28 @@ export const Tracker = () => {
|
||||
<div className="tracker__tabs">
|
||||
<div className="tracker__tabs__head">
|
||||
<div
|
||||
className={tab === 1 ? "tab active-tab" : "tab"}
|
||||
className={tab === 1 ? "tab active-tab projectsTab" : "tab projectsTab"}
|
||||
onClick={() => toggleTabs(1)}
|
||||
>
|
||||
<img src={project} alt="img" />
|
||||
<p>Проекты </p>
|
||||
</div>
|
||||
<div
|
||||
className={tab === 2 ? "tab active-tab" : "tab"}
|
||||
className={tab === 2 ? "tab active-tab tasksTab" : "tab tasksTab"}
|
||||
onClick={() => toggleTabs(2)}
|
||||
>
|
||||
<img src={tasks} alt="img" />
|
||||
<p>Все мои задачи</p>
|
||||
</div>
|
||||
<div
|
||||
className={tab === 3 ? "tab active-tab" : "tab"}
|
||||
className={tab === 3 ? "tab active-tab archiveTab" : "tab archiveTab"}
|
||||
onClick={() => toggleTabs(3)}
|
||||
>
|
||||
<img src={archive} alt="img" />
|
||||
<p>Архив</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tracker__tabs__content">
|
||||
<div className={`tracker__tabs__content ${tabs[tab - 1]}`}>
|
||||
<div
|
||||
className={
|
||||
tab === 1
|
||||
|
||||
@ -46,6 +46,15 @@
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
|
||||
@media (max-width: 650px) {
|
||||
padding: 0 15px;
|
||||
background: none;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
@ -79,6 +88,19 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
align-items: start;
|
||||
row-gap: 20px;
|
||||
height: auto !important;
|
||||
|
||||
p {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
@ -98,6 +120,12 @@
|
||||
filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg)
|
||||
brightness(118%) contrast(119%);
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
border-radius: 10px;
|
||||
align-items: start;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
@ -119,11 +147,12 @@
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 785px) {
|
||||
row-gap: 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
padding: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.no-projects {
|
||||
@ -172,17 +201,17 @@
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.create-newProject {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 450px) {
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 32px;
|
||||
font-weight: 400;
|
||||
@ -192,8 +221,6 @@
|
||||
|
||||
@media (max-width: 450px) {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1104,13 +1131,22 @@
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 730px;
|
||||
max-width: 535px;
|
||||
|
||||
@media (max-width: 820px) {
|
||||
text-align: center;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 820px) {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@ -1130,6 +1166,10 @@
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__project {
|
||||
@ -1146,6 +1186,19 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
row-gap: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1158,7 +1211,7 @@
|
||||
display: flex;
|
||||
column-gap: 28px;
|
||||
|
||||
@media (max-width: 880px) {
|
||||
@media (max-width: 1100px) {
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
}
|
||||
@ -1191,6 +1244,10 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__tasksWrapper {
|
||||
@ -1234,7 +1291,6 @@
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
padding: 12px 42px 7px 32px;
|
||||
transition: 0.4s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(0.99);
|
||||
@ -1294,6 +1350,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
flex-direction: column;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__tasks {
|
||||
@ -1303,7 +1368,7 @@
|
||||
width: 65%;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 880px) {
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1331,6 +1396,11 @@
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
margin-left: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
@ -1356,8 +1426,9 @@
|
||||
max-height: 450px;
|
||||
padding-right: 15px;
|
||||
|
||||
@media (max-width: 880px) {
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1373,9 +1444,37 @@
|
||||
color: #111112;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
|
||||
&__content {
|
||||
padding: 28px 0;
|
||||
|
||||
.project {
|
||||
background-color: white;
|
||||
max-width: 394px;
|
||||
}
|
||||
}
|
||||
|
||||
.projectsTab {
|
||||
background-color: #DFF1FF;
|
||||
}
|
||||
|
||||
.tasksTab {
|
||||
background-color: #E8FFEB;
|
||||
}
|
||||
|
||||
.archiveTab {
|
||||
background-color: #FFECEF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user