Converted member detail to being foundation aware.

diff --git a/css/front.css b/css/front.css
index bf1f942..0c0d148 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -24,7 +24,6 @@
     padding: .2em;
 }
 .glm-form-text-input {
-    width: 20em;
 }
 .glm-form-text-input-short {
     width: 15em;
@@ -65,6 +64,10 @@
 
 /* Member Detail */
 .glm-member-detail-container {
+    border: 1px #ccc solid;
+    padding: .4em 0px 0px 0px;
+    background: #f8f8f8;
+    margin: .4em 0px .4em 0px;
 }
 .glm-member-detail-image {
     margin-bottom: 1em;

diff --git a/views/front/members/detail.html b/views/front/members/detail.html
index 82af78e..4112a27 100644 (file)
--- a/views/front/members/detail.html
+++ b/views/front/members/detail.html
@@ -7,96 +7,115 @@
     {if $detail_show_map}
         <div id="glm-locationMap-container">
             <div id="glm-locationMap" class="glm-map">(map loads here)</div>
-        </div>     
+        </div>
     {/if}
     {if $detail_show_directions}
         <div id="glm-directionsMap-container" class="glm-hidden">
             <div id="glm-directionsMap" class="glm-map">(directions load here)</div>
             <div id="directions-panel"></div>
         </div>
-        <div id="glm-directions" class="glm-member-entry-container">
-            <div>
-                Enter address to show directions ...<br>
-                <input id="glm-startLocation" type="text" name="startLocation" class="glm-form-text-input" placeholder=""><br>
-                Directions type:
-                <select id="directionsType" name="directionsType">
-                    <option value="DRIVING">Driving</option>
-                    <option value="WALKING">Walking</option>
-                    <option value="BICYCLING">Bicycling</option>
-                    <!-- <option value="TRANSIT">Transit Services</option> - Doesn't seem to work -->
-                </select>
-            </div>     
-            <div>
-                <input type="submit" id="glm-showDirectionsButton" class="button button-secondary glm-button" value="Show Directions">
-                <input type="submit" id="glm-showLocationButton" class="button button-secondary glm-button glm-hidden" value="Show {$term_member_cap} Location">
+        
+        <div class="row">
+            <div id="glm-directions" class="small-12 columns glm-member-entry-container">
+                <div class="row">
+                    <div class="small-12 medium-8 columns">
+                        Enter address to show directions ...
+                        <input id="glm-startLocation" type="text" name="startLocation" class="glm-form-text-input" placeholder=""><br>
+                    </div>
+                    <div class="small-12 medium-4 columns">
+                        Directions type:
+                        <select id="directionsType" name="directionsType">
+                            <option value="DRIVING">Driving</option>
+                            <option value="WALKING">Walking</option>
+                            <option value="BICYCLING">Bicycling</option>
+                            <!-- <option value="TRANSIT">Transit Services</option> - Doesn't seem to work -->
+                        </select>
+                    </div>     
+                </div>
+                <div class="row">
+                    <div>
+                        <input type="submit" id="glm-showDirectionsButton" class="button button-secondary glm-button" value="Show Directions">
+                        <input type="submit" id="glm-showLocationButton" class="button button-secondary glm-button glm-hidden" value="Show {$term_member_cap} Location">
+                    </div>
+                </div>
             </div>
         </div>
     {/if}
     
     <h3>{$term_member_cap} Detail</h3>
     
-       <div class="glm-member-detail-container">
-            {if $detail_show_logo}<div class="glm-member-detail-image"><img src="{$glmPluginMediaURL}/images/{$detail_logo_size}/{$member.logo}"></div>{/if}
-            <div class="glm-member-detail-nameAddress">
-                <h2>
-                  {if $detail_show_detaillink}
-                    <a href="{$thisURL}?glm_action=detail&id={$member.member_pointer}">{$member.member}</a>
-                  {else}
-                    {$member.member}
-                  {/if}
-                </h2>
-              {if $detail_show_address}
-                <p>
-                  {if $detail_show_street}
+    <div class="row">
+        <div class="small-12 columns glm-member-detail-container">
+            <div class="row">
+<!-- Member Logo - Small -->
+    {if $detail_show_logo}
+                <div class="small-12 show-for-small-only columns">
+                    <img CLASS="glm-member-list-image-left" src="{$glmPluginMediaURL}/images/{$detail_logo_size}/{$member.logo}">
+                </div>
+    {/if}
+                <div class="small-12 medium-8 columns">
+<!-- Member name, address, and basic information -->                    
+                    <h2>{$member.member}</h2>
+          {if $detail_show_address}
+              {if $detail_show_street}
                     {if $member.addr1}{$member.addr1}<br>{/if}
                     {if $member.addr2}{$member.addr2}<br>{/if}
-                  {/if}
-                  {if $detail_show_citystatezip}
+              {/if}
+              {if $detail_show_citystatezip}
                     {if $member.city.name}{$member.city.name}{if $member.state.name}, {/if}{/if}{if $member.state.name}{$member.state.name}{/if}{if $member.zip} {$member.zip}{/if}
-                  {/if} 
+              {/if} 
                     {if $member.country.name && $detail_show_country}<br>{$member.country.name}{/if}
                 </p>        
-              {/if} {*list_show_address*}        
+          {/if} {*list_show_address*}        
+                    {if $member.phone && $detail_show_phone}<br><b>Phone:</b> {$member.phone}{/if}
+                    {if $member.toll_free && $detail_show_tollfree}<br><b>Toll Free:</b> {$member.toll_free}{/if}
+                    {if $member.url && $detail_show_url}<br><b>Web site:</b> <a href="{$member.url}">{$member.url}</a>{/if}
+                    {if $member.region.value && $detail_show_region}<br><b>Region:</b> {$member.region.name}{/if}
+                </div>                    
+<!-- Member Logo - Medium and up-->                    
+    {if $detail_show_logo}
+                <div class="medium-4 show-for-medium-up columns"><img class="glm-member-list-image-right" src="{$glmPluginMediaURL}/images/{$list_logo_size}/{$member.logo}"></div>
+    {/if}
             </div>
-            <div class="glm-member-detail-info">
-                <p>
-                    {if $member.phone && $detail_show_phone}<b>Phone:</b> {$member.phone}<br>{/if}
-                    {if $member.toll_free && $detail_show_tollfree}<b>Toll Free:</b> {$member.toll_free}<br>{/if}
-                    {if $member.url && $detail_show_url}<b>Web site:</b> <a href="{$member.url}">{$member.url}</a><br>{/if}
-                    {if $member.region.value && $detail_show_region}<p><b>Region:</b> {$member.region.name}</p>{/if}
-                </p>
-                {if $member.descr && $detail_show_description}<p>{$member.descr}</p>{/if}
-                {if $member.short_descr && $detail_show_short_descr}<p>{$member.short_descr}</p>{/if}
-        {if $member.categories && $detail_show_categories}
-                <div class="glm-member-detail-items">           
-                    <b>{$term_member_cap} Categories</b>
-                    <ul>
-            {foreach $member.categories as $c}
-                        <li>
-                            {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
-                        </li>
-            {/foreach}
-                    </ul>
-                </div>
-        {/if}
-        {if $member.cc_type && $detail_show_creditcards}
-                <div class="glm-member-detail-items">           
-                    <b>Credit Cards Accepted:</b>
-                    <ul>
-            {foreach $member.cc_type.names as $c}
-                        <li>{$c}</li>
-            {/foreach}
-                    </ul>        
-                </div>
-        {/if}
-        {if $detail_show_amenities}
-                <div>
-                    <p>Amenities go here</p>
+
+<!-- Member Description -->                
+            <div class="row">
+                <div class="small-12 columns">
+                    {if $member.descr && $detail_show_description}<p>{$member.descr}</p>{/if}
+                    {if $member.short_descr && $detail_show_short_descr}<p>{$member.short_descr}</p>{/if}
+                    
+            {if $member.categories && $detail_show_categories}
+                    <p>           
+                        <b>{$term_member_cap} Categories</b>
+                        <ul>
+                {foreach $member.categories as $c}
+                            <li>
+                                {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
+                            </li>
+                {/foreach}
+                        </ul>
+                    </p>
+            {/if}
+            {if $member.cc_type && $detail_show_creditcards}
+                    <p>           
+                        <b>Credit Cards Accepted:</b>
+                        <ul>
+                {foreach $member.cc_type.names as $c}
+                            <li>{$c}</li>
+                {/foreach}
+                        </ul>        
+                    </p>
+            {/if}
+            {if $detail_show_amenities}
+                    <p>
+                        <p>Amenities go here</p>
+                    </p>
+            {/if}
                 </div>
-        {/if}
             </div>
         </div>
-
+    </div>
+    
     <script type="text/javascript">
         jQuery(document).ready(function($) {