From 87c50e35963128e2b80297c6a4fc74116c877b00 Mon Sep 17 00:00:00 2001
From: laury <laury@gaslightmedia.com>
Date: Thu, 19 May 2016 14:12:52 -0400
Subject: [PATCH] Detail and list styles

---
 css/front.css                   |  80 +++++--
 views/front/members/detail.html |  82 +++++---
 views/front/members/list.html   | 363 ++++++++++++++++++--------------
 3 files changed, 320 insertions(+), 205 deletions(-)

diff --git a/css/front.css b/css/front.css
index 9b2a0a35..0c3ced57 100644
--- a/css/front.css
+++ b/css/front.css
@@ -68,6 +68,7 @@
 .glm-member-list-data {
     padding: 15px 20px;
 }
+.glm-member-db-list-view,
 .glm-member-db-list-grid-view {
     overflow: hidden;
     position: relative;
@@ -119,16 +120,19 @@
 .glm-member-db-list-view.map-opened #glm-member-list-map-toggle:before {
     content: "Hide ";
 }
+.glm-member-db-list-view #glm-locationMap-container,
 .glm-member-db-list-grid-view #glm-locationMap-container {
     transition: all 0.5s;
 /*    padding: 0 0 0 2%;*/
     margin-top: 30px;
 }
 @media (min-width: 1024px) {
+    .glm-member-db-list-view #glm-locationMap-container,
     .glm-member-db-list-grid-view #glm-locationMap-container {
         float: right;
     }
 }
+.glm-member-db-list-view.filters-closed #glm-locationMap-container,
 .glm-member-db-list-grid-view.filters-closed #glm-locationMap-container {
     transition: all 0.4s;
     width: 100%;
@@ -136,13 +140,16 @@
     margin-top: 30px;
 }
 @media (min-width: 1024px) {
+    .glm-member-db-list-view.filters-closed #glm-locationMap-container,
     .glm-member-db-list-grid-view.filters-closed #glm-locationMap-container {
         margin-top: 30px;
     }
+    .glm-member-db-list-view.filters-opened #glm-locationMap-container,
     .glm-member-db-list-grid-view.filters-opened #glm-locationMap-container {
         width: 70%;
     }
 }
+.glm-member-db-list-view #glm-member-list-filters-close,
 .glm-member-db-list-grid-view #glm-member-list-filters-close {
     background-color: rgba(0,0,0,0.25);
     height: 40px;
@@ -158,6 +165,7 @@
     margin: 0;
     border-top-right-radius: 4px;
 }
+.glm-member-db-list-view #glm-member-list-filters-box,
 .glm-member-db-list-grid-view #glm-member-list-filters-box {
     transition: all 0.5s;
     max-width: 234px;;
@@ -171,6 +179,7 @@
     border-top-right-radius: 4px;
     overflow: hidden;
 }
+.glm-member-db-list-view .glm-member-search,
 .glm-member-db-list-grid-view .glm-member-search {
     padding-top: 50px;
     border-top: 0;
@@ -178,6 +187,7 @@
 #glm-member-list-filters-box .glm-member-search h3 {
     color: black;
 }
+.glm-member-db-list-view .glm-member-search:before,
 .glm-member-db-list-grid-view .glm-member-search:before {
     background-color: lightgrey;
     content: '';
@@ -197,20 +207,24 @@
     transition: all 0.5s;
     
 }
+.glm-member-db-list-view.filters-closed #glm-member-list-filters-wrapper,
 .glm-member-db-list-grid-view.filters-closed #glm-member-list-filters-wrapper {
     overflow: hidden;
 }
+.glm-member-db-list-view.filters-closed #glm-member-list-filters-box,
 .glm-member-db-list-grid-view.filters-closed #glm-member-list-filters-box {
     left: -215px;
     opacity: 0;
     transition: all 0.5s;
 }
 @media (min-width: 1024px) {
+    .glm-member-db-list-view.filters-closed #glm-member-list-filters-box,
     .glm-member-db-list-grid-view.filters-closed #glm-member-list-filters-box {
         transition: all 0.5s;
         left: -100%;
     }
 }
+.glm-member-db-list-view.filters-opened #glm-member-list-filters-box,
 .glm-member-db-list-grid-view.filters-opened #glm-member-list-filters-box {
     left: 0;
 }
@@ -228,31 +242,36 @@
         position: absolute;    
     }
 }
