Changes

19

\Components\Marketing\Events

list

<div class="event-list-boxy" itemscope itemtype="http://schema.org/Event">

    <!-- Event Icon -->

    <logic:if test="$templateRegionsShown['icon'] && $event['event_icon']" evaluateat="render">

        <div class="event-list-boxy-icon">

            <div class="event-list-boxy-category">

                <logic:variable as="arrCategories" value="[? \Components\Marketing\Events\Categories::getAllForEvent($event['event_id']) ?]" />

                <data:repeater id="event_category_repeater" datasource="$arrCategories" as="arrCategory">

                    <a style="pointer-events: none"><small>[? \Components\Marketing\Events\Categories::getColumn($arrCategory['event_category_id'], 'event_category_title')?]</small></a>

                </data:repeater>

            </div>

            <standard:image width="100%" src="[? $event['event_icon'] ?]" alt="[? $event['event_title'] ?]" maintainAspect="crop" height="200" style="border-radius: 5px;" />

        </div>

    </logic:if>



    <div style="padding: 20px 30px 20px 30px;">

        <a style="pointer-events: none"><hr class="event-list-boxy-accent" /></a>

        <h3 style="text-align: left;">[?? $event['event_title'] ??]</h3>



       

            <!-- Date -->

            <table>

                <logic:if test="$templateRegionsShown['date'] && $event['event_start_datetime']">

                    <logic:if test="$templateRegionsShown['date'] && $event['event_start_datetime']">

                        <tr>

                            <td style="vertical-align: top; width: 30px">

                                <standard:icon library="feather" iconstyle="standard" iconname="calendar" size="4" style="width: 18px; height: 18px;" />

                            </td>

                            <td width="auto">

                                <time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], null, '') ?]</time>

                                <logic:if test="$event['event_end_datetime'] && \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], 'MMM d', '') != \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], 'MMM d', '')">

                                    -

                                    <time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], null, '') ?]</time>

                                </logic:if>

                            </td>

                        </tr>

                    </logic:if>



                    <!-- Time -->

                    <logic:if test="$templateRegionsShown['time']">

                        <tr>

                            <td style="vertical-align: top; width: 30px">

                                <standard:icon library="feather" iconstyle="standard" iconname="clock" size="4" style="width: 18px; height: 18px;" />

                            </td>

                            <td width="auto">

                                <time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], '') ?]</time>

                                <logic:if test="$event['event_end_datetime']">

                                    -

                                    <time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], '') ?]</time>

                                </logic:if>

                            </td>

                        </tr>

                    </logic:if>

                </logic:if>

                

                <!-- Location -->

                <logic:if test="$templateRegionsShown['location'] && ($event['event_location_id'] != null)">

                    <logic:variable value="[? \Components\Marketing\Events\Locations::get($event['event_location_id']) ?]" as="eventLocation" />

                    <tr>

                        <td style="vertical-align: top; width:30px;">

                            <standard:icon library="feather" iconstyle="standard" iconname="map-pin" size="4" style="width: 18px; height: 18px;" />

                        </td>

                        <td itemprop="location" itemscope itemtype="http://schema.org/Place">

                            <span itemprop="name">[? $eventLocation['event_location_description'] ?]</span>

                        </td>

                    </tr>

                </logic:if>



                <!-- Price -->

                <logic:if test="$templateRegionsShown['price'] && \Components\Marketing\Events::getEventPrice($event['event_id'])">

                    <tr>

                        <td style="vertical-align: top; width:30px;">

                            <standard:icon library="feather" iconstyle="standard" iconname="dollar-sign" size="4" style="width: 18px; height: 18px;" />

                        </td>

                        <td>

                            <logic:if test="\Components\Marketing\Events::getEventPrice($event['event_id']) == 0">Free</logic:if>

                            <logic:else>[?? \Components\Marketing\Events::renderEventPrice($event['event_id']) ??]</logic:else>

                        </td>

                    </tr>

                </logic:if>



                <!-- Places Available -->

                <logic:if test="$templateRegionsShown['places_available'] && $event['event_capacity']">

                    <tr>

                        <td style="vertical-align: top; width:30px;">

                            <standard:icon library="fontawesome" iconstyle="solid" iconname="users" size="4" style="width: 18px; height: 18px;" />

                        </td>

                        <td>[? $event['event_capacity'] - $event['event_attending_count'] ?] Places Remaining</td>

                    </tr>

                </logic:if>

        </table>



        <!-- Description -->

        <logic:if test="$templateRegionsShown['short_description'] && $event['event_description_short']">

            <br />

            <p itemprop="description">[?? $event['event_description_short'] ??]</p>

        </logic:if>



        <!-- Event RSVP -->

        <logic:if test="$templateRegionsShown['rsvp']">

            <logic:variable as="eventRSVP" value="[?? \Components\Marketing\Events::canContactRSVPForEvent($event['event_id'], \Components\Customers\Contacts::currentContactId()) ??]" />



            <logic:if test="$templateRegionsShown['rsvp_deadline'] && $eventRSVP['can_rsvp'] && $event['event_rsvp_deadline_datetime']">

                Sign up before <time itemprop="rsvpResponseDueDate" datetime="[? date_format(date_create($event['event_rsvp_deadline_datetime']), 'Y-m-d\TH:i:s') ?]">[? \Components\Marketing\Events::renderTime($event, $event['event_rsvp_deadline_datetime']) ?]</time>

            </logic:if>



            <logic:if test="$eventRSVP['can_rsvp']">

                <br /><br /><br /><br />

                <a class="event-list-boxy-button" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">View Details</a>

            </logic:if>

            <logic:else test="!$eventRSVP['can_rsvp']">

                <br />

                <p style="text-align: center;"><small>[? $eventRSVP['reason'] ?].</small></p>

            </logic:else>

        </logic:if>

    </div>



    <a class="event-floating-link" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]" target="[? $event['event_external_rsvp_url'] ? '_blank' : '_self' ?]"></a>  

