XavierOliveira/Plataforma-de-Tutoriais
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: layout problems on workshops/dashboard/profile pages and Order of workshopsIscribed on profile method

Browse Source
This commit is contained in:
Xavier Oliveira
2026-05-29 10:28:32 +01:00
parent 472285cf61
commit a289d47209
7 changed files with 38 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-plataforma-tutoriais/src/pages/private/contactos/index.tsx
View File

@@ -100,7 +100,7 @@ export default function Contactos() {
<div className="mt-4"> <div className="mt-4">
<form onSubmit={sendMail} className="pt-2"> <form onSubmit={sendMail} className="pt-2">
<div className="row g-3 bg-white p-4 rounded-3"> <div className="row g-3 bg-white p-4" style={{ borderRadius: "var(--border-radius)" }}>
<div className="col-12 col-md-6 text-start mt-0"> <div className="col-12 col-md-6 text-start mt-0">
<label className={styles.label} htmlFor="name">Nome</label> <label className={styles.label} htmlFor="name">Nome</label>
<input type="text" className="form-control py-2 border" placeholder="Nome completo" id="name" name="name" /> <input type="text" className="form-control py-2 border" placeholder="Nome completo" id="name" name="name" />

12
frontend-plataforma-tutoriais/src/pages/private/dashboard/index.tsx
View File

@@ -246,7 +246,7 @@ export default function Home() {
<div className="row mt-4 mt-sm-1 px-1 px-sm-2"> <div className="row mt-4 mt-sm-1 px-1 px-sm-2">
{workshops.length > 0 ? workshops.map((workshop: Workshop) => ( {workshops.length > 0 ? workshops.map((workshop: Workshop) => (
<div className="col-12 col-sm-6 col-lg-4 p-2 position-relative"> <div className="col-12 col-sm-6 col-lg-4 p-2 position-relative">
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} d-flex flex-column text-start pb-3 h-100`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`${API_URL}/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
@@ -260,23 +260,21 @@ export default function Home() {
<p className={`${styles.timeWorkshop}`}> <LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p> <p className={`${styles.timeWorkshop}`}> <LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p>
</div> </div>
</div> </div>
<div className="px-3"> <h2 className={`${styles.titleWorkshop} d-block text-start mt-3 px-3 flex-grow-1 mb-0`}>{workshop.title}</h2>
<h2 className={`${styles.titleWorkshop} d-block text-start mt-3`}>{workshop.title}</h2> <div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3 px-3">
<div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3 ">
<span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span> <span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span>
<span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span> <span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span>
</div> </div>
</div>
<div className="d-flex flex-wrap justify-content-evenly px-3 gap-2 mt-3"> <div className="d-flex flex-wrap justify-content-evenly px-3 gap-2 mt-3">
<Link to={`${role === 1 ? `/admin/edit-workshop/${workshop.id}` : `/workshop/${workshop.id}`}`} className={`${styles.linkWorkshop} d-block text-center py-2 px-5 text-decoration-none`}> Detalhes </Link> <Link to={`${role === 1 ? `/admin/edit-workshop/${workshop.id}` : `/workshop/${workshop.id}`}`} className={`${styles.linkWorkshop} d-block text-center py-2 px-5 text-decoration-none`}> Detalhes </Link>
{role !== 1 ? ( {role !== 1 ? (
(workshop.users as unknown as number[]).includes(userId as number) ? ( (workshop.users as unknown as number[]).includes(userId as number) ? (
<button type="button" className={`${styles.btncancelarInscricao} btn text-center py-2 text-decoration-none`} onClick={() => cancelarInscricao(workshop.id)} key={workshop.id} style={{ width: '180px' }}> <button type="button" className={`${styles.btncancelarInscricao} btn text-center py-2 text-decoration-none`} onClick={() => cancelarInscricao(workshop.id)} key={workshop.id}>
Anular inscrição Anular inscrição
</button> </button>
) : ( ) : (
<button type="button" className={`${styles.btnInscrever} btn text-center py-2 px-4 text-decoration-none`} onClick={() => inscrever(workshop.id)} key={workshop.id} style={{ width: '180px' }}> <button type="button" className={`${styles.btnInscrever} btn text-center py-2 px-4 text-decoration-none`} onClick={() => inscrever(workshop.id)} key={workshop.id}>
Inscrever-me Inscrever-me
</button> </button>
) )

6
frontend-plataforma-tutoriais/src/pages/private/dashboard/styles.module.css
View File

@@ -73,7 +73,7 @@
.linkWorkshop { .linkWorkshop {
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
@@ -90,7 +90,7 @@
.btncancelarInscricao { .btncancelarInscricao {
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
@@ -107,7 +107,7 @@
.btnInscrever { .btnInscrever {
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;

24
frontend-plataforma-tutoriais/src/pages/private/profile/index.tsx
View File

@@ -212,7 +212,7 @@ export default function Profile() {
</div> </div>
<div className="col-12 d-flex flex-column flex-md-row gap-0 gap-md-2 text-end align-items-start align-items-md-end mt-md-0 mx-auto mx-md-0 flex-wrap"> <div className="col-12 d-flex flex-column flex-md-row gap-0 gap-md-2 text-end align-items-start align-items-md-end mt-md-0 mx-auto mx-md-0 flex-wrap">
<span className="d-flex justify-content-center flex-wrap flex-sm-nowrap border border-secondary-subtle py-2 px-2 rounded-3 fs-6 fw-medium py-0" style={{ maxWidth: "fit-content", height: "fit-content" }}>Membro desde: <b className="fw-bold fs-6">{new Date(userData?.created_at as string).toLocaleDateString('pt-PT')}</b></span> <span className="d-flex justify-content-center flex-wrap flex-sm-nowrap border border-secondary-subtle py-2 px-2 rounded-3 fs-6 fw-medium py-0" style={{ maxWidth: "fit-content", height: "fit-content" }}>Membro desde: <b className="fw-bold fs-6">{new Date(userData?.created_at as string).toLocaleDateString('pt-PT')}</b></span>
<div className="d-flex flex-column flex-sm-row flex-grow-1 justify-content-evenly justify-content-md-end flex-wrap mt-3 mx-auto"> <div className="d-flex flex-wrap flex-grow-1 justify-content-evenly justify-content-md-end flex-wrap mt-3 mx-auto">
<a className={`${styles.updateButton} text-decoration-none text-primary text-center px-3`} onClick={() => { setFormEdit(true); }}> Editar <LuPencil className={`${styles.icon} mb-1 text-primary`} /></a> <a className={`${styles.updateButton} text-decoration-none text-primary text-center px-3`} onClick={() => { setFormEdit(true); }}> Editar <LuPencil className={`${styles.icon} mb-1 text-primary`} /></a>
<a className={`${styles.passwordButton} text-decoration-none text-danger px-1 px-md-3 <a className={`${styles.passwordButton} text-decoration-none text-danger px-1 px-md-3
`} onClick={() => { setFormEditPassword(true); }}> Alterar password <LuKeyRound className={`${styles.icon} mb-1 text-danger`} /></a> `} onClick={() => { setFormEditPassword(true); }}> Alterar password <LuKeyRound className={`${styles.icon} mb-1 text-danger`} /></a>
@@ -351,7 +351,7 @@ export default function Profile() {
</div> </div>
</div> </div>
<div className="ms-0 px-4 mt-4"> <div className="ms-0 px-lg-4 mt-4">
<div className="d-flex flex-column flex-sm-row justify-content-between align-items-center px-0" > <div className="d-flex flex-column flex-sm-row justify-content-between align-items-center px-0" >
<h2 className={`${styles.subtitle} text-center text-sm-start mt-4 mt-sm-3 mb-4`}>{role === 1 ? "Workshops agendados" : "Workshops Inscrito"}</h2> <h2 className={`${styles.subtitle} text-center text-sm-start mt-4 mt-sm-3 mb-4`}>{role === 1 ? "Workshops agendados" : "Workshops Inscrito"}</h2>
<Link to="/workshops" className={`${styles.link} text-decoration-none fw-semibold fs-5 mt-sm-3 mb-sm-4`}>Ver workshops <LuArrowUpRight className="mb-1 me-2" size={25} /></Link> <Link to="/workshops" className={`${styles.link} text-decoration-none fw-semibold fs-5 mt-sm-3 mb-sm-4`}>Ver workshops <LuArrowUpRight className="mb-1 me-2" size={25} /></Link>
@@ -359,7 +359,7 @@ export default function Profile() {
<div className="row mt-4 mt-sm-1 px-2 mb-5"> <div className="row mt-4 mt-sm-1 px-2 mb-5">
{role !== 1 && workshopsCount > 0 ? workshops.map((workshop: Workshop) => ( {role !== 1 && workshopsCount > 0 ? workshops.map((workshop: Workshop) => (
<div className="col-12 col-sm-6 col-lg-4 p-2 position-relative"> <div className="col-12 col-sm-6 col-lg-4 p-2 position-relative">
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} d-flex flex-column text-start pb-3 h-100`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`${API_URL}/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
@@ -369,22 +369,20 @@ export default function Profile() {
onLoad={onImageSkeletonLoad} onLoad={onImageSkeletonLoad}
/> />
<div className="position-absolute w-100 bottom-0 justify-content-evenly d-none d-md-flex d-xl-none d-xxl-flex mb-2"> <div className="position-absolute w-100 bottom-0 justify-content-evenly d-none d-md-flex d-xl-none d-xxl-flex mb-2">
<p className={`${styles.dateWorkshop}`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</p> <p className={`${styles.dateWorkshop} px-1`}><LuCalendar className={`${styles.icon} mb-1 me-1`} />{workshop.date.split('-').reverse().join('-')}</p>
<p className={`${styles.timeWorkshop}`}> <LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p> <p className={`${styles.timeWorkshop} px-1`}> <LuClock3 className={`${styles.icon} mb-1 me-1`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p>
</div> </div>
</div> </div>
<div className="px-3"> <h2 className={`${styles.titleWorkshop} d-block text-start mt-3 px-3 flex-grow-1 mb-0`}>{workshop.title}</h2>
<h2 className={`${styles.titleWorkshop} d-block text-start mt-3`}>{workshop.title}</h2> <div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3 px-3">
<div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3 ">
<span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span> <span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span>
<span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span> <span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span>
</div> </div>
</div>
<div className="d-flex flex-wrap justify-content-evenly px-3 gap-2 mt-3"> <div className="d-flex flex-wrap justify-content-evenly px-3 gap-2 mt-3">
<Link to={`${role === 1 ? `/admin/edit-workshop/${workshop.id}` : `/workshop/${workshop.id}`}`} className={`${styles.linkWorkshop} d-block text-center py-2 px-5 text-decoration-none`}> Detalhes </Link> <Link to={`${role === 1 ? `/admin/edit-workshop/${workshop.id}` : `/workshop/${workshop.id}`}`} className={`${styles.linkWorkshop} d-block text-center py-2 px-5 text-decoration-none`}> Detalhes </Link>
{role !== 1 ? ( {role !== 1 ? (
<button type="button" className={`${styles.btncancelarInscricao} btn text-center py-2 text-decoration-none`} onClick={() => cancelarInscricao(workshop.id)} key={workshop.id} style={{ width: '180px' }}> <button type="button" className={`${styles.btncancelarInscricao} btn text-center py-2 text-decoration-none`} onClick={() => cancelarInscricao(workshop.id)} key={workshop.id}>
Anular inscrição Anular inscrição
</button> </button>
) : null} ) : null}
@@ -398,7 +396,7 @@ export default function Profile() {
</div> </div>
) : null} ) : null}
{role === 1 && workshopsCount > 0 ? nextWorkshops.map((workshop: Workshop) => ( {role === 1 && workshopsCount > 0 ? nextWorkshops.map((workshop: Workshop) => (
<div className="col-12 col-sm-6 col-lg-4 p-2 position-relative"> <div className="col-12 col-sm-6 col-lg-4 p-2 position-relative">
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} text-start pb-3`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
@@ -410,8 +408,8 @@ export default function Profile() {
onLoad={onImageSkeletonLoad} onLoad={onImageSkeletonLoad}
/> />
<div className="position-absolute w-100 bottom-0 justify-content-evenly d-none d-md-flex d-xl-none d-xxl-flex mb-2"> <div className="position-absolute w-100 bottom-0 justify-content-evenly d-none d-md-flex d-xl-none d-xxl-flex mb-2">
<p className={`${styles.dateWorkshop}`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</p> <p className={`${styles.dateWorkshop} px-1`}><LuCalendar className={`${styles.icon} mb-1 me-1`} />{workshop.date.split('-').reverse().join('-')}</p>
<p className={`${styles.timeWorkshop}`}> <LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p> <p className={`${styles.timeWorkshop} px-1`}> <LuClock3 className={`${styles.icon} mb-1 me-1`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p>
</div> </div>
</div> </div>
<div className="px-3"> <div className="px-3">

14
frontend-plataforma-tutoriais/src/pages/private/profile/styles.module.css
View File

@@ -227,17 +227,19 @@
height: 150px; height: 150px;
} }
.icon{
color: var(--text-primary-color);
}
.linkWorkshop { .linkWorkshop {
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
background-color: var(--bg-grey); background-color: var(--bg-grey);
color: var(--text-black); color: var(--text-black);
transition: all .3s ease; transition: all .3s ease;
&:hover { &:hover {
background-color: var(--bg-primary-color-opacity); background-color: var(--bg-primary-color-opacity);
color: var(--text-primary-color); color: var(--text-primary-color);
@@ -246,15 +248,13 @@
.btncancelarInscricao { .btncancelarInscricao {
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
background-color: var(--bg-primary-color-opacity); background-color: var(--bg-primary-color-opacity);
color: var(--text-primary-color); color: var(--text-primary-color);
transition: all .3s ease; transition: all .3s ease;
&:hover { &:hover {
background-color: var(--bg-primary-color); background-color: var(--bg-primary-color);
color: var(--text-white); color: var(--text-white);
@@ -263,7 +263,7 @@
.btnInscrever { .btnInscrever {
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;

12
frontend-plataforma-tutoriais/src/pages/private/workshops/index.tsx
View File

@@ -245,7 +245,7 @@ export default function Workshops() {
<> <>
{workshops.map((workshop) => ( {workshops.map((workshop) => (
<div className="col-12 col-sm-6 col-lg-4 p-2 position-relative"> <div className="col-12 col-sm-6 col-lg-4 p-2 position-relative">
<div className={`${styles.boxWorkshop} text-start pb-3`}> <div className={`${styles.boxWorkshop} d-flex flex-column text-start pb-3 h-100`}>
<div className={`${styles.thumbnailWorkshop} position-relative`}> <div className={`${styles.thumbnailWorkshop} position-relative`}>
<img <img
src={`${API_URL}/storage/${workshop.image}`} src={`${API_URL}/storage/${workshop.image}`}
@@ -264,13 +264,11 @@ export default function Workshops() {
<p className={`${styles.timeWorkshop}`}> <LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p> <p className={`${styles.timeWorkshop}`}> <LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5)} - {workshop.time_end.slice(0, 5)}</p>
</div> </div>
</div> </div>
<div className="px-3"> <h2 className={`${styles.titleWorkshop} d-block text-start mt-3 px-3 flex-grow-1 mb-0`}>{workshop.title}</h2>
<h2 className={`${styles.titleWorkshop} d-block text-start mt-3`}>{workshop.title}</h2> <div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3 px-3">
<div className="position-relative d-flex flex-column d-md-none d-xl-flex d-xxl-none mt-3 ">
<span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span> <span className={`${styles.dateWorkshopMobile} text-start mb-1`}><LuCalendar className={`${styles.icon} mb-1 me-2`} />{workshop.date.split('-').reverse().join('-')}</span>
<span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span> <span className={`${styles.timeWorkshopMobile} text-start`}><LuClock3 className={`${styles.icon} mb-1 me-2`} />{workshop.time_start.slice(0, 5).split(':').join('h')} - {workshop.time_end.slice(0, 5).split(':').join('h')}</span>
</div> </div>
</div>
<div className="d-flex flex-wrap justify-content-evenly px-3 gap-2 mt-3"> <div className="d-flex flex-wrap justify-content-evenly px-3 gap-2 mt-3">
{workshop.status === "realized" || workshop.status === "canceled" ? ( {workshop.status === "realized" || workshop.status === "canceled" ? (
@@ -286,7 +284,7 @@ export default function Workshops() {
search: debouncedSearch, search: debouncedSearch,
status: selectedWorkshopStatus, status: selectedWorkshopStatus,
}); });
}} key={workshop.id} style={{ width: '180px' }}> }} key={workshop.id}>
Anular inscrição Anular inscrição
</button> </button>
</> </>
@@ -301,7 +299,7 @@ export default function Workshops() {
search: debouncedSearch, search: debouncedSearch,
status: selectedWorkshopStatus, status: selectedWorkshopStatus,
}); });
}} key={workshop.id} style={{ width: '180px' }}> }} key={workshop.id}>
Inscrever-me Inscrever-me
</button> </button>
</> </>

9
frontend-plataforma-tutoriais/src/pages/private/workshops/styles.module.css
View File

@@ -45,11 +45,10 @@
.linkWorkshop{ .linkWorkshop{
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
background-color: var(--bg-grey); background-color: var(--bg-grey);
color: var(--text-black); color: var(--text-black);
transition: all .3s ease; transition: all .3s ease;
@@ -61,11 +60,10 @@
.btncancelarInscricao{ .btncancelarInscricao{
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
background-color: var(--bg-primary-color-opacity); background-color: var(--bg-primary-color-opacity);
color: var(--text-primary-color); color: var(--text-primary-color);
transition: all .3s ease; transition: all .3s ease;
@@ -77,11 +75,10 @@
.btnInscrever{ .btnInscrever{
display: block; display: block;
width: fit-content; width: 160px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 600; font-weight: 600;
background-color: var(--tertiary-color); background-color: var(--tertiary-color);
color: var(--text-white); color: var(--text-white);
transition: all .3s ease; transition: all .3s ease;