More member search results formatting
authorLaury GvR <laury@gaslightmedia.com>
Wed, 20 Aug 2014 21:02:37 +0000 (17:02 -0400)
committerLaury GvR <laury@gaslightmedia.com>
Wed, 20 Aug 2014 21:03:22 +0000 (17:03 -0400)
Toolkit/Members/css/member.css
Toolkit/Members/templates/membersList.tpl

index 5029acc..fe102b5 100755 (executable)
@@ -91,7 +91,8 @@ background-color: #ffffff;
   line-height: 130%;
     padding: 15px;
   background-color: #eee;
-  height: 185px;
+  height: 1%;
+  
   margin-bottom: 5px;
   overflow: hidden;
   position: relative;
@@ -113,15 +114,16 @@ background-color: #ffffff;
     padding: 0px !important;
     }
     /** Uncomment this if you want to force member search images to be a certain size **/
-/*.memberSR img {
-    width:100%;
-    height: 120px;
-}*/
+.memberSR img {
+    /* width:100%;
+    height: 120px;*/
+}
 .list-add-link img, .list-view-link img {
     margin-bottom: 10px;
 }
 .search-result-img {
     clear: right;
+    max-height: 120px;
     }
 .search-result-item h2 {
   padding: 0;
@@ -140,7 +142,19 @@ background-color: #ffffff;
 }
 .search-result-item-container {
     padding: 8px !important;
+    max-width: 550px !important;
+    margin-left: auto;
+    margin-right:auto;
+}
+/*@media (min-width: 641px) and (max-width: 1024px) {
+    .search-result-item-container {
+        margin-left: 15%;
+        max-width:80%;
+    }
 }
+@media (min-width: 641px) {
+    
+}*/
 .search-result-map-marker {
     margin-top: 15px;
     padding: 0px !important;
@@ -1352,3 +1366,17 @@ div.thumb {
     margin-left: auto;
     margin-right: auto;
 }
+
+@media (max-width: 550px) {
+    .search-result-container {
+        width: 100% !important;
+    }
+    .search-result-item .memberSR {
+        width: 100% !important;
+    }
+    .search-result-item .memberSR img {
+/*        margin-left: auto !important;
+        margin-right: auto !important;
+        float: none !important;*/
+    }
+}
\ No newline at end of file
index bad1d5f..75acf6e 100644 (file)
@@ -15,44 +15,45 @@ searchMapIconActive="searchMapIconActive"
         <li flexy:foreach="letters,k,v" class="{v[class]:h}"><a href="{v[url]:h}">{k}</a></li>
     </ul>
 </div>
-<div class="large-12">
+<div class="small-12">
     {if:numberedSet}
     <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 flexy:foreach="recordSet,k,row" class="search-result-item-container small-12 medium-10 medium-offset-1 large-6 large-offset-0 columns">
+        <div class="search-result-item row">
+            <div class="memberSR right medium-3 columns text-center">
+                {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]}">
+                {else:}
+                    <p> </p>
+                {end:}
+            </div><!-- /.memberSR -->
+            <div class="search-result-container medium-9 columns">
+                <div class="small-12 columns">
+                    <h3 class="fn org text-left">
+                        <a title="More Info" href="{row[url]:h}">{row[member_name]:h}</a>
+                    </h3>
+                </div>
                 <div class="search-result-map-marker small-1 columns left">
                     {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>
-                <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]}">
-                    {else:}
-                        <p> </p>
-                    {end:}
-                </div><!-- /.memberSR -->
-                <div class="search-result-item-info small-7 columns">
+                </div> <!-- .search-result-map-marker -->
+                <div class="search-result-item-info small-11 columns">
                     <div class="search-result-location adr small-12 columns">
                         <div class="street-address">{row[street]:h}</div>
                         <span class="locality">{row[city]:h}</span>,
@@ -93,7 +94,7 @@ searchMapIconActive="searchMapIconActive"
                             <a title="Member Packages" href="{row[url]:h}#packageSection">Special Offers</a>
                         </div>
                     </div>
-                </div>
+                </div> <!-- .search-result-item-info -->
             </div>
         </div>
     </div>