Improve /profil

This commit is contained in:
pikiou 2022-03-17 17:47:41 +01:00
parent ce13e0c8b4
commit 60b7824011
10 changed files with 43 additions and 31 deletions

View File

@ -30,9 +30,6 @@ const MainMenu: FC = (): JSX.Element | null => {
<li className={styles.mainMenuItem}>
<a href="/profil">Mon profil</a>
</li>
<li className={styles.mainMenuItem}>
<a href="/equipes">Equipes</a>
</li>
<button type="button" className={styles.close} onClick={onClose}>
×
</button>

View File

@ -16,7 +16,7 @@ import VolunteerConfirmation from "../VolunteerConfirmation/VolunteerConfirmatio
const Board: FC = (): JSX.Element => (
<>
<VolunteerConfirmation />
<ContentTitle title="Pour le jour J" />
<ContentTitle title="Profil spécifique au festival" />
<DayWishes />
<DayWishesFormModal />
<ParticipationDetails />

View File

@ -14,9 +14,10 @@ const DayWishes: FC = (): JSX.Element | null => {
return (
<div className={styles.dayWishes}>
<div className={styles.title}>Mes présences</div>
<div className={styles.daysLine}>
<span className={styles.dayLineTitle}>Mes jours de présence :</span>
{dayWishesString && <span>{dayWishesString}</span>}
<span className={styles.dayLineTitle}>Mes jours :</span>
{dayWishesString && <b>{dayWishesString}</b>}
{!dayWishesString && <span className={styles.dayLineEmpty}>Non renseignés</span>}
</div>
{comment && (

View File

@ -1,6 +1,11 @@
@import "../../../theme/variables";
@import "../../../theme/mixins";
.title {
padding-bottom: 5px;
font-weight: bold;
}
.dayWishes {
@include inner-content-wrapper();
@ -17,7 +22,6 @@
.dayLineTitle {
padding-right: 5px;
font-weight: bold;
}
.dayLineEmpty {

View File

@ -50,7 +50,7 @@ const DayWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element => {
}, [selection, commentRef, saveWishes, afterSubmit])
return (
<div className={styles.dayWishesForm}>
<div>
<div className={styles.dayWishesTitle}>Mes jours de présence</div>
<ul className={styles.dayWishesList}>
{daysChoice.map(({ id, label }) => (

View File

@ -1,10 +1,6 @@
@import "../../../theme/variables";
@import "../../../theme/mixins";
.dayWishesForm {
width: 470px;
}
.dayWishesTitle {
padding: 15px 0;
font-weight: bold;
@ -13,6 +9,8 @@
.dayWishesList {
@include clear-ul-style;
text-align: center;
}
.dayWishesItem {

View File

@ -23,30 +23,30 @@ const ParticipationDetails: FC<Props> = (): JSX.Element | null => {
return (
<div className={styles.root}>
<div className={styles.title}>Mes informations pour le festival</div>
<div className={styles.title}>Mes infos logistiques</div>
{tshirtCount === 0 && (
<div className={styles.line}>
Je n'ai <b>aucun t-shirt</b>. (Taille <b>{tshirtSize}</b>)
Je n'ai <b>aucun t-shirt</b> et je suis taillé <b>{tshirtSize}</b>
</div>
)}
{tshirtCount === 1 && (
<div className={styles.line}>
J'ai déjà <b>1 t-shirt</b>. (Taille <b>{tshirtSize}</b>)
J'ai déjà <b>1 t-shirt</b> et je suis taillé <b>{tshirtSize}</b>
</div>
)}
{tshirtCount === 2 && (
<div className={styles.line}>
J'ai déjà <b>2 t-shirts</b>.
J'ai déjà <b>2 t-shirts</b>
</div>
)}
{adult === 0 && (
<div className={styles.line}>
Je suis <b>mineur</b>
Je serai <b>mineur</b> les 2-3 juillet 2022
</div>
)}
{adult === 1 && (
<div className={styles.line}>
Je suis <b>majeur</b>
Je serai <b>majeur</b> les 2-3 juillet 2022
</div>
)}
<div className={styles.line}>

View File

@ -61,7 +61,7 @@ const ParticipationDetailsForm: FC<Props> = ({ afterSubmit }): JSX.Element | nul
return (
<div>
<div className={styles.title}>Mes informations pour le festival</div>
<div className={styles.title}>Mes infos logistiques</div>
<div className={styles.inputWrapper}>
<div className={styles.leftCol}>
<div className={styles.tshirtCountTitle}>Combien as-tu de t-shirts PeL ?</div>
@ -98,10 +98,12 @@ const ParticipationDetailsForm: FC<Props> = ({ afterSubmit }): JSX.Element | nul
</div>
<div className={styles.inputWrapper}>
<div className={styles.leftCol}>
<div className={styles.tshirtSizesTitle}>Taille</div>
<label htmlFor="tshirtSize" className={styles.tshirtSizesTitle}>
Taille
</label>
</div>
<div>
<select ref={sizeRef} className={styles.tshirtCountSelect}>
<select id="tshirtSize" ref={sizeRef} className={styles.tshirtCountSelect}>
{tshirtSizes.map((size) => (
<option key={size} value={size}>
{size}
@ -138,7 +140,9 @@ const ParticipationDetailsForm: FC<Props> = ({ afterSubmit }): JSX.Element | nul
</div>
<div className={styles.inputWrapper}>
<div className={styles.leftCol}>
<label htmlFor="dday-diet">Préférence alimentaire</label>
<label className={styles.foodTitle} htmlFor="dday-diet">
Préférence alimentaire
</label>
</div>
<div>
<input

View File

@ -3,12 +3,13 @@
.title {
padding: 4px;
margin: 15px 0;
font-weight: bold;
text-align: center;
}
.inputWrapper {
margin: 10px 0;
margin: 25px 0;
@include desktop {
display: flex;
@ -29,28 +30,26 @@
flex: 0 0 240px;
}
.tshirtWrapper {
margin: 10px 0;
height: 28px;
}
.tshirtCountTitle {
display: inline-block;
margin-top: 6px;
width: 240px;
margin-bottom: 10px;
}
.tshirtCountLabel {
margin-bottom: 10px;
width: 55px;
}
.tshirtSizesTitle {
display: inline-block;
width: 240px;
margin-bottom: 10px;
}
.tshirtCountSelect {
width: 120px;
margin-bottom: 10px;
border: 1px solid $color-grey-medium;
border-radius: 4px;
background-color: $color-white;
@ -59,11 +58,12 @@
.adultTitle {
display: inline-block;
margin-top: 6px;
width: 240px;
margin-bottom: 10px;
}
.adultLabel {
margin-bottom: 10px;
width: 55px;
}
@ -71,3 +71,7 @@
margin-bottom: 10px;
text-align: center;
}
.foodTitle {
margin-bottom: 10px;
}

View File

@ -31,7 +31,11 @@ const TeamWishes: FC<Props> = (): JSX.Element | null => {
return (
<div className={styles.root}>
<div className={styles.title}>Mon choix d'équipe</div>
{teamWishesString && <span>{teamWishesString}</span>}
{teamWishesString && (
<span>
Mes équipes préférées : <b>{teamWishesString}</b>
</span>
)}
{!teamWishesString && <span className={styles.lineEmpty}>Non renseignés</span>}
{comment && (
<div className={styles.commentLine}>