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

fix: layout of the workshops on profile page

Browse Source
This commit is contained in:
Xavier Oliveira
2026-05-29 10:47:19 +01:00
parent a289d47209
commit a879dbf94f
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -398,7 +398,7 @@ export default function Profile() {
{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} 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}`}
@@ -412,16 +412,13 @@ export default function Profile() {
<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> <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>
</div> </div>
</div> </div>
</div> </div>