Changes

18

\Components\Website\Posts

list

<div class="post-list--col" onclick="document.location = '[? $post['post_content_url']?]'; return false;">

  <logic:if test="$post['post_icon']">

        <div class="post-list--img">

            <standard:image src="[? $post['post_icon'] ?]" alt="[? $post['post_title'] ?]" lazy="true"width="300" height="300" />

        </div>

    </logic:if>

    <div style="padding: 2rem">

        <h3><span style="color: #333333;">[? $post['post_title'] ?]</span></h3>

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

            <tr>

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

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

                </td>

                <td width="auto">

					

						<logic:if test="$post['post_event_start_date']">

							<logic:if test="formatDate($post['post_event_start_date'], 'yyyy') == date('Y')">

								[? formatDateTime($post['post_event_start_date'], '', 'MMM dd', '') ?]

							</logic:if>

							<logic:else>[? formatDateTime($post['post_event_start_date'], false, 'MMM dd, yyyy', '', true, true) ?]</logic:else>

						</logic:if>

						<logic:if test="$post['post_event_end_date']">

							<logic:if test="formatDate($post['post_event_start_date']) != formatDate($post['post_event_end_date'])">

								<logic:if test="formatDate($post['post_event_end_date'], 'yyyy') == date('Y')">

									- [? formatDateTime($post['post_event_end_date'], '', 'MMM dd', '') ?]

								</logic:if>

								<logic:else>- [? formatDateTime($post['post_event_end_date'], false, 'MMM dd, yyyy', '', true, true) ?]</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="feather" iconstyle="standard" iconname="clock" size="4" style="width: 15px; height: 15px;" />

                    </td>

                    <td width="auto">

						

                         [? formatDateTime($post['post_event_start_date'], '', '', 'h:mm a', false, true) ?]

                        <logic:if test="formatDate($post['post_event_end_date'])">

                            <logic:if test="formatDate($post['post_event_start_date']) != formatDate($post['post_event_end_date'])">

                                - [? formatDateTime($post['post_event_end_date'], '', '', 'h:mm a', false, true) ?]

                            </logic:if>

                        </logic:if>

						

                    </td>

                </tr>

            </table>

            <logic:if test="$post['post_event_location']">

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

                    <tr>

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

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

                        </td>

                        <td width="auto">[? $post['post_event_location'] ?]</td>

                    </tr>

                </table>

            </logic:if>

			 <logic:if test="$post['post_event_price']">

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

                <tr>

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

                       <small>PRICE</small>

                    </td>

                    <td width="auto">

                        [? $post['post_event_price'] ?]

                    </td>

                </tr>

            </table>

			 </logic:if>

       

        <logic:if test="$post['post_content_short']">

            <br />

            [? $post['post_content_short'] ?]

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

        </logic:if>

        <br />

        <logic:if test="$post['post_content_url']">

            <br />  <br />  

            <templates:button variant="Classic" color="#fff" padding="10" borderRadius="0" href="" bgcolor="#cf102d" border="2px solid #cf102d" href="[? $post['post_content_url'] ?]">

                <logic:if test="$post_cat_id == 3">Register Here</logic:if>

                <logic:else>Read More</logic:else>

            </templates:button>

        </logic:if>

    </div>

</div>

.post-list--container,

.templateContainer--websitePosts-list-custom,

.templateContainer--websitePosts-list-default  {

	display: flex;

	justify-content: center;

	-webkit-box-orient: horizontal;

	-webkit-box-direction: normal;

	-ms-flex-flow: row wrap;

	flex-flow: row wrap;

	gap: 1.5rem;

}



.post-list--col {

	min-width: 250px;

	background-color: #ffffff;

	width: 31%;

	margin-bottom: 2rem;

	position: relative;

	text-align: left !important;

	cursor: pointer;

	box-shadow: 0px 4px 20px rgb(0 0 0 / 6%) !important;

	transition: .2s ease-in-out;

}



.post-list--col:hover

{

	transform: translateY(-10px);

}



.post-list--col * {

	text-align: left !important;

}



@media (max-width: 900px) {

	.post-list--container,

	.templateContainer--websitePosts-list-custom,

	.templateContainer--websitePosts-list-default {

		display: grid !important;

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

	}



	.post-list--col {

		width: 100% !important;

	}

}



.post-list--col img {

	width: 100%;

	height: 250px;

	border-radius: 0px !important;

}



.post-list--col img {

	height: 250px;

	width: 100%;

	object-fit: cover;

	vertical-align: bottom;

}



.post-list--col:hover hr 

{

    width: 70px;

}



.post-list--col .s8-templates-button 

{

    position: absolute;

    bottom: 2rem;

}



.post-list--col h3::before

{

	display: none !important;

}