Note: Like pnw, with calendar picker over the top.
Code foundation to be created by Dev Team (TBD).
(Variation of List - 3 Column)
THIS NEEDS TO USE THE "LOAD MORE" BUTTON INSTEAD OF PAGINATION
Desktop:
Mobile:
<div class="result-container four-columns">
<div class="datepicker-block">
<div class="datepicker-holder">
<img src="images/datepicker-placeholder.png" alt="image description">
</div>
</div>
<div class="loading-block">
<div class="result-content loading-holder">
<div class="holder-row">
<span style="width:40.5%" class="event-title"><em>Event Title</em></span>
<span class="location"><em>Location</em></span>
<span class="date"><em>Start date</em></span>
<span class="time"><em>Start time</em></span>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
<div class="result-row">
<div style="width:40.5%" class="event-title"> <a href="#">Long Event Name Goes Here in this Area on the Left</a></div>
<div class="location">
<dl>
<dt>Location: </dt>
<dd>Fleet & Family Support Center - NAS Installation Name</dd>
</dl>
</div>
<div class="date">
<dl>
<dt>Start Date: </dt>
<dd>30 Sep 2015</dd>
</dl>
</div>
<div class="time">
<dl>
<dt>Start time: </dt>
<dd>10:00 AM</dd>
</dl>
</div>
</div>
</div>
<div class="load-box">
<a href="inc/result2-1.html" class="load-more more-link">Load more</a>
</div>
</div>
</div>