+.glm-member-db-list-view.filters-closed #glm-member-list-filters-button,
 .glm-member-db-list-grid-view.filters-closed #glm-member-list-filters-button {
     position: relative;
 }
+.glm-member-db-list-view.filters-opened #glm-member-list-filters-button,
 .glm-member-db-list-grid-view.filters-opened #glm-member-list-filters-button {
     border-bottom-left-radius: 0;
 }
+.glm-member-db-list-view.filters-closed #glm-member-list-filters-button:before,
 .glm-member-db-list-grid-view.filters-closed #glm-member-list-filters-button:before {
     content: "+ ";
 }
+.glm-member-db-list-view.filters-opened #glm-member-list-filters-button:before,
 .glm-member-db-list-grid-view.filters-opened #glm-member-list-filters-button:before {
     content: "— ";
 }
-.glm-member-db-list-grid-view #glm-locationMap-container  {
-    margin-bottom: 40px;
+.glm-member-db-list-view.filters-opened #glm-locationMap-container,
+.glm-member-db-list-grid-view.filters-opened #glm-locationMap-container  {
+    width: 70%;
+}
+.glm-member-db-list-view.filters-closed #glm-locationMap-container,
+.glm-member-db-list-grid-view.filters-closed #glm-locationMap-container  {
     width: 100%;
-    overflow: hidden;
 }
-.glm-member-db-list-view #glm-locationMap-container  {
+.glm-member-db-list-view #glm-locationMap-container,
+.glm-member-db-list-grid-view #glm-locationMap-container  {
     margin-bottom: 40px;
     overflow: hidden;
 }
-.glm-member-db-list-grid-view.map-closed #glm-locationMap-container {
-    margin-bottom: 0;
-    height: 0;
-}
+.glm-member-db-list-grid-view.map-closed #glm-locationMap-container,
 .glm-member-db-list-view.map-closed #glm-locationMap-container {
     margin-bottom: 0;
     height: 0;
@@ -309,13 +328,14 @@
 .glm-member-list-sub-links:last-child {
 /*    text-align: right;*/
 }
+.glm-member-db-list-view .glm-member-list-listing-container {
+    padding: 0 20px;
+}
 #glm-directions,
+.glm-member-db-list-view .glm-member-entry-container.glm-member-search,
 .glm-member-db-list-grid-view .glm-member-entry-container.glm-member-search {
     margin-top: 0;
 }
-.glm-member-db-list-view .glm-member-entry-container.glm-member-search {
-    margin-top: 50px;
-}
 .glm-member-entry-container {
     border: 1px #ccc solid;
     padding: .4em;
@@ -373,11 +393,12 @@
     overflow: hidden;
 }
 .glm-member-db-list-view .glm-member-list-image-wrapper {
-    height: 250px;
+/*    height: 250px;*/
 }
 .glm-member-list-active-info .glm-member-title a {
 /*    text-decoration: underline;*/
 }
+.glm-member-db-list-view #glm-member-db-front-container,
 .glm-member-db-list-grid-view #glm-member-db-front-container {
     padding: 0;
 }
@@ -410,7 +431,7 @@
     margin-bottom: 0;
     margin-top: -5px;
 }
-#glm-member-detail-takeback-mini {
+.glm-member-db-takeback-mini {
     margin-bottom: 0;
     border-radius: 4px;
     padding: 5px 20px;
@@ -423,11 +444,11 @@
     -o-transition:      width 0.5s ease;
     transition:         width 0.5s ease;
 }
-#glm-member-detail-takeback-mini > span {
+.glm-member-db-takeback-mini > span {
     left: 63px;
     overflow: hidden;
     position: absolute;
-    top: 8px;
+    top: 13px;
     width: 100px;
 }
 #glm-member-detail-takeback-mini:hover {
@@ -438,12 +459,12 @@
     -o-transition:      width 0.5s ease;
     transition:         width 0.5s ease;
 }
-#glm-member-detail-takeback-mini:before {
+.glm-member-db-takeback-mini:before {
     content: '\21A9';
     font-size: 28px;
     line-height: 1;
 }
-#glm-member-detail-takeback-mini:hover:after {
+.glm-member-db-takeback-mini:hover:after {
     padding-left: 5px;
     font-size: 20px;
 }
@@ -465,9 +486,9 @@
     background-size: contain;
     content: " ";
     display: inline-block;
