agenda page: aanmeld knop toevoegen

[wingsvn]

een aanmeldknop toevoegen aan alle workshop cards (zie het design van Nazneen)

[wingsvn]

De workshops cards op de huidige agenda pagina van Bieb in Bloei ziet er als volgt uit:

[wingsvn]

De button die toegevoegd moet worden aan de workshop cards, bestaat al. Dit heeft Nazneen voorheen al gebouwd in haar eigen repo.

link: https://github.com/Nazneen05x/S4-S19-Bieb-In-Bloei/tree/main/src/lib/atoms/buttons

[wingsvn]

button component toevoegen:

<div class="rest-cards">
            {#each data.agendas.slice(1, 5) as agenda}
                <!-- laad de 4 meest recente events na de eerste in -->
                <li>
                    <picture>
                        <img src={agenda.cardImage.url} alt="" />
                    </picture>
                    <h2>{agenda.event}</h2>
                    <div>
                        <address>{agenda.address}</address>
                        <span>{agenda.price}</span>
                        <time>{agenda.date}</time>
                        <Button
                            href="/agenda"
                            buttonText="Meld je aan"
                            btnClass="btn-green"
                            svgFill="svg-beige"
                        />
                    </div>
                </li>
            {/each}
        </div>

breedte van de button aanpassen naar gelijke breedte:

.rest-cards > li div {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* gelijke breedte*/
    }

spacing rondom de button

het lukte niet om de button component aan te spreken en hier een margin aan toe te voegen. In plaats daarvan heb ik de time tag een margin meegegeven.

.rest-cards > li div time {
        margin-bottom: 1rem;
    }

[wingsvn]

commit: https://github.com/rutgerkock/buurtcampus-oost/tree/%23203-sign-up-button-agenda-page

[wingsvn]

Er mist nog wel een link naar het aanmeldformulier zelf. --> issue #214