From 83bcef8260b83f8102ab67afdfb34893c60a04be Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 31 Aug 2018 09:01:04 -0400
Subject: [PATCH] Update for the member list view

Bring in changes from main plugin to have better mobile leaflet maps.
---
 glm-member-db/views/front/members/list.html | 40 ++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/glm-member-db/views/front/members/list.html b/glm-member-db/views/front/members/list.html
index 142f280..729a2b9 100644
--- a/glm-member-db/views/front/members/list.html
+++ b/glm-member-db/views/front/members/list.html
@@ -112,13 +112,13 @@
         </div> <!-- glm-member-list-wrapper -->
         {/if} {*list_show_search*}
     {if $settings.list_show_map}
-        <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+
         {apply_filters('glm-member-db-front-members-list-mapTop', '')}
         <div id="glm-locationMap-container">
 
             {if $settings.selected_map_interface == 1} 
                 <!--  Leaflet Map -->
-                <div id="LeafletMapContainer" style="height: 400px; width: 100%; border: 1px black solid; z-index: +0;"></div>
+                <div id="LeafletMapContainer" style="height: 400px; width: 90%; border: 1px black solid; z-index: +0; margin: 0 auto;"></div>
             {/if}
             
             {if $settings.selected_map_interface == 2}            
@@ -163,15 +163,20 @@
                     </p>
                 {/if} {*list_map_show_address*}
                 <div class="glm-member-list-info">
-                    <p>
-                        {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> {apply_filters('glm_associate_phone_filter', $m.phone)}<br>{/if}
-                        {if $m.toll_free && $settings.list_map_show_tollfree}{apply_filters('glm_associate_phone_filter', $m.toll_free)}<br>{/if}
-                        {if $m.url && $settings.list_map_show_url}<b>Web site:</b> <a href="{$m.url}"{if $settings.list_map_show_url_newtarget} target="_blank"{/if}>{$m.url}</a><br>{/if}
+                    <p class="glm-member-list-map-info">
+                        {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> <a href="tel:{apply_filters('glm_associate_phone_filter_tel', $m.phone)}">{apply_filters('glm_associate_phone_filter', $m.phone)}</a><br>{/if}
+                        {if $m.toll_free && $settings.list_map_show_tollfree}<a href="tel:{apply_filters('glm_associate_phone_filter_tel', $m.toll_free)}">{apply_filters('glm_associate_phone_filter', $m.toll_free)}</a><br>{/if}
                         {if $m.email && $settings.list_map_show_email}<b>E-Mail Address:</b> <a href="mailto:{$m.email}">{$m.email}</a><br>{/if}
-                        {if $m.region && $settings.list_map_show_region}<b>Region:</b> {$m.region}{/if}
+                        {if $m.region && $settings.list_map_show_region}<b>Region:</b> {$m.region}<br>{/if}
+                        {if $m.url && $settings.list_map_show_url}<a href="{$m.url}"{if $settings.list_map_show_url_newtarget} target="_blank"{/if}>Website</a><br>{/if}
                     </p>
+    <!-- Not using Description for now - Use short descr for maps {literal}
                     {if $m.descr && $settings.list_map_show_descr}{$m.descr|nl2br}<br>{/if}
-                    {if $m.short_descr && $settings.list_map_show_short_descr}{$m.short_descr}<br>{/if}
+     {/literal} -->
+                    {if $m.short_descr && $settings.list_map_show_short_descr}{$m.short_descr|truncate:200}<br>{/if}
+                    {if $settings.list_map_show_detaillink && !$m.has_no_profile}
+                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/{if $settings.enable_multiple_profiles}{$m.id}/{/if}">More Info</a>
+                    {/if}
                     {if $m.categories && $settings.list_map_show_categories}
                         <div class="glm-member-list-items">
                             <b>{$terms.term_member_cap} Categories</b>
@@ -184,7 +189,7 @@
                             </ul>
                         </div>
                     {/if}
-    <!-- Not using credit cards for now
+    <!-- Not using credit cards for now  {literal}
                     {if $m.cc_type && $settings.list_map_show_creditcards}
                         <div class="glm-member-list-items">
                             <b>Credit Cards Accepted:</b>
@@ -195,7 +200,7 @@
                             </ul>
                         </div>
                     {/if}
-    -->
+     {/literal} -->
                     {if $settings.list_map_show_amenities}
                         <div class="glm-member-list-items">
                             <b>Amenities:</b>
@@ -593,13 +598,23 @@
                 });
               {/if}
         
+                var mapContainerWidth = Number(leafletMap._container.clientWidth);
+                var maxPopupWidth = .65 * mapContainerWidth;
+                if (maxPopupWidth > 600) {
+                    maxPopupWidth = 600;
+                }
+                var mapContainerHeight = Number(leafletMap._container.clientHeight);
+                var maxPopupHeight = .7 * mapContainerHeight;
                             
               {foreach $mapItems as $m}
                 {if $m.lat != 0 && $m.lon != 0}
     
                 // Create marker for this member and and to Feature Group 
                 var leafletMarker = L.marker([{$m.lat}, {$m.lon}], { title:  '{$m.member_name|escape:quotes}' })
-                    .bindPopup($('#map_info_' + {$m.id}).html())
+                    .bindPopup($('#map_info_' + {$m.id}).html(), {
+                        maxWidth: maxPopupWidth,
+                        maxHeight: maxPopupHeight
+                    })
                     .addTo(markerGroup);
     
             {/if}
@@ -616,7 +631,8 @@
     
                 leafletMap.on('popupopen', function(e) {
                     var px = leafletMap.project(e.popup._latlng);
-                    px.y -= e.popup._container.clientHeight/2;
+                    px.x -= 20;                                         // Bump a bit to the right to avoid resize buttons
+                    px.y -= e.popup._container.clientHeight/2;          // Position more toward the center
                     leafletMap.panTo(leafletMap.unproject(px),{ animate: true });
                 });
     
-- 
2.17.1