-    height: 10px;
-    margin-right: 6px;
-    width: 10px;
+    height: 12px;
+    margin-right: 8px;
+    width: 12px;
     
 }
 #glm-member-detail-website-link a {
@@ -477,10 +498,13 @@
     background-color: #2c296d;
     padding: 15px;
     color: white;
-    font-size: 18px;
+    font-size: 20px;
+}
+#glm-member-detail-contact-info  > div {
+    margin: 5px 10px 15px;
 }
 .glm-member-detail-contact-phone {
-    margin-top: 10px;
+/*    margin-top: 10px;*/
 }
 #glm-member-detail-info > * {
   line-height: 1.2;
@@ -765,10 +789,20 @@ input[type="submit"].glm-member-button {
     width: 10px;
 }
 .glm-member-list-links a,
-#glm-member-detail-list-links a {
+#glm-member-detail-links a {
     display: inline;
     margin-right: 15px;
 }
+#glm-member-detail-links a {
+    color: white;
+    font-weight: bold;
+    font-size: 20px;
+    border-bottom: 1px solid white;
+}
+#glm-member-detail-links a:hover {
+    border-color: lightgrey;
+    text-decoration: none;
+}
 #glm-member-detail-social {
     margin: 10px 0;
 }
diff --git a/views/front/members/detail.html b/views/front/members/detail.html
index e212bcf0..224de19f 100644
--- a/views/front/members/detail.html
+++ b/views/front/members/detail.html
@@ -1,6 +1,6 @@
 {include file='front/members/header.html'}
 
-<!--<a id="glm-member-detail-takeback" class="button glm-member-button" href="javascript:history.go(-1)">Old Button</a>-->
+
 
 {apply_filters('glm-member-db-front-members-detail-pageTop', '', $member.id)}
 
@@ -47,39 +47,71 @@
     
 <!--    <h3>{$terms.term_member_cap} Detail</h3>-->
     <div class="row">
-        <script>document.write('<a id="glm-member-detail-takeback-mini" class="button glm-member-button" href="' + document.referrer + '"><span>Back to listing</span></a>');</script>
+        <script>//document.write('<a id="glm-member-detail-takeback-mini" class="button glm-member-button" href="' + document.referrer + '"><span>Back to listing</span></a>');</script>
+        <a id="glm-member-detail-takeback-mini" class="glm-member-db-takeback-mini button glm-member-button" href="javascript:history.go(-1)"><span>Back to listing</span></a>
         <div id="glm-member-detail-container" class="small-12 columns glm-member-container">
             <h4 class="glm-member-title">  {$member.member}</h4>
             <div id="glm-member-detail-side-box" class="small-12 medium-4 columns">
                 {if $member.logo && $settings.detail_show_logo}
-                <div class="glm-member-detail-logo-wrapper">
-<!--                            <img class="glm-member-list-image-left" src="http://placehold.it/500x300">-->
-                        <img CLASS="glm-member-list-image-left" src="{$glmPluginMediaUrl}/images/{$settings.detail_logo_size}/{$member.logo}">
-                </div>
+                    <div class="glm-member-detail-logo-wrapper">
+                        <img class="glm-member-list-image-left" src="{$glmPluginMediaUrl}/images/{$settings.detail_logo_size}/{$member.logo}">
+                    </div>
                 {/if}
                 {if $member.url && $settings.detail_show_url}
                     <a id="glm-member-detail-website-link" class="small-12 button glm-button" href="{$member.url}"{if $settings.detail_show_url_newtarget} target="_blank"{/if}>Visit Website</a>
-                    {/if}
+                {/if}
                 
                 <div id="glm-member-detail-contact-info">
     <!-- Member name, address, and basic information -->                    
     
                     {if $settings.detail_show_address}
