sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changes in my survey styles

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-04-28 12:07:33 +05:00
parent 08b22b07c6
commit 2b2365c280
2 changed files with 54 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

10
SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
View file

@ -36,16 +36,16 @@ export const MySurveyList = () => {
return( return(
<div className={styles.main}> <div className={styles.main}>
{surveys.map((survey) => ( {surveys.map((survey) => (
<div <button
key={survey.id} key={survey.id}
className={styles.survey} className={styles.survey}
onClick={() => handleSurveyClick(survey.id)} onClick={() => handleSurveyClick(survey.id)}
role="button"
tabIndex={0}
> >
<div> <div className={styles.textContent}>
<div className={styles.surveyData}>
<h1 className={styles.title}>{survey.title}</h1> <h1 className={styles.title}>{survey.title}</h1>
<h2 className={styles.description}>{survey.description}</h2> <h2 className={styles.description}>{survey.description}</h2>
</div>
<span className={styles.date}>Дата создания: {survey.date}</span> <span className={styles.date}>Дата создания: {survey.date}</span>
</div> </div>
<div className={`${styles.status} ${ <div className={`${styles.status} ${
@ -53,7 +53,7 @@ export const MySurveyList = () => {
}`}> }`}>
{survey.status === 'active' ? 'Активен' : 'Завершён'} {survey.status === 'active' ? 'Активен' : 'Завершён'}
</div> </div>
</div> </button>
))} ))}
</div> </div>
) )

63
SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css
View file

@ -1,34 +1,67 @@
.main { .main {
background-color: #F6F6F6; background-color: #F6F6F6;
width: 100%; width: 100%;
height: 100vh; min-height: 100vh;
padding: 34px 8%; padding: 34px 10%;
} }
.survey { .survey {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: #FFFFFF; background-color: white;
width: 79%; width: 79%;
border-radius: 14px; border-radius: 14px;
padding: 29px 36px 29px 54px; padding: 29px 36px 29px 54px;
margin-bottom: 23px; margin-bottom: 23px;
gap: 20px;
border: none;
text-align: left;
font: inherit;
outline: none;
}
.textContent {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.status {
width: fit-content;
height: fit-content;
padding: 15px 47px;
border-radius: 15px;
color: #FFFFFF;
white-space: nowrap;
margin-left: 20px;
} }
.completed { .completed {
width: fit-content; background-color: #B0B0B0;
height: fit-content;
padding: 15px 47px;
border-radius: 15px;
background-color: #65B953;
color: #FFFFFF;
} }
.active { .active {
width: fit-content; background-color: #65B953;
height: fit-content; }
padding: 15px 47px;
border-radius: 15px; .surveyData {
background-color: #B0B0B0; margin-bottom: 33px;
color: #FFFFFF; }
.title {
font-size: 40px;
font-weight: 600;
word-break: break-word;
}
.description {
font-size: 24px;
font-weight: 500;
word-break: break-word;
}
.date {
font-size: 18px;
font-weight: 500;
color: #7D7983;
} }