From 861b7491143dbc9a9d9943cc734a24457b7d0b16 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Tue, 19 Aug 2014 17:08:30 -0400
Subject: [PATCH] Search results formatting.

---
 Toolkit/Members/css/member.css            |  39 ++++++-
 Toolkit/Members/templates/membersList.tpl | 124 ++++++++++++----------
 styles.css                                |  10 +-
 3 files changed, 109 insertions(+), 64 deletions(-)

diff --git a/Toolkit/Members/css/member.css b/Toolkit/Members/css/member.css
index 5e9c560..a199b33 100755
--- a/Toolkit/Members/css/member.css
+++ b/Toolkit/Members/css/member.css
@@ -1,7 +1,7 @@
 /* Member Search and display */
 #category-search {
 /*    clear: both;*/
-    padding: 0px, 10px, 0px, 10px;
+    padding: 0px 10px 0px 10px;
     margin-top: 22px;
 
 }
@@ -89,9 +89,9 @@ background-color: #ffffff;
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   font-size: 14px;
   line-height: 130%;
-    padding: 15px 20px;
+    padding: 15px;
   background-color: #eee;
-  height: 1%;
+  height: 185px;
   margin-bottom: 5px;
   overflow: hidden;
   position: relative;
@@ -110,7 +110,12 @@ background-color: #ffffff;
 }
 .memberSR {
     float: right;
+    padding: 0px !important;
     }
+.memberSR img {
+    width:100%;
+    height: 120px;
+}
 .list-add-link img, .list-view-link img {
     margin-bottom: 10px;
 }
