Custom template for event search form to fit with members-only sidebar

diff --git a/css/app.css b/css/app.css
index a702d0a..a5d89e3 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -7688,8 +7688,10 @@ body .glm-member-db-list-grid-view #glm-member-list-filters-box .glm-member-sear
   color: #b32024; }
 body .glm-member-db-list-grid-view #glm-member-list-map-toggle {
   background-color: #434343; }
-body #glm-member-detail-takeback-mini {
+body .glm-member-db-takeback-mini {
   background-color: #b32024; }
+  body .glm-member-db-takeback-mini:hover {
+    background-color: #b32024; }
 body #glm-member-detail-container #glm-member-detail-contact-info {
   background-color: #434343;
   color: #FFFFFF;

diff --git a/glm-member-db-events/views/front/events/detail.html b/glm-member-db-events/views/front/events/detail.html
new file mode 100644 (file)
index 0000000..1e827a4
--- /dev/null
+++ b/glm-member-db-events/views/front/events/detail.html
@@ -0,0 +1,191 @@
+<div id="glm-event-wrapper" class="event-detail text-left"><!-- #glm-event-wrapper -->
+    <a id="glm-event-detail-takeback-mini" class="glm-member-db-takeback-mini button glm-member-button" href="javascript:history.go(-1)"><span>Back To Search</span></a>
+    <div class="row">
+        <div class="small-12 large-12 small-centered column detail-search-form">
+            <div class="row">
+                {include file='front/events/searchForm.html'}
+            </div>
+        </div>
+    </div>
+    {if $event}
+    <div class="row collapse"><!-- .row #1 -->
+        <div class="small-12 large-centered column"><!-- .small-12 .large-9 .large-centered .columns -->
+            <span id="eventShare" class="st_sharethis" st_title="{$event.name}" st_url="{$permalink}">+ Share</span>
+            <div class="row"><!-- .row #2 -->
+                <div class="small-12 column eventTitle">
+                    <h1>{$event.name}</h1>
+                </div>
+                {if $event.image}
+                <div class="small-12 column event-detail-image">
+                    <img style="margin: 15px;" src="{$mainImgUrl}{$event.image}">
+                </div>
+                {/if}
+                <div class="small-12 column"><!-- .small-12 .column -->
+                    <div class="row"><!-- .row #3 -->
+                        {if $event.locations}
+                            <div class="event-google-map small-10 small-centered medium-5 medium-uncentered columns">
+                                {if $event.locations.lat && $event.locations.address}
+                                    <div id="eventDetailMap">
+                                        <div id="eventDetail-map" title="Click to enlarge">map...</div>
+                                        <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
+                                    </div>
+                                    <div id="event-lat" rel="{$event.locations.lat}"></div>
+                                    <div id="event-lon" rel="{$event.locations.lon}"></div>
+                                    <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
+                                        <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.locations.name}">
+                                        <input type="hidden" id="EventLat" name="EventLat" value="{$event.locations.lat}">
+                                        <input type="hidden" id="EventLon" name="EventLon" value="{$event.locations.lon}">
+                                        <input type="submit" class="button tiny text-center" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Driving Directions">
+                                    </form>
+                                {/if}
+                            </div>
+                        {elseif $event.member && ($event.use_member_location.value || $event.other_ref_dest) }
+                            <div class="small-12 medium-5 columns">
+                                {if $event.member.lat}
+                                    <div id="eventDetailMap">
+                                        <div id="eventDetail-map" title="Click to enlarge">map...</div>
+                                        <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
+                                    </div>
+                                    <div id="event-lat" rel="{$event.member.lat}"></div>
+                                    <div id="event-lon" rel="{$event.member.lon}"></div>
+                                    <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
+                                        <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.member.member_name}">
+                                        <input type="hidden" id="EventLat" name="EventLat" value="{$event.member.lat}">
+                                        <input type="hidden" id="EventLon" name="EventLon" value="{$event.member.lon}">
+                                        <input type="submit" class="button tiny text-center" id="EventDrivingDirectionSubmit" name="EventDrivingDirectionSubmit" value="Get Driving Directions">
+                                    </form>
+                                {/if}
+                            </div>
+                        {/if}
+                        <div class="small-12 medium-{if $event.locations || $event.use_member_location.value || $event.other_ref_dest}7{else}12{/if} column">
+                            <div id="glm-event-detail-dates">
+                                {foreach $event.recurrences as $rec}
+                                    <div>
+                                    <span>
+                                    {if !$event.all_day}
+
+                                        <strong>
+                                            {if $rec.start_time.time == $rec.end_time.time || $rec.start_time_only.value}
+                                                {$rec.start_time.time|strtotime|date_format:"%l:%M %P"}
+                                            {else}
+                                                {$rec.start_time.time|strtotime|date_format:"%l:%M %P"} - {$rec.end_time.time|strtotime|date_format:"%l:%M %P"}
+                                            {/if}
+                                        </strong>
+                                    {/if}
+                                    </span>
+                                    {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
+                                        {$rec.name}
+                                    {/if}
+
+                                    ( {if $event.recurrences.0.recurring.value == 1} Occurring {/if}
+
+
+                                    {$rec.from_date.timestamp|date_format:"%m/%d/%Y"}
+                                      {if $rec.from_date.date != $rec.to_date.date}
+                                        - {$rec.to_date.timestamp|date_format:"%m/%d/%Y"}
+                                       {else if $rec.specific_dates}
+                                        - {$rec.specific_dates|@end|date_format:"%m/%d/%Y"}
+                                      {/if}
+
+                                    {if $rec.day_of_week.names|@count < 7 && $rec.day_of_week.names|@count > 0 }
+                                    <span class="agenda-days-of-week">
+                                        on
+                                        {foreach $rec.day_of_week.names as $day}
+                                        {if $day == "Thursday"}
+                                            <span> {$day|substr:0:4} </span>
+                                         {else}
+                                            <span> {$day|substr:0:3} </span>
+                                         {/if}
+                                         {/foreach}
+
+                                    </span>
+                                    {/if}
+                                      )
+                                        {if $expired} <span style="color:red;"> (Expired) </span> {/if}
+                                    </div>
+                                {/foreach}
+                            </div>
+                            {if $event.hide_address.name == 'No'}
+                                {if !$event.use_member_location.value && ($event.locations.name || $event.locations.address)}
+                                    <div id="glm-event-detail-location">
+                                    {if $event.locations.name}{$event.locations.name}<br>{/if}
+                                    {if $event.locations.address} {$event.locations.address}<br> {/if}
+                                    {if $event.locations.city.name}{$event.locations.city.name}{/if}{if $event.locations.state.value}, {$event.locations.state.value} {/if}
+                                    {if $event.locations.zip} {$event.locations.zip} {/if}
+                                    {if $event.locations.phone} {apply_filters('glm_associate_phone_filter', $event.locations.phone)} {/if}
+                                    </div>
+                                {elseif $event.use_member_location.value || $event.other_ref_dest}
+                                    <div id="glm-event-detail-location">
+                                    {if $event.member.member} {$event.member.member}<br> {/if}
+                                    {if $event.member.addr1} {$event.member.addr1}<br> {/if}
+                                    {if $event.member.city}{$event.member.city}{/if}{if $event.member.state.value}, {$event.member.state.value}{/if}
+                                    {if $event.member.zip} {$event.member.zip} {/if}
+                                    {if $event.member.phone} {apply_filters('glm_associate_phone_filter', $event.member.phone)} {/if}
+                                    </div>
+                                {/if}
+                            {/if}
+                            {if $event.cost && !$event.free.value}
+                            <div id="glm-event-detail-cost"><strong>Cost: </strong>{$event.cost}</div>
+                            {/if}
+                            {if $event.free.value}
+                            <div id="glm-event-detail-cost"><strong>Cost: </strong>FREE</div>
+                            {/if}
+                            {if $event.ticket_url}
+                            <div id="glm-event-detail-tickets"><a target="_blank" href="{$event.ticket_url}"><strong>Tickets</strong></a></div>
+                            {/if}
+                            {if $event.registration_url}
+                            <div id="glm-event-detail-registrations"><a target="_blank" href="{$event.registration_url}"><strong>Registration</strong></a></div>
+                            {/if}
+
+                            <div id="glm-event-detail-contact"><strong>Contact & More Info</strong><br>
+                                {if $event.url}<a href="{$event.url}" target="_blank">{$event.url}</a><br>{/if}
+                                {if $event.contact_name}Contact: {$event.contact_name}<br>{/if}
+                                {if $event.contact_email}Email: <a href="mailto: {$event.contact_email}">{$event.contact_email}</a><br>{/if}
+                                {if $event.contact_phone}
+                                    <span class="glm-event-detail-contact-phone">
+                                        <span class="glm-field-title">Phone: </span>
+                                        <span class="glm-field-value">{apply_filters('glm_associate_phone_filter', $event.contact_phone)}</span>
+                                    </span><br>
+                                {/if}
+                                {if $event.file1}
+                                <div>File:
+                                    <a href="{$filePathUrl}{$event.file1}">{if $event.file1_descr}{$event.file1_descr}{else}{$event.file1}{/if}</a>
+                                </div>
+                            {/if}
+                            {if $event.file2}
+                                <div>File 2:
+                                    <a href="{$filePathUrl}{$event.file2}">{if $event.file2_descr}{$event.file2_descr}{else}{$event.file2}{/if}</a>
+                                </div>
+                            {/if}
+                            {if $event.file3}
+                                <div>File 3:
+                                    <a href="{$filePathUrl}{$event.file3}">{if $event.file3_descr}{$event.file3_descr}{else}{$event.file3}{/if}</a>
+                                </div>
+                            {/if}
+                            </div>
+                        </div>
+                    </div><!-- /.row #3 -->
+                </div><!-- /.small-12 .column -->
+                <div class="small-12 column">
+                    <p>{$event.descr}</p>
+                </div>
+            </div><!-- /.row #2 -->
+        </div><!-- /.small-12 .large-9 .large-centered -->
+    </div><!-- /.row .collapse #1 -->
+    {else}
+    <div>Sorry, No results.</div>
+    {/if}
+</div><!-- /#glm-event-wrapper -->
+<script type="text/javascript">
+    jQuery(document).ready( function ($){
+        var view_select = $("#glm-event-view-select");
+        view_select.hide();
+
+        // Replace the phone separation character with whatever is set in the management
+        {if $settings.phone_infix}
+            //var processedPhone = $('.glm-event-detail-contact-phone .glm-field-value').text().trim().replace(/[^a-zA-Z0-9 ]/g, '{$settings.phone_infix}');
+            //$('.glm-event-detail-contact-phone .glm-field-value').text(processedPhone);
+        {/if}
+    });
+</script>
+

diff --git a/glm-member-db-events/views/front/events/searchForm.html b/glm-member-db-events/views/front/events/searchForm.html
new file mode 100644 (file)
index 0000000..60065bd
--- /dev/null
+++ b/glm-member-db-events/views/front/events/searchForm.html
@@ -0,0 +1,99 @@
+<script>
+    var ajaxUrl = '{$ajaxUrl}';
+</script>
+{if !$eventId}
+    <div id="glm-events-search-form" class="small-12 columns">
+        <h1>Find An Event</h1>
+        <form action="{$currentUrl}">
+            <input type="hidden" name="search" value="1">
+            <div class="row">
+                <div class="small-12 medium-5 columns">
+                    <input class="glm-search-icon right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
+                    <input id="glm-event-name" name="event_name" placeholder="Event Name" value="{$eventName}">
+                </div>
+
+                <div class="small-12 small-text-center medium-7 medium-text-right columns">
+                    <a id="glm-event-add-event" href="{$siteBaseUrl}add-event/" class="tiny button success">Add an Event</a>
+                </div>
+            </div>
+            <div class="row">
+                <div class="small-12 columns">
+                    <hr />
+                </div>
+            </div>
+        </form>
+        <form id="glm-member-event-search" action="{$currentUrl}" method="get">
+            <input type="hidden" name="search" value="1">
+             <input type="hidden" name="override_default" value="yes">
+            <div class="row">
+                <div class="small-6 medium-3 column">
+                    <div class="row collapse prefix-radius">
+                        <div class="small-3 columns">
+                            <span class="prefix">From</span>
+                        </div>
+                        <div class="small-9 columns">
+                            <input id="glm-event-from" name="glm_event_from" value="{$fromDate}">
+                        </div>
+                    </div>
+                </div>
+                <div class="small-6 medium-3 column">
+                    <div class="row collapse prefix-radius">
+                        <div class="small-3 columns">
+                            <span class="prefix">To</span>
+                        </div>
+                        <div class="small-9 columns">
+                            <input id="glm-event-to" name="glm_event_to" value="{$toDate}">
+                        </div>
+                    </div>
+                </div>
+                <div class="small-8 medium-4 column">
+                    <input class="glm-search-icon right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
+                    <select id="glm-event-category" name="category">
+                        <option value="0">-- All Categories --</option>
+                        {foreach $categories as $cat}
+                            <option value="{$cat.id}"{if $cat.default == 1} selected{/if}>{$cat.name}</option>
+                        {/foreach}
+                    </select>
+                </div>
+                <div class="small-4 medium-2 column">
+                    {if !$eventId}
+                    <input class="right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
+                    {else}
+                    {/if}
+                    <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=rssFeed{if $eventId}&eventId={$eventId}{/if}">
+                    <img class="right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
+                    </a>
+                    <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=icalFeed&ical=1{if $eventId}&eventId={$eventId}{/if}">
+                    <img class="right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+{else}
+    <div class="small-4 small-offset-8 medium-3 medium-offset-9 column">
+        {if !$eventId}
+        <input class="right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
+        {else}
+        {/if}
+        <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=rssFeed{if $eventId}&eventId={$eventId}{/if}">
+        <img class="right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
+        </a>
+        <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=icalFeed&ical=1{if $eventId}&eventId={$eventId}{/if}">
+        <img class="right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
+        </a>
+    </div>
+{/if}
+<div class="small-7 medium-3 columns view-select">
+    <select id="glm-event-view-select">
+        <option id="agenda-view-option" value="agenda"> Agenda View </option>
+        <option id="calendar-view-option" value="calendar"> Calendar View </option>
+    </select>
+</div>
+<script type="text/javascript">
+    jQuery(document).ready(function($){
+        jQuery('#glm-event-pdf-submit').click(function(){
+            jQuery('#glm-member-event-search').attr('method', 'post');
+        });
+    });
+</script>

diff --git a/scss/plugins/_glm-member-db.scss b/scss/plugins/_glm-member-db.scss
index 52cebd8..2199c9f 100644 (file)
--- a/scss/plugins/_glm-member-db.scss
+++ b/scss/plugins/_glm-member-db.scss
@@ -127,8 +127,11 @@ body {
 
 
 // 3.0 Member Detail
-#glm-member-detail-takeback-mini {
+.glm-member-db-takeback-mini {
     background-color: $red;
+    &:hover {
+        background-color: $red;
+    }
 }
 #glm-member-detail-container {
     #glm-member-detail-contact-info {