Fixing the sublink separator on grid view

The | character was being included in the hover underline on the
front grid view. With different css, this should not happen.

diff --git a/css/front.css b/css/front.css
index 485ed5a..bf8e7bd 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -411,39 +411,25 @@ glm-member-db-list.glm-member-db-grid-view .glm-member-list-image {
 .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 {
-    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;
+    position: relative;
+    margin: 1em;
+    overflow: hidden;
 }
-.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 ul {
+    display: flex;
+    margin-left: -1px;
 }
-.glm-member-db-grid-view .glm-member-list-sub-links > a:nth-child(n+2):before {
-    content: "|";
-    display: inline-block;   
-    color: #adadad;
-    font-size: 16px;
-    padding: 0 7px;
+.glm-member-db-grid-view .glm-member-list-sub-links li {
+    margin: .25em 0;
+    padding: 0 1em;
+    text-align: center;
+    border-left: 1px solid #ccc;
+    list-style: none;
 }
-.glm-member-db-grid-view .glm-member-list-sub-links:last-child {
-/*    text-align: right;*/
+.glm-member-db-grid-view .glm-member-list-sub-links li {
+    text-transform: uppercase;
+    font-weight: bold;
 }
 .glm-member-db-grid-view.filters-closed #glm-member-list-terms,
 .glm-member-db-grid-view.filters-closed .glm-member-list-listing-container,

diff --git a/views/front/members/list.html b/views/front/members/list.html
index 5de6225..95af256 100644 (file)
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -142,11 +142,13 @@
                         </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}-->
-                            {apply_filters('glm-member-db-front-members-list-linksBottom', '', $m.member_pointer)}
-                            <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)}
+                            <ul>
+                                {if $m.url && $settings.list_show_url}<li><a href="{$m.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if}>Website</a></li>{/if}
+        <!--                        {if $m.phone && $settings.list_map_show_phone}<a href="tel:+{$m.phone}">Phone</a>{/if}-->
+                                {apply_filters('glm-member-db-front-members-list-linksBottom', '', $m.member_pointer)}
+                                <li><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/">View More</a></li>
+                                {apply_filters('glm-member-db-front-members-list-memberBelow', '', $m.member_pointer)}
+                            </ul>
                         </div>
                     </div>