Changes

13

\Components\Marketing\Events

list

<div class="post-list--col" onclick="document.location = '/community/event-rsvp/?event_id=[? $event['event_id'] ?]'; return false;">

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

			<div class="post-list--img"><standard:image src="[? $event['event_icon'] ?]" alt="[? $event['event_title'] ?]" lazy="true" /></div>

		</logic:if>

		<div style="padding: 2rem">

			<hr />

			<h3><span style="color: #333333;"><strong>[? $event['event_title'] ?]</strong></span></h3>

			<table border="0" width="100%">

				<tr>

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

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

					</td>

					<td width="auto">

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

							<logic:if test="formatDate($event['event_start_datetime'], '%Y') == date('Y')">

								[? formatDate($event['event_start_datetime'], '%a %d %b') ?]

							</logic:if>

							<logic:else>[? formatDate($event['event_start_datetime'], '%a %d %b, %Y') ?]</logic:else>

						</logic:if>

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

							<logic:if test="formatDate($event['event_start_datetime'], '%b %d, %Y') != formatDate($event['event_end_datetime'], '%b %d, %Y')">

								<logic:if test="formatDate($event['event_end_datetime'], '%Y') == date('Y')">

									- [? formatDate($event['event_end_datetime'], '%a %d %b') ?]

								</logic:if>

								<logic:else>- [? formatDate($event['event_end_datetime'], '%a %d %b, %Y') ?]</logic:else>

							</logic:if>

						</logic:if>

					</td>

				</tr>

			</table>

			<table border="0" width="100%">

				<tr>

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

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

					</td>

					<td width="auto">

						<logic:if test="formatDate($event['event_start_datetime'], '%l:%M%p') != formatDate($event['event_end_datetime'], '%l:%M%p')">

								[? formatDate($event['event_start_datetime'], '%l:%M%p') ?] - [? formatDate($event['event_start_datetime'], '%l:%M%p') ?]

							</logic:if>

							<logic:else>[? formatDate($event['event_end_datetime'], '%l:%M%p') ?]</logic:else>



					</td>

				</tr>

			</table>

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

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

			

				<table border="0" width="100%">

					<tr>

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

							<standard:icon library="fontawesome" iconstyle="solid" iconname="location-dot" size="4" style="width: 15px; height: 15px;" />

						</td>

						<td width="auto">[? $eventLocation['event_location_description'] ?]</td>

					</tr>

				</table>

			</logic:if>

			<br />

			<!--<logic:if test="$event['event_content_short']">

			<p><small>[?? $event['event_content_short'] ??]</small></p>

		</logic:if>

		-->

			<br />

			<templates:button variant="Classic" bgcolor="#dc1836" color="#fff" borderRadius="0" href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">Read More</templates:button>

			

		</div>

	</div>

/* This class is applied to the direct containing parent of this template when used in a repeater */

.templateContainer--marketingEvents-list-card

{

	--event-list-columns: 3;



	display: grid;

	grid-template-columns: repeat(var(--event-list-columns), 1fr);

	grid-auto-flow: row;

	grid-gap: 1rem;



	box-sizing: border-box;

}



/* 3 Columns on Desktop */

.event-list-card

{

	border: 0 solid transparent;

	position: relative;

	box-sizing: border-box;

	background-clip: padding-box;

	background-color: #FFF;



	display: flex;

	flex-flow: column nowrap;

	justify-content: space-between;



	transition: box-shadow 0.3s ease-out;

    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);

}



/* 2 Columns on MidSize Display */

@media (max-width: 900px)

{

	.templateContainer--marketingEvents-list-card { --event-list-columns: 2; }

}



/* 1 Column on Mobile */

@media (max-width: 700px)

{

	.templateContainer--marketingEvents-list-card { --event-list-columns: 1; }

}



.event-list-card .event-list-card__image

{

	display: block;

}



.event-list-card .event-list-card__noImage

{

	height: 250px;

	width: 100%;

	display: flex;

	flex-flow: column nowrap;

	justify-content: center;

	align-items: center;

	background: #EEE;

	color: #333;

	font-size: max(6vmin, 40px);

	line-height: 8vmin;

	padding: 2vmin;

	font-weight: bold;

	text-transform: uppercase;

	aspect-ratio: 1 / 1;

}



.event-list-card .event-list-card__table

{

	border: 0;

	width: 100%;

}



.event-list-card .event-list-card__content

{

	padding: 1rem;

	position: relative;

	height: 100%;

}



.event-list-card .event-list-card__location

{

	margin-top: 10px;

	margin-bottom: 20px;



}



.event-list-card .event-list-card__price

{

	margin-top: 10px;

	margin-bottom: 20px;

	text-transform: uppercase;

}



.event-list-card .event-list-card__link

{

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

}



.event-list-card .event-list-card__offline

{

	position: absolute;

	top: 20px;

	right: 20px;

	padding: 3px 5px;

	font-size: 10px;

	line-height: 14px;

	text-transform: uppercase;

	background: grey;

	color: #FFF;

	letter-spacing: 1px;

	border-radius: 3px;

}



.event-list-card__footer

{

	padding: 1rem;

}



.event-list-card__registration_button

{

	padding: 1rem;

	font-size: small;

	text-transform: uppercase;

	border: 2px solid currentColor;

	letter-spacing: 1px;

	width: 100%;

	display: block;

	text-align: center;

}