apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix adaptive layout in project list

Browse Source
This commit is contained in:
Victor Batischev 2024-02-05 16:44:03 +03:00
parent 4a81441d35
commit 3cc306bbc3
8 changed files with 29 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AuthBlock/authBlock.scss
View File

@ -167,12 +167,8 @@
top: -20px; top: -20px;
@media (max-width: 900px) { @media (max-width: 900px) {
order: 1; top: 100px;
position: inherit;
right: inherit;
top: inherit;
max-width: 115px; max-width: 115px;
margin-bottom: 35px;
} }
} }
} }

2
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -133,7 +133,7 @@
.edit-project, .edit-project,
.add-worker, .add-worker,
.edit-column { .edit-column {
background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%); // background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
.title-project { .title-project {
margin-top: 20px; margin-top: 20px;
} }

8
src/components/Modal/ModalErrorLogin/modalErrorLogin.scss
View File

@ -1,8 +1,8 @@
.error-login { .error-login {
position: relative; position: relative;
padding: 54px 76px; padding: 30px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px; border-radius: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -15,9 +15,7 @@
} }
p { p {
font-size: 12px; font-size: 15px;
line-height: 14px;
width: 176px;
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
margin-bottom: 30px; margin-bottom: 30px;

2
src/components/ProjectTicket/ProjectTicket.jsx
View File

@ -75,8 +75,6 @@ export const ProjectTicket = ({ project, index }) => {
setModalDelete(false); setModalDelete(false);
} }
function linkProject() {}
return ( return (
<div className={`project project-${project.id}`} key={index}> <div className={`project project-${project.id}`} key={index}>
<Link <Link

18
src/components/ProjectTicket/projectTicket.scss
View File

@ -2,13 +2,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
width: 322px; width: 300px;
background: #f1f1f1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
max-width: 440px;
transition: 0.4s; transition: 0.4s;
&:hover { &:hover {
@ -26,15 +24,12 @@
&__link { &__link {
font-weight: 700; font-weight: 700;
width: 194px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 18px; font-size: 18px;
line-height: 32px;
color: #111112; color: #111112;
margin-bottom: 22px; margin-bottom: 10px;
max-width: 380px;
&:hover { &:hover {
color: black; color: black;
@ -45,7 +40,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
margin-bottom: 45px; margin-bottom: 30px;
p { p {
color: #6f6f6f; color: #6f6f6f;
@ -53,7 +48,6 @@
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 17px; line-height: 17px;
width: 60px;
} }
.count { .count {
@ -97,13 +91,13 @@
} }
&__open-tracker { &__open-tracker {
padding: 17px 26px 16px; padding: 10px 15px;
} }
&__statistics { &__statistics {
position: absolute; position: absolute;
bottom: 18px; bottom: 13px;
left: 26px; left: 15px;
color: #0042b4; color: #0042b4;
text-decoration: underline; text-decoration: underline;
font-size: 14px; font-size: 14px;

4
src/pages/Tracker/Tracker.jsx
View File

@ -201,7 +201,7 @@ export const Tracker = () => {
)) && )) &&
!loader && ( !loader && (
<div className="no-projects"> <div className="no-projects">
<div className="no-projects__createNew"> <div className="no-projects__create-new">
<div> <div>
<img src={noProjects} alt="noProjectImg" /> <img src={noProjects} alt="noProjectImg" />
<p>Создайте свой первый проект</p> <p>Создайте свой первый проект</p>
@ -251,7 +251,7 @@ export const Tracker = () => {
<p> <p>
{25} - {35} {25} - {35}
</p> </p>
<h2>Сентября,</h2> <h3>Сентября,</h3>
<h3>2023</h3> <h3>2023</h3>
</div> </div>

29
src/pages/Tracker/tracker.scss
View File

@ -145,10 +145,10 @@
row-gap: 30px; row-gap: 30px;
display: none; display: none;
align-items: center; align-items: center;
justify-content: center;
@media (max-width: 785px) { @media (max-width: 785px) {
row-gap: 25px; row-gap: 25px;
justify-content: center;
padding: 0 15px 20px; padding: 0 15px 20px;
} }
@ -158,7 +158,7 @@
padding: 20px; padding: 20px;
width: 100%; width: 100%;
&__createNew { &__create-new {
display: flex; display: flex;
div { div {
display: flex; display: flex;
@ -177,14 +177,11 @@
} }
.create-project-btn { .create-project-btn {
max-width: 322px; width: 300px;
width: 322px; height: 113px;
height: 166px;
border-radius: 12px; border-radius: 12px;
background: #ecf8e5; background: #ecf8e5;
color: #000000; color: #000000;
font-weight: 400;
font-size: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -192,10 +189,9 @@
&__text { &__text {
text-align: left; text-align: left;
font-size: 14px; font-weight: 400;
font-weight: 250; font-size: 18px;
width: 190px; margin-left: 15px;
margin-left: 25px;
} }
&:hover { &:hover {
@ -203,10 +199,13 @@
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
} }
@media (max-width: 650px) { @media (max-width: 1068px) {
height: 40px; width: 47%;
font-size: 12px; }
height: 166px;
@media (max-width: 785px) {
max-width: 394px;
width: 100%;
} }
} }
} }

9
src/pages/TrackerRegistration/trackerRegistration.scss
View File

@ -94,13 +94,8 @@
top: -100px; top: -100px;
right: 58px; right: 58px;
@media (max-width: 1000px) { @media (max-width: 900px) {
position: inherit; display: none;
order: 1;
top: inherit;
right: inherit;
max-width: 115px;
margin-bottom: 25px;
} }
} }
} }