-                        {apply_filters('glm-member-db-front-members-detail-addressTop', '', $member.id)}
-                        {if $settings.detail_show_street}
-                        {if $member.addr1}<div>{$member.addr1}</div>{/if}
-                        {if $member.addr2}<div>{$member.addr2}</div>{/if}
-                        {/if}
-                        {if $settings.detail_show_citystatezip}
-                        {if $member.city}<span>{$member.city}</span>{if $member.state.value}, {/if}{/if}<span>{if $member.state.value}{$member.state.value}</span>{/if}{if $member.zip} {$member.zip}{/if}
-                        {/if} 
-                        {if $member.country.name && $settings.detail_show_country}<div>{$member.country.name}</div>{/if}
-                        {apply_filters('glm-member-db-front-members-detail-addressBottom', '', $member.id)}
+                        <div class="glm-member-detail-address-wrapper">
+                            <small>Address</small>
+                            {apply_filters('glm-member-db-front-members-detail-addressTop', '', $member.id)}
+                            {if $settings.detail_show_street}
+                            {if $member.addr1}<div>{$member.addr1}</div>{/if}
+                            {if $member.addr2}<div>{$member.addr2}</div>{/if}
+                            {/if}
+                            {if $settings.detail_show_citystatezip}
+                                <div>
+                                    {if $member.city}
+                                        <span>{$member.city}</span>
+                                        {if $member.state.value}, {/if}
+                                    {/if}
+                                    {if $member.state.value}
+                                        <span>{$member.state.value}</span>
+                                    {/if}
+                                    {if $member.zip} 
+                                        {$member.zip}
+                                    {/if}
+                                </div>
+                            {/if} 
+                            {if $member.country.name && $settings.detail_show_country}
+                                <div>{$member.country.name}</div>
+                            {/if}
+                            {apply_filters('glm-member-db-front-members-detail-addressBottom', '', $member.id)}
+                        </div>
                     {/if}        
                     {apply_filters('glm-member-db-front-members-detail-otherDetailTop', '', $member.id)}
-                    {if $member.region && $settings.detail_show_region}<div><b>Region:</b> {$member.region}</div>{/if}
-                    {if $member.phone && $settings.detail_show_phone}<div class="glm-member-detail-contact-phone"><b>Phone: </b>{$member.phone}</div>{/if}
-                    {if $member.toll_free && $settings.detail_show_tollfree}<div><b>Toll Free:</b> {$member.toll_free}</div>{/if}
+                    {if $member.region && $settings.detail_show_region}
+                        <div>
+                            <b>Region:</b> {$member.region}
+                        </div>
+                    {/if}
+                    <div class="glm-member-detail-phone-wrapper">
+                        {if $member.phone && $settings.detail_show_phone}
+                            <div class="glm-member-detail-contact-phone">
+                                <small>Local </small>
+                                <div>{$member.phone}</div>
+                            </div>
+                        {/if}
+                        {if $member.toll_free && $settings.detail_show_tollfree}
+                            <div>
+                                <small>Toll Free </small>
+                                <div>{$member.toll_free}</div>
+                            </div>
+                        {/if}
+                    </div>
                     {apply_filters('glm-member-db-front-members-detail-otherDetailBottom', '', $member.id)}
     <!--                    <div id="glm-member-detail-social">
                         <a href="#" target="_blank"><img src="{$baseUrl}/assets/blog.png"></a>
@@ -87,16 +119,16 @@
                         <a href="http://www.facebook.com" target="_blank"><img src="{$baseUrl}/assets/facebook.png"></a>
                         <a href="http://www.twitter.com" target="_blank"><img src="{$baseUrl}/assets/twitter.png"></a>
                     </div>-->
-                    <div id="glm-member-detail-list-links">
+                    <div id="glm-member-detail-links">
                         {apply_filters('glm-member-db-front-members-detail-linksTop', '', $member.id)}
                         {if $member.email && $settings.detail_show_email}<a href="mailto:{$member.email}">Email</a>{/if}
                         {if $settings.detail_show_coupons && $coupons}<a href="#glm-member-detail-coupons">Coupons</a>{/if}
                         {apply_filters('glm-member-db-front-members-detail-linksBottom', '', $member.id)}
                     </div>
     
-                    <div class="socialtest">
-                        {apply_filters('glm-member-db-front-members-list-memberDetailBottom', '', $m.id)}
-                       Social:{apply_filters('glm-member-db-front-members-social-list', '', $m.id)}
+                    <div class="glm-member-db-socials">
+                        {apply_filters('glm-member-db-front-members-list-memberDetailBottom', '', $member.id)}
+                        {apply_filters('glm-member-db-front-members-social-list', '', $member.id)}
                     </div>
                 </div>
                 