</div>

.templateContainer--marketingEvents-list-custom

{

	background-color: transparent;

	position: relative;

	min-height: 200px;

	display: grid;

	grid-template-columns: 1fr;

	align-items: stretch;

	overflow: visible;

	width: 100%;

	text-align: left;

	gap: 20px;



	/* Medium to small screens: two items per row */

	@media (min-width: 576px)

	{

		grid-template-columns: repeat(2, 1fr);

	}



	/* Large screens: three items per row */

	@media (min-width: 992px)

	{

		grid-template-columns: repeat(3, 1fr);

	}

}



.event-list-boxy

{

	min-width: 250px;

	position: relative;

	background-color: #ffffff;

	padding: 0;

	margin: 0;

	border-radius: 10px;

	box-shadow: 0px 3px 20px rgb(0 0 0 / 10%);



	& .event-list-boxy-icon img

	{

		border-bottom-left-radius: 0px !important;

		border-bottom-right-radius: 0px !important;

	}



	& .event-list-boxy-category

	{

		position: absolute;

		top: 20px;

		right: 30px;



		& a

		{

			background: currentColor;

			padding: 2px 8px;

			font-size: 0.7rem;

			font-weight: bold;

			text-transform: uppercase;

			display: inline-block;

			margin-bottom: 10px;



			& small

			{

				color: #ffffff;

			}

		}

	}



	& .event-floating-link

	{

		position: absolute;

		top: 0;

		left: 0;

		right: 0;

		bottom: 0;

		width: 100%;

		height: 100%;

	}



	& .event-list-boxy-accent

	{

		width: 40px;

		margin-left: 0;

		border: none;

		border-top: 3px solid currentColor;

		transition: width .5s;

	}



	&:hover

	{

		& .event-list-boxy-accent

		{

			width: 55px;

		}

	}



    & .event-list-boxy-button

    {

        position: absolute;

        bottom: 30px;

        left: 30px;

        text-align: center;

        background-color: '';

        border: 1px solid currentColor;

        border-radius: 0px;

        padding: 10px;

    }

}