Styles for the grid view member list image filler

diff --git a/css/front.css b/css/front.css
index bf3e9e7..66c0e14 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -444,18 +444,32 @@ glm-member-db-list.glm-member-db-grid-view .glm-member-list-image {
 .glm-member-db-grid-view .glm-member-list-sub-links:last-child {
 /*    text-align: right;*/
 }
+.glm-member-db-grid-view.filters-closed #glm-member-list-terms,
 .glm-member-db-grid-view.filters-closed .glm-member-list-listing-container,
 .glm-member-db-grid-view.filters-closed .glm-member-db-list-header-title {
     width: 100%;
     float: right;
     transition: all 0.5s;
 }
+.glm-member-db-grid-view.filters-opened #glm-member-list-terms,
 .glm-member-db-grid-view.filters-opened .glm-member-list-listing-container,
 .glm-member-db-grid-view.filters-opened .glm-member-db-list-header-title {
     width: 80%;
     float: right;
     transition: all 0.5s;
 }
+.glm-member-db-grid-view .glm-member-list-image-wrapper {
+    position: relative;
+}
+.glm-member-db-grid-view .glm-member-list-image {
+    bottom: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
 /*
  * Grid-view styles end
  */

diff --git a/views/front/members/grid.html b/views/front/members/grid.html
index c04db8d..b094d46 100644 (file)
--- a/views/front/members/grid.html
+++ b/views/front/members/grid.html
@@ -97,118 +97,118 @@
             <li class="glm-member-list-record">
         {apply_filters('glm-member-db-front-members-list-memberAbove', '', $m.id)}
                 <div class="glm-member-db-border-wrap">
-                     <div>
-
-                                    {if $settings.list_show_detail_link}
-                                        <a class="glm-member-list-image-wrapper" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
-                                    {/if}
-                                    {if $m.logo && $settings.list_show_logo}<div class="glm-member-list-image-empty">
-                                        <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$m.logo}">
-                                        <img class="glm-member-filler-image" src="{$assetsUrl}/filler_s.gif">
-                                        </div>
-                                    {else}
-                                    <div class="glm-member-list-image-empty">
-                                        <img class="glm-member-filler-image" src="{$assetsUrl}/filler_s.gif">
-                                    </div>
-                                    {/if}
-                                    {if $settings.list_show_detail_link}
-                                        </a>
-                                    {/if}   
-                                </div> <!-- end of div.glm-member-list-record-border -->
-                                <h4 class="glm-member-title">
-                                    {if $settings.list_show_detail_link}
-                                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
-                                            {$m.member}
-                                        </a>
-                                    {else}
-                                        {$m.member}
-                                    {/if}
-
-                                </h4>
-
-                                <div class="glm-member-list-sub-links">
-                                    {if $m.url && $settings.list_show_url}<a href="{$m.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if}>Website</a>{/if}
-                                    {if $m.phone && $settings.list_map_show_phone}<a href="tel:+{$m.phone}">Phone</a>{/if}
-                                    <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">More</a>
-                                    {apply_filters('glm-member-db-front-members-list-memberBelow', '', $m.id)}
-                                </div>
+                    <div>
+
+                    {if $settings.list_show_detail_link}
+                        <a class="glm-member-list-image-wrapper" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
+                    {/if}
+                    {if $m.logo && $settings.list_show_logo}<div class="glm-member-list-image-empty">
+                        <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$m.logo}">
+                        <img class="glm-member-filler-image" src="{$assetsUrl}/filler_s.gif">
+                        </div>
+                    {else}
+                    <div class="glm-member-list-image-empty">
+                        <img class="glm-member-filler-image" src="{$assetsUrl}/filler_s.gif">
+                    </div>
+                    {/if}
+                    {if $settings.list_show_detail_link}
+                        </a>
+                    {/if}   
+                    </div> <!-- end of div.glm-member-list-record-border -->
+                    <h4 class="glm-member-title">
+                        {if $settings.list_show_detail_link}
+                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
+                                {$m.member}
+                            </a>
+                        {else}
+                            {$m.member}
+                        {/if}
+
+                    </h4>
 
