From 86330b6e41ab5033dc6a068ebd98d669a0bf1303 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Mon, 8 Aug 2016 09:10:35 -0400
Subject: [PATCH] Member list grid view styles and markup added

Updated styles and markup for the member list grid view added.
---
 css/front.css                 | 72 ++++++++++++++++++++++++++++++++---
 views/front/members/list.html | 46 +++++++++++-----------
 2 files changed, 91 insertions(+), 27 deletions(-)

diff --git a/css/front.css b/css/front.css
index 99655815..bf3e9e77 100644
--- a/css/front.css
+++ b/css/front.css
@@ -291,25 +291,25 @@
 .glm-member-list-image-filler {
     float: left;
 }
-.glm-member-list-sub-links {
+.glm-member-db-list-view .glm-member-list-sub-links {
     color: black;
     height: 50px;
     padding: 15px;
     width: 100%;
 }
-.glm-member-list-sub-links > a {
+.glm-member-db-list-view .glm-member-list-sub-links > a {
     display: block;
     float: left;
     width: 33%;
     text-align: center;
 }
-.glm-member-list-sub-links > a:first-child {
+.glm-member-db-list-view .glm-member-list-sub-links > a:first-child {
 /*    text-align:left;*/
 }
-.glm-member-list-sub-links > a:nth-child(2) {
+.glm-member-db-list-view .glm-member-list-sub-links > a:nth-child(2) {
 /*    text-align: center;*/
 }
-.glm-member-list-sub-links:last-child {
+.glm-member-db-list-view .glm-member-list-sub-links:last-child {
 /*    text-align: right;*/
 }
 .glm-member-db-list .glm-member-list-listing-container {
@@ -398,6 +398,68 @@ glm-member-db-list.glm-member-db-grid-view .glm-member-list-image {
  * Member List End
  */
 
+/*
+ * Grid-view styles start
+ */
+.glm-member-db-grid-view .glm-member-list-image-wrapper {
+    max-height: 175px;   
+}
+.glm-member-db-grid-view .glm-member-list-info-wrapper {
+    padding: 10px 15px 20px;
+}
+.glm-member-db-grid-view .glm-member-title a {
+    color: black;
+}
+.glm-member-db-grid-view .glm-member-list-sub-links > a {
+    text-transform: uppercase;
+    font-weight: bold;
+}
+.glm-member-db-grid-view .glm-member-list-sub-links > a::before {
+    color: #adadad;
+    font-size: 18px;
+    padding: 0 7px;
+    content: "";
+}
+.glm-member-db-grid-view .glm-member-list-sub-links {
+    color: black;
+    height: 50px;
+    padding: 15px;
+    width: 100%;
+}
+.glm-member-db-grid-view .glm-member-list-sub-links > a {
+    display: block;
+    float: left;
+    text-align: center;
+}
+.glm-member-db-grid-view .glm-member-list-sub-links > a:hover:before {
+    text-decoration: none;
+}
+.glm-member-db-grid-view .glm-member-list-sub-links > a:first-child {
+/*    text-align:left;*/
+}
+.glm-member-db-grid-view .glm-member-list-sub-links > a:nth-child(n+2):before {
+    content: "|";
+    display: inline-block;
+}
+.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-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-listing-container,
+.glm-member-db-grid-view.filters-opened .glm-member-db-list-header-title {
+    width: 80%;
+    float: right;
+    transition: all 0.5s;
+}
+/*
+ * Grid-view styles end
+ */
+
 /*
  * Member Detail Start
  */
diff --git a/views/front/members/list.html b/views/front/members/list.html
index 679eb3e1..28dd9f2c 100644
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -75,11 +75,17 @@
 
 
  {if $settings.list_show_list && !$blankStart}
-        <h3>List of {$terms.term_member_plur_cap}</h3>
+        <h3 class="glm-member-db-list-header-title">List of {$terms.term_member_plur_cap}</h3>
   {if $haveMembers}
 
-    {$terms.term_member_plur_cap} found: {$membersFound}<br>
+    <p>{$terms.term_member_plur_cap} found: {$membersFound}<br></p>
 
+
+        {apply_filters('glm-member-db-front-members-list-listHeaderBottom', '')}
+
+     <!-- Member information displayed in list -->
+
+    <div class="glm-member-list-listing-container">
     {if $settings.list_show_search_alpha}
         <div class="glm-alpha-links">
             <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}&categorySearch={$catSearchSelected}" class="glm-alpha-link{if !$alphaSelected} glm-alpha-link-selected{/if}">All</a>
@@ -88,14 +94,8 @@
       {/foreach}
        </div>
     {/if}
-        {apply_filters('glm-member-db-front-members-list-listHeaderBottom', '')}
-
-     <!-- Member information displayed in list -->
-
-    <div class="glm-member-list-listing-container">
-
     {if $view == grid}
-        <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-2">
+        <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
         {foreach $members as $m}
             <li class="glm-member-list-record">
                 {apply_filters('glm-member-db-front-members-list-memberAbove', '', $m.member_pointer)}
@@ -117,22 +117,24 @@
                     {if $settings.list_show_detail_link}
                         </a>
                     {/if}
-                    <h4 class="glm-member-title">
-                        {if $settings.list_show_detail_link}
-                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">
+                    <div class="glm-member-list-info-wrapper">
+                        <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}
-                            </a>
-                        {else}
-                            {$m.member}
-                        {/if}
+                            {/if}
 
-                    </h4>
+                        </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.member_pointer)}
+                        <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}/">View More</a>
+                            {apply_filters('glm-member-db-front-members-list-memberBelow', '', $m.member_pointer)}
+                        </div>
                     </div>
 
                     <!-- Member information displayed in map bubbles -->
-- 
2.17.1