@@ -261,7 +293,7 @@
         {apply_filters('glm-member-db-front-members-detail-jqueryScriptTop', '', $member.id)}
         
         jQuery(document).ready(function($) {
-            
+
             $("a.glm-member-detail-images-thumb").fancybox({
            
                  helpers: {
diff --git a/views/front/members/list.html b/views/front/members/list.html
index 8d2e6c00..fdeb610b 100644
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -1,79 +1,79 @@
 <div class="glm-member-db-list-view 
-    {if $settings.list_show_map_opened}map-opened{else}map-closed{/if}
+    {if $settings.list_map_show_opened}map-opened{else}map-closed{/if}
+    {if $settings.list_show_search_filters_opened}filters-opened{else}filters-closed{/if}
 ">
 {include file='front/members/header.html'}
         {apply_filters('glm-member-db-front-members-list-pageTop', '')}
-        <script src="http://maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
-
+        
+        <div class="glm-member-list-inner-wrapper">
     {if $settings.list_show_map}
+            <div id="glm-member-list-map-toggle" class="button glm-button">Map</div>
+        {/if}
+        {if $settings.list_show_search}
+        <div id="glm-member-list-filters-wrapper">
+            <div id="glm-member-list-filters-button" class="button glm-button glm-member-list-filters-toggle">
+                FILTERS
+            </div>
+            <div id="glm-member-list-filters-box">
+                <div id="glm-member-list-filters-close" class="button glm-button glm-member-list-filters-toggle">Close</div> 
+                <form action="{$thisUrl}?glm_action=list" method="post" enctype="multipart/form-data">
+                    <div class="small-12 columns glm-member-search glm-member-entry-container glm-member-container">
+                        {apply_filters('glm-member-db-front-members-list-searchFormTop', '')}
+                        <div>
+                            <h3>Filter {$terms.term_member_cap}s</h3>
+                        </div>
+                        {if $settings.list_show_search_category}
+                            <div>
+                                {$terms.term_member_cap} Category:
+                                <select name="categorySearch" id="categorySelect">
+                                {if !$singleCategory}
+                                    <option value="">(all)</option>
+                                {/if}
+                                {foreach from=$categories item=v}
+                                    <option value="{$v.id}"{if $v.default} selected="selected"{/if}>
+                                        {if $v.parent}&nbsp;&nbsp;&nbsp;&nbsp;{/if}{$v.name}
+                                    </option>
+                                {/foreach}
+                                </select>
+                            </div>
+                        {/if}
+                        {if $settings.list_show_search_amenities}
+                            <div>
+                                {$terms.term_member_cap} Amenity:
+                                <select name="amenitySearch" id="amenitySelect">
+                                    <option value=""></option>https://www.youtube.com/watch?v=18tGkzfPbmA
+                                    {foreach from=$amenities item=v}
+                                        <option value="{$v.id}" {if $v.default} selected="selected"{/if}>
+                                            {$v.name}
+                                        </option>
+                                    {/foreach}
+                                </select>
+                            </div>
+                        {/if}
+
+                        {if $settings.list_show_search_text}
+                            <div>
+                                Text Search: <input type="text" name="textSearch" value="{$textSearch}" class="glm-form-text-input">
+                            </div>
+                        {/if}
+                        <div><input class="button glm-member-button centered" type="submit" value="Search"></div>
+                        {apply_filters('glm-member-db-front-members-list-searchFormBottom', '')}
+                    </div>
+                </form>
+            </div> <!-- glm-member-list-filters-box -->
+        </div> <!-- glm-member-list-wrapper -->
+        {/if} {*list_show_search*}
+    {if $settings.list_show_map}        
+        <script src="http://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">
             <div id="glm-locationMap" class="glm-map">(map loads here)</div>
         </div>
         {apply_filters('glm-member-db-front-members-list-mapBottom', '')}
     {/if}
-    <div class="glm-member-list-inner-wrapper">
-    {if $settings.list_show_map}
-        <div id="glm-member-list-map-toggle" class="button glm-button">Map</div>
-    {/if}
-    {if $settings.list_show_search}
-        <form action="{$thisUrl}?glm_action=list" method="post" enctype="multipart/form-data">
-            <div class="row">
-                <div class="small-12 columns glm-member-search glm-member-entry-container glm-member-container">
-                    {apply_filters('glm-member-db-front-members-list-searchFormTop', '')}
-                    <div class="row">
-                        <div class="small-12 columns">
-                            <h3>Search for a {$terms.term_member_cap}</h3>
-                        </div>
-                    </div>
-                    <div class="row">
-                {if $settings.list_show_search_category}
-                    <div class="small-12 medium-5 columns">
-                        {$terms.term_member_cap} Category:
-                        <select name="categorySearch" id="categorySelect">
-                {if !$singleCategory}
-                            <option value="">(all)</option>
-                {/if}
-                {foreach from=$categories item=v}
-                            <option value="{$v.id}"{if $v.default} selected="selected"{/if}>
-                                {if $v.parent}&nbsp;&nbsp;&nbsp;&nbsp;{/if}{$v.name}
-                            </option>
-                {/foreach}
-                        </select>
-                    </div>
-            {/if}
-            {if $settings.list_show_search_text}
-                        <div class="small-12 medium-7 columns">Text Search: <input type="text" name="textSearch" value="{$textSearch}" class="glm-form-text-input"></div>
-            {/if}
-
-                    </div>
-
-            {if $settings.list_show_search_amenities}
-
-                    <div class="row">
-                        <div class="small-12 medium-5 columns">
-                            {$terms.term_member_cap} Amenity:
-                            <select name="amenitySearch" id="amenitySelect">
-                                <option value=""></option>
-                    {foreach from=$amenities item=v}
-                                <option value="{$v.id}" {if $v.default} selected="selected"{/if}>
-                                    {$v.name}
-                                </option>
-                    {/foreach}
-                            </select>
-                        </div>
-                    </div>
-
-            {/if}
-                    <div class="row"><div class="small-12 columns"><input class="button glm-member-button centered" type="submit" value="Search"></div></div>
-                    {apply_filters('glm-member-db-front-members-list-searchFormBottom', '')}
-                </div>
-            </div>
-        </form>
- {/if} {*list_show_search*}
-
- {apply_filters('glm-member-db-front-members-list-listHeaderTop', '')}
-
+    {apply_filters('glm-member-db-front-members-list-listHeaderTop', '')}
+    
+        
  {if $settings.list_show_list && !$blankStart}
         <h3>List of {$terms.term_member_plur_cap}</h3>
   {if $haveMembers}
@@ -92,6 +92,7 @@
  
      <!-- Member information displayed in list -->
  
+    <div class="glm-member-list-listing-container">
      {foreach $members as $m}
  
         {apply_filters('glm-member-db-front-members-list-memberAbove', '', $m.id)}
@@ -104,7 +105,8 @@
                     <div class="glm-member-list-data small-12 columns">
                 {if $m.logo && $settings.list_show_logo}
                     <div class="glm-member-list-image-wrapper right small-12 medium-4 columns">
-                        <div class="glm-member-list-image-border" style="background: url('{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$m.logo}') no-repeat; background-size: contain; background-position: center center; height: 250px;">
+                        <div class="glm-member-list-image-border">
+                            <img src="{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$m.logo}">
                         </div>
                    </div>
                 {/if}
@@ -142,7 +144,7 @@
                         {if $m.url && $settings.list_show_url}<a id='glm-member-list-website-link' href="{$m.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if}>Visit Website</a>{/if}
                         {if $m.email && $settings.list_show_email}<a href="mailto:{$m.email}">Email</a>{/if}
                      </div>
-                    <div class="glm-member-list-socials">
+                    <div class="glm-member-db-socials">
                        {apply_filters('glm-member-db-front-members-social-list', '', $m.id)}
                     </div>
                     
@@ -150,7 +152,7 @@
                     <div>
                     {apply_filters('glm-member-db-front-members-list-memberDescriptionTop', '', $m.id)}
                     {if $m.short_descr && $settings.list_show_short_descr}
-                        {$m.short_descr|nl2br}<a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">more</a>
+                        {$m.short_descr|nl2br}<a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/"> More</a>
                      {/if}
                     {apply_filters('glm-member-db-front-members-list-memberDescriptionBottom', '', $m.id)}
                     </div>
@@ -267,122 +269,169 @@
         </div> <!-- End of information displayed in map bubbles -->
  
      {/foreach} {*$members*}
+         </div>
         {apply_filters('glm-member-db-front-members-list-pageBottom', '')}
  {else}
         <div>(no {$terms.term_member_plur} listed)</div>
  {/if}
  
  {/if} {*list_show_list*}
-        <script type="text/javascript">
-             jQuery(document).ready(function($) {
+     <script type="text/javascript">
+        jQuery(document).ready(function($) {
 
-    {if $settings.list_show_map}
-    
-                $("#glm-member-list-map-toggle").click( function() {
-                    $(".glm-member-db-list-view").toggleClass("map-opened");
-                    $(".glm-member-db-list-view").toggleClass("map-closed");
-                    var currentScroll = $(window).scrollTop(); // get current position
-                    var mapTop = $("#glm-locationMap-container").offset().top-10;
-                    if (currentScroll >= mapTop) {
-                        $('body,html').animate({
-                            scrollTop: $("#glm-locationMap-container").offset().top-10
-                        }, 50);
+            // Show search filters box
+            {if $settings.list_show_search}
+                var fixmeTop = $('#glm-member-list-filters-button').offset().top;
+                $(window).scroll(function() { 
+
+                    var currentScroll = $(window).scrollTop();
+
+                    if (currentScroll >= fixmeTop) {
+                        if ($(window).width() < 1024) {
+                            $('#glm-member-list-filters-wrapper').css({
+                                position: 'fixed',
+                                top: '5px',
+                                transform: 'translateX(0%)'
+                            });
+                        } else {
+                            $('#glm-member-list-filters-wrapper').css({
+                                position: 'fixed',
+                                top: '30px',
+                                transform: 'translateX(0%)'
+                            });
+                        }
                     } else {
-                        $('body,html').animate({
-                            scrollTop: $("#glm-locationMap-container").offset().top-10
-                        }, 400);
+                        $('#glm-member-list-filters-wrapper').css({
+                            position: 'static',
+                            top: '0',
+                            transform: 'translateX(0%)'
+                        });
                     }
-                });
-                
-                /*
-                 * Google Maps
-                 *  API reference: https://developers.google.com/maps/documentation/javascript/reference
-                 */
 
-                // Create a Google Map object
-                var map = new google.maps.Map(document.getElementById('glm-locationMap'), {
-                	center: new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}),
-                	zoom: {$settings.maps_default_zoom},
-                    disableDefaultUI: false,
-                    mapTypeId: google.maps.MapTypeId.MAP,
                 });
+                $(".glm-member-list-filters-toggle").click( function() {
+                    $(".glm-member-db-list-view").toggleClass("filters-opened");
+                    $(".glm-member-db-list-view").toggleClass("filters-closed");  
+                    $("#glm-locationMap-container").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
+                        function() {
+                            var center = map.getCenter();
+                            google.maps.event.trigger(map, "resize");
+                            map.setCenter(center);
+                    });
+                });
+            {/if}
+
+            {if $settings.list_show_map}
+                        /*
+                         * Google Maps
+                         *  API reference: https://developers.google.com/maps/documentation/javascript/reference
+                         */
+
+
+                        // Create a Google Map object
+                        var map = new google.maps.Map(document.getElementById('glm-locationMap'), {
+                                center: new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}),
+                                zoom: {$settings.maps_default_zoom},
+                            disableDefaultUI: false,
+                            mapTypeId: google.maps.MapTypeId.MAP,
+                        });
+                        
+                        $("#glm-member-list-map-toggle").click( function() {
+                            $(".glm-member-db-list-view").toggleClass("map-opened");
+                            $(".glm-member-db-list-view").toggleClass("map-closed");
+                            var center = map.getCenter();
+                            google.maps.event.trigger(map, "resize");
+                            map.setCenter(center);
+
+                            var currentScroll = $(window).scrollTop(); // get current position
+                            var mapTop = $("#glm-locationMap-container").offset().top-10;
+                            {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if}
+                            if (currentScroll >= mapTop) {
+                                $('body,html').animate({
+                                    scrollTop: $("#glm-locationMap-container").offset().top-100
+                                }, 50);
+                            } else {
+                                $('body,html').animate({
+                                    scrollTop: $("#glm-locationMap-container").offset().top-100
+                                }, 400);
+                            }
+                        });
+                        var geocoder = new google.maps.Geocoder();
+                        var bounds = new google.maps.LatLngBounds();
+                        var infowindow = new google.maps.InfoWindow();
+
+                        // Try HTML5 to get user geolocation
+                        if(navigator.geolocation) {
+                            navigator.geolocation.getCurrentPosition(function(position) {
+                                var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+                                var pinIcon = new google.maps.MarkerImage(
+                                        'https://maps.google.com/mapfiles/kml/shapes/man.png',
+                                    null, /* size is determined at runtime */
+                                    null, /* origin is 0,0 */
+                                    null, /* anchor is bottom center of the scaled image */
+                                    new google.maps.Size(30, 30)
+                                );
+                                var myMarker = new google.maps.Marker({
+                                    map: map,
+                                    position: myLocation,
+                                    draggable: false,
+                                    animation: google.maps.Animation.DROP,
+                                    title: 'My Location',
+                                    icon: pinIcon,
+                                    zIndex: 100
+                                });
+                            });
+                        }
 
-                var geocoder = new google.maps.Geocoder();
-                var bounds = new google.maps.LatLngBounds();
-                var infowindow = new google.maps.InfoWindow();
+                {if $haveMembers}
+                    {foreach $members as $m}
+                      {if $m.lat != 0 && $m.lon != 0}
 
-                // Try HTML5 to get user geolocation
-                if(navigator.geolocation) {
-                    navigator.geolocation.getCurrentPosition(function(position) {
-                        var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
-                        var pinIcon = new google.maps.MarkerImage(
-                        	'https://maps.google.com/mapfiles/kml/shapes/man.png',
-                            null, /* size is determined at runtime */
-                            null, /* origin is 0,0 */
-                            null, /* anchor is bottom center of the scaled image */
-                            new google.maps.Size(30, 30)
-                        );
-                        var myMarker = new google.maps.Marker({
+                        // Create a marker for this member
+                        var marker = new google.maps.Marker({
                             map: map,
-                            position: myLocation,
+                            position: new google.maps.LatLng({$m.lat}, {$m.lon}),
                             draggable: false,
                             animation: google.maps.Animation.DROP,
-                            title: 'My Location',
-                            icon: pinIcon,
-                            zIndex: 100
+                            title: '{$m.member|escape}',
+                            descr: $('#map_info_' + {$m.id}).html(),
+                            memberID: {$m.id}
                         });
-                    });
-                }
-
-        {if $haveMembers}
-            {foreach $members as $m}
-              {if $m.lat != 0 && $m.lon != 0}
-
-                // Create a marker for this member
-                var marker = new google.maps.Marker({
-                    map: map,
-                    position: new google.maps.LatLng({$m.lat}, {$m.lon}),
-                    draggable: false,
-                    animation: google.maps.Animation.DROP,
-                    title: '{$m.member|escape}',
-                    descr: $('#map_info_' + {$m.id}).html(),
-                    memberID: {$m.id}
-                });
 
-                // Add a click listener for this marker
-                marker.addListener('click', function() {
-                	infowindow.setOptions({
-                		content: this.descr
-                	});
-                    infowindow.open(map,this);
-                });
+                        // Add a click listener for this marker
+                        marker.addListener('click', function() {
+                                infowindow.setOptions({
+                                        content: this.descr
+                                });
+                            infowindow.open(map,this);
+                        });
 
-                // Extend the map bounds to include this marker
-                bounds.extend(marker.position);
+                        // Extend the map bounds to include this marker
+                        bounds.extend(marker.position);
 
-             {/if}
-            {/foreach}
+                     {/if}
+                    {/foreach}
 
-                // Fit map to bounds of all markers
-                map.fitBounds(bounds);
+                        // Fit map to bounds of all markers
+                        map.fitBounds(bounds);
 
-                // Check for first map idle (completely loaded) - Check max zoom
-                var mapLoadedListener = google.maps.event.addListener(map, 'idle', function() {
-                    if (map.getZoom() > 14) {
-                        this.setZoom(14);
-                    }
-                    google.maps.event.removeListener(mapLoadedListener);
-                });
+                        // Check for first map idle (completely loaded) - Check max zoom
+                        var mapLoadedListener = google.maps.event.addListener(map, 'idle', function() {
+                            if (map.getZoom() > 14) {
+                                this.setZoom(14);
+                            }
+                            google.maps.event.removeListener(mapLoadedListener);
+                        });
 
-        {else}
+                {else}
 
 
-        {/if}
+                {/if}
 
 
-    {/if}
-            });
-        </script>
+            {/if}
+        });
+            </script>
         </div><!-- glm-member-list-inner-wrapper-->
     </div><!-- glm-member-db-list-view -->
 {include file='front/footer.html'}
-- 
2.17.1