-                                <!-- Member information displayed in map bubbles -->
-                                <div id="map_info_{$m.id}" class="glm-hidden">
-                                    {apply_filters('glm-member-db-front-members-list-mapBubbleTop', '', $m.id)}
-                                    {if $m.logo && $settings.list_map_show_logo}
-                                        <div class="glm-member-list-image">
-                                            <img src="{$glmPluginMediaUrl}/images/{$settings.list_map_logo_size}/{$m.logo}">
-                                        </div>
-                                    {/if}
-                                    <div class="glm-map-member-name">
-                                        {if $settings.list_map_show_detaillink}
-                                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">{$m.member}</a>
-                                        {else}
-                                            {$m.member}
-                                        {/if}
-                                    </div>
-                                    {if $settings.list_map_show_address}
-                                        <p class="glm-map-member-address">
-                                            {if $settings.list_map_show_street}
-                                                {if $m.addr1}{$m.addr1}<br>{/if}
-                                                {if $m.addr2}{$m.addr2}<br>{/if}
-                                            {/if}
-                                            {if $settings.list_map_show_citystatezip}
-                                                {if $m.city}{$m.city}{if $m.state.value}, {/if}{/if}{if $m.state.value}{$m.state.value}{/if}{if $m.zip} {$m.zip}{/if}
-                                            {/if}
-                                            {if $m.country.name && $settings.list_map_show_country}
-                                                <br>{$m.country.name}
-                                            {/if}
-                                        </p>
-                                    {/if} {*list_map_show_address*}
-                                    <div class="glm-member-list-info">
-                                        <p>
-                                            {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> {$m.phone}<br>{/if}
-                                            {if $m.toll_free && $settings.list_map_show_tollfree}<b>Toll Free:</b> {$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}
-                                            {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}
-                                        </p>
-                                        {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}
-                                        {if $m.categories && $settings.list_map_show_categories}
-                                            <div class="glm-member-list-items">
-                                                <b>{$terms.term_member_cap} Categories</b>
-                                                <ul>
-                                                {foreach $m.categories as $c}
-                                                    <li>
-                                                        {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
-                                                    </li>
-                                                {/foreach}
-                                                </ul>
-                                            </div>
-                                        {/if}
-                                        {if $m.cc_type && $settings.list_map_show_creditcards}
-                                            <div class="glm-member-list-items">
-                                                <b>Credit Cards Accepted:</b>
-                                                <ul>
-                                                {foreach $m.cc_type.names as $c}
-                                                    <li>{$c}</li>
-                                                {/foreach}
-                                                </ul>
-                                            </div>
-                                        {/if}
-                                        {if $settings.list_map_show_amenities}
-                                            <div class="glm-member-list-items">
-                                                <b>Amenities:</b>
-                                                <ul>
-                                                {foreach $m.amenities as $a}
-                                                    <li>{$a.name}</li>
-                                                {/foreach}
-                                                </ul>
-                                            </div>
-                                        {/if}
-                                    </div>
-                                    {apply_filters('glm-member-db-front-members-list-mapBubbleBottom', '', $m.id)}
-                                </div> <!-- End of information displayed in map bubbles -->
-                            </div> <!-- End of glm-member-db-border-wrap -->
-                        </li> <!-- end of li.glm-member-list-record -->
+                    <div class="glm-member-list-sub-links">
+                        {if $m.url && $settings.list_show_url}<a href="{$m.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if}>Website</a>{/if}
+                        {if $m.phone && $settings.list_map_show_phone}<a href="tel:+{$m.phone}">Phone</a>{/if}
+                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">More</a>
+                        {apply_filters('glm-member-db-front-members-list-memberBelow', '', $m.id)}
+                    </div>
+
+                    <!-- Member information displayed in map bubbles -->
+                    <div id="map_info_{$m.id}" class="glm-hidden">
+                        {apply_filters('glm-member-db-front-members-list-mapBubbleTop', '', $m.id)}
+                        {if $m.logo && $settings.list_map_show_logo}
+                            <div class="glm-member-list-image">
+                                <img src="{$glmPluginMediaUrl}/images/{$settings.list_map_logo_size}/{$m.logo}">
+                            </div>
+                        {/if}
+                        <div class="glm-map-member-name">
+                            {if $settings.list_map_show_detaillink}
+                                <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">{$m.member}</a>
+                            {else}
+                                {$m.member}
+                            {/if}
+                        </div>
+                        {if $settings.list_map_show_address}
+                            <p class="glm-map-member-address">
+                                {if $settings.list_map_show_street}
+                                    {if $m.addr1}{$m.addr1}<br>{/if}
+                                    {if $m.addr2}{$m.addr2}<br>{/if}
+                                {/if}
+                                {if $settings.list_map_show_citystatezip}
+                                    {if $m.city}{$m.city}{if $m.state.value}, {/if}{/if}{if $m.state.value}{$m.state.value}{/if}{if $m.zip} {$m.zip}{/if}
+                                {/if}
+                                {if $m.country.name && $settings.list_map_show_country}
+                                    <br>{$m.country.name}
+                                {/if}
+                            </p>
+                        {/if} {*list_map_show_address*}
+                        <div class="glm-member-list-info">
+                            <p>
+                                {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> {$m.phone}<br>{/if}
+                                {if $m.toll_free && $settings.list_map_show_tollfree}<b>Toll Free:</b> {$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}
+                                {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}
+                            </p>
+                            {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}
+                            {if $m.categories && $settings.list_map_show_categories}
+                                <div class="glm-member-list-items">
+                                    <b>{$terms.term_member_cap} Categories</b>
+                                    <ul>
+                                    {foreach $m.categories as $c}
+                                        <li>
+                                            {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
+                                        </li>
+                                    {/foreach}
+                                    </ul>
+                                </div>
+                            {/if}
+                            {if $m.cc_type && $settings.list_map_show_creditcards}
+                                <div class="glm-member-list-items">
+                                    <b>Credit Cards Accepted:</b>
+                                    <ul>
+                                    {foreach $m.cc_type.names as $c}
+                                        <li>{$c}</li>
+                                    {/foreach}
+                                    </ul>
+                                </div>
+                            {/if}
+                            {if $settings.list_map_show_amenities}
+                                <div class="glm-member-list-items">
+                                    <b>Amenities:</b>
+                                    <ul>
+                                    {foreach $m.amenities as $a}
+                                        <li>{$a.name}</li>
+                                    {/foreach}
+                                    </ul>
+                                </div>
+                            {/if}
+                        </div>
+                        {apply_filters('glm-member-db-front-members-list-mapBubbleBottom', '', $m.id)}
+                    </div> <!-- End of information displayed in map bubbles -->
+                </div> <!-- End of glm-member-db-border-wrap -->
+            </li> <!-- end of li.glm-member-list-record -->
 
 
             {/foreach} {*$members*}

diff --git a/views/front/members/list.html b/views/front/members/list.html
index 28dd9f2..42ef0bf 100644 (file)
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -78,7 +78,7 @@
         <h3 class="glm-member-db-list-header-title">List of {$terms.term_member_plur_cap}</h3>
   {if $haveMembers}
 
-    <p>{$terms.term_member_plur_cap} found: {$membersFound}<br></p>
+        <div id="glm-member-list-terms">{$terms.term_member_plur_cap} found: {$membersFound}<br></div>
 
 
         {apply_filters('glm-member-db-front-members-list-listHeaderBottom', '')}
@@ -102,20 +102,20 @@
                 <div class="glm-member-db-border-wrap">
 
                     {if $settings.list_show_detail_link}
-                        <a class="glm-member-list-image-wrapper" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
+                    <a class="glm-member-list-image-wrapper" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
                     {/if}
                     {if $m.logo && $settings.list_show_logo}
-                    <div class="glm-member-list-image-empty">
-                        <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$m.logo}">
-                        <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
-                    </div>
+                        <div class="glm-member-list-image-empty">
+                            <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$m.logo}">
+                            <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
+                        </div>
                     {else}
-                    <div class="glm-member-list-image-empty">
-                        <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
-                    </div>
+                        <div class="glm-member-list-image-empty">
+                            <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
+                        </div>
                     {/if}
                     {if $settings.list_show_detail_link}
-                        </a>
+                    </a>
                     {/if}
                     <div class="glm-member-list-info-wrapper">
                         <h4 class="glm-member-title">
@@ -224,13 +224,13 @@
                  <!-- Member Logo - Medium and up-->
 
                     <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">
-                            <img src="{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$m.logo}">
-                        </div>
-                   </div>
-                {/if}
+                    {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">
+                                <img src="{$glmPluginMediaUrl}/images/{$settings.list_logo_size}/{$m.logo}">
+                            </div>
+                       </div>
+                    {/if}
 
                      <div class="glm-member-list-active-info small-12 medium-8 columns">
  <!-- Member name, address, and basic information -->