Front featured item list improved and styled

diff --git a/css/front.css b/css/front.css
index aeea002..4616d82 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -1105,3 +1105,26 @@ glm-member-detail-content-toggle {
     }
 }
 */
+
+/* Featured Grid Start */
+#featured-grid {
+    list-style: none;
+}
+#featured-grid .featured-grid-item-wrapper {
+    padding: 10px;
+    list-style: none;
+}
+#featured-grid .featured-grid-item {
+    border: 1px solid lightgrey;
+    border-radius: 4px;
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    box-shadow: 1px 1px 8px 0px lightgrey;
+    overflow: hidden;
+}
+#featured-grid .featured-grid-item .featured-grid-item-info {
+    padding: 5px;
+}
+
+/* Featured Grid End */

diff --git a/views/front/members/list.html b/views/front/members/list.html
index 95795f2..633e59d 100755 (executable)
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -202,12 +202,45 @@
             </div> <!-- End of information displayed in map bubbles -->
         {/foreach}
         {if $haveFeaturedMembers}
+            
             <h3>Featured {$terms.term_member_plur_cap}</h3>
-            <p>
-            {foreach $featuredMembers as $fm}
-                {$fm.member_name}<br>
-            {/foreach}
-            </p>
+            
+            <ul id="featured-grid" class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
+                {foreach $featuredMembers as $fm}
+                    <li class="featured-grid-item-wrapper">
+                        {if $settings.list_show_detail_link && !$fm.has_no_profile.value}
+                            <a class="featured-grid-item" href="{$siteBaseUrl}{$settings.canonical_member_page}/{$fm.member_slug}/">
+                        {else}
+                            <div class="featured-grid-item">
+                        {/if}
+                            {if $fm.logo && $settings.list_show_logo}
+                                <div class="glm-member-list-has-image">
+                                    <img class="glm-member-list-image" src="{$glmPluginMediaUrl}/images/grid/{$fm.logo}">
+                                </div>
+                            {elseif $settings.list_show_logo_filler}
+                                <div class="glm-member-list-has-image">
+                                    <img class="glm-member-list-image-filler" src="{$assetsUrl}/filler_s.gif">
+                                </div>
+                            {else}
+                                <div class="glm-member-list-missing-image"></div>
+                            {/if}
+                            <div class="featured-grid-item-info">
+                                <h4 class="featured-member-title">{$fm.member_name}</h4>
+                                
+                                {if $fm.short_descr && $settings.list_show_short_descr}
+                                    <div class="featured-member-description">
+                                        {$fm.short_descr|nl2br}
+                                    </div>
+                                {/if}
+                            </div>
+                        {if $settings.list_show_detail_link && !$fm.has_no_profile.value}
+                            </a>
+                        {else}
+                            </div>
+                        {/if}
+                    </li>
+                {/foreach}
+            </ul>
         {/if}