search

fdnd-agency / avl

MIT License
0 stars 1 forks source link

Bouwen van preview kaartjes voor de webinars #12

Closed itsValyria closed 4 hours ago

itsValyria commented 4 hours ago

Hierbij behoort ook het dynamisch maken van de data die in de kaartjes komen te staan.

Mobiel Image

Desktop Image

itsValyria commented 4 hours ago

Breakdown schets mobiel: Image

Breakdown schets desktop: Image

itsValyria commented 4 hours ago

JavaScript

Ik maak variabelen aan voor de data die uit de database moet komen. Deze heb ik dezelfde naam gegeven als de naam die ze in de data base hebben zodat het met minder code doorgegeven kan worden aan dit component (#25). https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/lib/webinar-overview.svelte#L1-L8

HTML

Ik heb een article gebruikt met daarin een link naar de webinar detailpage. In deze link zit een div met de thumbnail en duration, een title, de sprekers en de categorieën. Aangezien je meerdere sprekers en categorieën kunt hebben heb ik een each loop gebruikt. Voor de sprekers heb ik een span gebruikt zodat deze automatisch nettjes naast elkaar komen te staan.

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/lib/webinar-overview.svelte#L10-L28

CSS

De titel is vaak veelste lang dus heb ik met display: -webkit-box; -webkit-box-orient: vertical; en -webkit-line-clamp: 1; ervoor gezorgd dat je maar 1 regel ziet op mobiel. En op desktop zie je er 2. Met text-overflow: ellipsis; krijg je de ... aan het einde en met word-break: break-all worden alle worden woorden die te lang zijn onderbroken.

Met span:not(:first-child)::before heb ik ervoor gezorgd dat als er meerdere sprekers zijn je - er tussen ziet.

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/lib/webinar-overview.svelte#L30-L131