@@ -126,8 +131,14 @@ background-color: #ffffff;
 .search-result-item h2 a:hover {color: #3D8D3A;}
 .search-result-item h2 a:active {color: #00456C;}
 
-.search-result-location {
-    float: left;
+.search-result-item img {
+/*    padding: 15px;*/
+    padding: 0px;
+    margin-top: 8px;
+    margin-bottom: 0px;
+}
+.search-result-item-container {
+    padding: 8px;
 }
 .search-result-distance {
   clear: left;
@@ -362,6 +373,10 @@ Restaurant, Hotels and Golf Courses
     padding: 3px 6px;
     }
 /* Accommodations Result List */
+.search-result-item-info {
+    min-height: 124px;
+    padding-top: 15px;
+}
 .search-result-item-info .member-hotel-result {
     height: 1%;
     overflow: hidden;
@@ -806,6 +821,20 @@ div.thumb {
     float: left;
     width: 64%;
 }
+.search-result-item-container .search-result-location {
+    padding: 5px 0px 5px 0px !important;
+    
+    font-size: 16px !important;
+    line-height: 130%;
+    margin-top: 9px;
+}
+.search-result-item-container .search-result-contact-info {
+    padding: 0px !important;
+    margin-top: 15px !important;
+}
+.search-result-item .membersSR {
+    padding: 0px !important;
+}
 #members_wrapper .member_list_res {
     color: #FFFFFF;
     display: block;
diff --git a/Toolkit/Members/templates/membersList.tpl b/Toolkit/Members/templates/membersList.tpl
index 38cdbbc..211a89c 100644
--- a/Toolkit/Members/templates/membersList.tpl
+++ b/Toolkit/Members/templates/membersList.tpl
@@ -21,72 +21,80 @@ searchMapIconActive="searchMapIconActive"
     <div class="results small-12 medium-6 columns">{getResults(#Found %s Businesses in %s page(s)#):h}</div>
     <div class="opensearchserver.ignore">{getPaging():h}</div>
     <div class="small-12 columns">Showing records {firstRecord} to {lastRecord}</div>
+    
+
+    <div flexy:foreach="recordSet,k,row" class="search-result-item-container small-12 medium-6 columns"><div class="search-result-item">
+            <div class="row">
+                <h3 class="fn org text-left small-12 columns">
+                    <a title="More Info" href="{row[url]:h}">{row[member_name]:h}</a>
+                </h3>   
+            </div>
+            <div class="row">
+                <div class="memberSR right small-4 columns">
+                    {if:row[addToLink]}
+                        <a id="add-{row[member_id]}" class="list-add-link" rel="{row[member_id]}" flexy:if="row[plink]" title="Add to Your Travel List" href="{row[plink]:h}">
+                            <img alt="Add to Your Travel List" src="baseurl/assets/addto.gif">
+                        </a>
+                    {else:}
+                        <a class="list-view-link" flexy:if="row[plink]" title="View Your Travel List" href="{row[plink]:h}">
+                            <img alt="View Your Travel List" src="baseurl/assets/viewTravelPlanner.gif">
+                        </a>
+                    {end:}
+                    {if:row[logo]}
+                        <img class="search-result-img" alt="{row[logo]}" src="{row[logo]}">
+                    {end:}
+                </div><!-- /.memberSR -->
+                <div class="search-result-item-info small-8 columns">
+                    {if:row[map_icon]}
+                        <div class="map-link left" rel="{row[map_icon][id]}">
+                            <img class="search-result-map-img" src="{row[map_icon][icon]:h}">
+                        </div>
+                    {end:}
+                    <div class="search-result-location adr small-12 columns">
+                        <div class="street-address">{row[street]:h}</div>
+                        <span class="locality">{row[city]:h}</span>,
+                        <span class="region" title="{row[state]:h}">{row[state_abbr]:h}</span>
+                        <span class="postal-code">{row[zip]:h}</span>
+                        <div flexy:if="row[phone]" class="search-result-phones">
+                            <div class="tel">Phone: {row[phone]:h}</div>
+                        </div>
 
-    <div flexy:foreach="recordSet,k,row" class="search-result-item small-12 medium-6 columns">
-        <h3 class="fn org text-left">
-            <a title="More Info" href="{row[url]:h}">{row[member_name]:h}</a>
-        </h3>
-        <div class="memberSR right">
-            {if:row[addToLink]}
-                <a id="add-{row[member_id]}" class="list-add-link" rel="{row[member_id]}" flexy:if="row[plink]" title="Add to Your Travel List" href="{row[plink]:h}">
-                    <img alt="Add to Your Travel List" src="baseurl/assets/addto.gif">
-                </a>
-            {else:}
-                <a class="list-view-link" flexy:if="row[plink]" title="View Your Travel List" href="{row[plink]:h}">
-                    <img alt="View Your Travel List" src="baseurl/assets/viewTravelPlanner.gif">
-                </a>
-            {end:}
-            {if:row[logo]}
-                <img class="search-result-img" alt="{row[logo]}" src="{row[logo]}">
-            {end:}
-        </div><!-- /.memberSR -->
-        <div class="search-result-item-info">
-            {if:row[map_icon]}
-                <div class="map-link left" rel="{row[map_icon][id]}">
-                    <img class="search-result-map-img" src="{row[map_icon][icon]:h}">
-                </div>
-            {end:}
-            <div class="search-result-location adr">
-                <div class="street-address">{row[street]:h}</div>
-                <span class="locality">{row[city]:h}</span>,
-                <span class="region" title="{row[state]:h}">{row[state_abbr]:h}</span>
-                <span class="postal-code">{row[zip]:h}</span>
-                <div flexy:if="row[phone]" class="search-result-phones">
-                    <div class="tel">Phone: {row[phone]:h}</div>
-                </div>
-                <div style="height: 1%; overflow: hidden; margin-top: 0.5em;">
-                    <div flexy:if="row[member_contact_email]" class="search-result-email" style="float: left; margin-right: 15px;">
-                        <a title="Email" href="mailto:{row[member_contact_email]:h}">Email</a>
-                    </div>
-                    <div flexy:if="row[website]" class="search-result-website" style="float: left; margin-right: 15px;">
-                        <a target="_blank" title="Website" href="{row[website]:h}" rel="{row[member_id]}" class="member-website">Website</a>
                     </div>
-                    <div flexy:if="row[address]" class="search-result-directions" style="float: left; margin-right: 15px;">
-                        <a target="_blank" title="Driving Directions" href="{row[address]:h}">Driving Directions</a>
+                    <div flexy:if="row[has_hotel_info]" class=" small-12 columns member-hotel-result">
+                        <a flexy:if="row[reservation_id]"
+                            href="{base_url:h}index.php?catid=50&set_property={row[reservation_id]:h}">
+                            <img alt="Online Reservations"
+                                src="baseurl/assets/buttons/reservations.gif">
+                        </a>
+                        {if:row[num_rooms]}
+                            Number of Rooms: {row[num_rooms]:h}
+                        {end:}
+                        <br>
+                        Open Year Round: {row[year_round]:h}
                     </div>
-                    <div flexy:if="row[has_member_packages]" class="search-result-packages" style="float: left; margin-right: 15px;">
-                        <a title="Member Packages" href="{row[url]:h}#packageSection">Special Offers</a>
+                    <a
+                        flexy:if="row[res_url]"
+                        id="ext_detail_teetime_btn"
+                        href="{row[res_url]:h}">Make a Tee Time</a>
+                    <div class="search-result-contact-info small-12 columns" style="height: 1%; overflow: hidden; margin-top: 0.5em;">
+                        <div flexy:if="row[member_contact_email]" class="search-result-email" style="float: left; margin-right: 15px;">
+                            <a title="Email" href="mailto:{row[member_contact_email]:h}">Email</a>
+                        </div>
+                        <div flexy:if="row[website]" class="search-result-website" style="float: left; margin-right: 15px;">
+                            <a target="_blank" title="Website" href="{row[website]:h}" rel="{row[member_id]}" class="member-website">Website</a>
+                        </div>
+                        <div flexy:if="row[address]" class="search-result-directions" style="float: left; margin-right: 15px;">
+                            <a target="_blank" title="Directions" href="{row[address]:h}">Directions</a>
+                        </div>
+                        <div flexy:if="row[has_member_packages]" class="search-result-packages" style="float: left; margin-right: 15px;">
+                            <a title="Member Packages" href="{row[url]:h}#packageSection">Special Offers</a>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div flexy:if="row[has_hotel_info]" class="member-hotel-result">
-                <a flexy:if="row[reservation_id]"
-                    href="{base_url:h}index.php?catid=50&set_property={row[reservation_id]:h}">
-                    <img alt="Online Reservations"
-                        src="baseurl/assets/buttons/reservations.gif">
-                </a>
-                {if:row[num_rooms]}
-                    Number of Rooms: {row[num_rooms]:h}
-                {end:}
-                <br>
-                Open Year Round: {row[year_round]:h}
-            </div>
-        <a
-            flexy:if="row[res_url]"
-            id="ext_detail_teetime_btn"
-            href="{row[res_url]:h}">Make a Tee Time</a>
         </div>
     </div>
+                </div>
 </div>
 {getPaging():h}
     <div flexy:if="letters" class="business-first-letter small-12 columns">
diff --git a/styles.css b/styles.css
index 1f1cba2..ce98d80 100644
--- a/styles.css
+++ b/styles.css
@@ -668,6 +668,14 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
 .listing {
     margin-top: 20px !important;
 }
+.container#interior #main .search-result-item h3 {
+  font-size: 16px;
+  color: #6d1112;
+  margin: 0px;
+  padding: 0px;
+/*  margin-top: 8px;
+  margin-bottom: 8px;*/
+}
 .container#interior #main > div {
   /*float: left;*/
   width: auto;
@@ -1365,7 +1373,7 @@ footer .copyright .separator {
 }
 
 #main .row .right {
-    margin-bottom: 25px;
+/*    margin-bottom: 25px;*/
 }
 
 .header-content .content p,
-- 
2.17.1