New structure for list and detail pages. New styles, too.

diff --git a/css/front.css b/css/front.css
index 812b829..c1d3886 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -38,7 +38,7 @@
 /* Member List */
 .glm-member-list-container {
     border: 1px #ccc solid;
-    padding: .4em 0px 0px 0px;
+/*    padding: .4em 0px 0px 0px;*/
     background: #f8f8f8;
     margin: .4em 0px .4em 0px;
 }
@@ -47,11 +47,19 @@
     padding: .4em;
     margin: 1em 0px 1em 0px;
 }
-.glm-member-list-image-right {
-    float: right;
+.glm-member-list-image {
+    width: 100%;
+    height: auto;
+    min-width: 300px;
+    min-height: 200px;
 }
-.glm-member-list-image-left {
-    float: left;
+.glm-member-detail-image {
+    max-height: 200px;
+    border-color: lightgrey;
+    border-image: none;
+    border-style: solid solid solid none;
+    border-width: 2px 2px 2px 0;
+    border-top-right-radius: 5px;
 }
 .glm-member-list-nameAddress {
 }
@@ -61,11 +69,25 @@
 .glm-member-list-items {
     margin-top: .5em;
 }
+.glm-member-list-image-wrapper {
+    padding: 0;
+    overflow: hidden;
+}
+.glm-member-list-description  {
+    padding: 20px 20px 20px 0;
+}
+.glm-member-list-active-info h2 a {
+        text-decoration: underline;
+}
+.glm-member-list-active-info {
+    padding: 15px;
+    left: -20px;
+}
 
 /* Member Detail */
 .glm-member-detail-container {
     border: 1px #ccc solid;
-    padding: .4em 0px 0px 0px;
+/*    padding: .4em 0px 0px 0px;*/
     background: #f8f8f8;
     margin: .4em 0px .4em 0px;
 }
@@ -80,7 +102,34 @@
 .glm-member-detail-items {
     margin-top: .5em;
 }
-
+.glm-member-detail-image-wrapper {
+    padding: 0;
+    max-height: 200px;
+    overflow: hidden;
+}
+.glm-member-detail-button {
+    padding: 10px 20px;
+    border-radius: 6px;
+}
+.glm-member-detail-container,
+.glm-member-entry-container,
+.glm-member-list-container {
+    background-image: -moz-linear-gradient(top, #ffffff, #E9F0F7);
+    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #E9F0F7));
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E9F0F7');
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E9F0F7')";
+    margin-bottom: 5px;
+    border-radius: 5px;
+}
+.glm-member-detail-container #glm-locationMap-container {
+    padding: 0;
+}
+#glm-member-detail-amenities-container table {
+    width: 100%;
+}
+#glm-member-detail-amenities-container table tbody tr th {
+    background-color: #c4e2f0;
+}
 /* Alpha Lists */
 .glm-alpha-links {
     clear: both;
@@ -103,7 +152,10 @@
 .glm-map { 
     width: 100%; 
     height:200px; 
-    border: 2px black solid;
+    border-color:  lightgrey;
+    border-image: none;
+    border-style: solid none solid solid;
+    border-width: 2px 0 2px 2px;
     margin: 10px 0 10px 0;
 }
 /* overrride whatever was causing the 100% width for images in Google Maps */

diff --git a/glm-member-db.php b/glm-member-db.php
index 7b0a176..46d4d3e 100644 (file)
--- a/glm-member-db.php
+++ b/glm-member-db.php
@@ -3,7 +3,7 @@
  * Plugin Name: GLM Members Database
  * Plugin URI: http://www.gaslightmedia.com/
  * Description: Gaslight Media Members Database.
- * Version: 1.0.20
+ * Version: 1.0.23
  * Author: Chuck Scott
  * Author URI: http://www.gaslightmedia.com/
  * License: GPL2

diff --git a/views/front/members/detail.html b/views/front/members/detail.html
index f555d5d..cd0bcf8 100644 (file)
--- a/views/front/members/detail.html
+++ b/views/front/members/detail.html
@@ -38,32 +38,18 @@
     {/if}
     
 <!--    <h3>{$term_member_cap} Detail</h3>-->
-    
+    <script>
+    document.write('<a class="button right glm-member-detail-button" href="' + document.referrer + '">Take me back</a>');
+</script>
     <div class="row">
         <div class="small-12 columns glm-member-detail-container">
             <div class="row">
-                    {if $detail_show_map}
-                        <div id="glm-locationMap-container" class="small-12 columns">
-                            <div id="glm-locationMap" class="glm-map">(map loads here)</div>
-                        </div>
-                    {/if}
-            </div>
-<!-- Member Logo - Small -->
-            <div class="row">
-            {if $member.logo && $detail_show_logo}
-                <div class="glm-member-list-image-wrapper small-12 medium-5 columns">
-                    <div class="glm-member-list-image-border">
-                        <img CLASS="glm-member-list-image-left" src="{$glmPluginMediaURL}/images/{$detail_logo_size}/{$member.logo}">
-                    </div>
-                </div>
-                <div class="small-12 medium-7 glm-member-info columns">
-            {else}
-                <div class="small-12 glm-member-info columns">
-            {/if} 
+                <div class="small-12 medium-4 glm-member-detail-info columns">
         <!-- Member name, address, and basic information -->                    
                         <h2>
                       {if $list_show_detaillink}
-                            <a href="{$thisURL}?glm_action=detail&id={$member.member_pointer}">{$member.member}</a>
+<!--                            <a href="{$thisURL}?glm_action=detail&id={$member.member_pointer}">{$member.member}</a>-->
+                        {$member.member}
                       {else}
                             {$member.member}
                       {/if}
@@ -89,23 +75,35 @@
                                 {if $detail_show_coupons && $coupons}<a href="#glm-member-detail-coupons">Coupons</a>{/if}
                                 {if $detail_show_packages && $packages}<a href="#glm-member-detail-packages">Packages</a>{/if}
                         </div>
-                    </div>            
+                    </div>      
+                    {if $detail_show_map}
+                        <div id="glm-locationMap-container" class="small-12 medium-4 columns">
+                            <div id="glm-locationMap" class="glm-map">(map loads here)</div>
+                        </div>
+                    {/if}
+                    {if $detail_show_logo}
+                    <div class="glm-member-detail-image-wrapper small-4 medium-4 columns">
+                            <img class="glm-member-list-image-left" src="http://placehold.it/500x300">
+    <!--                        <img CLASS="glm-member-list-image-left" src="{$glmPluginMediaURL}/images/{$detail_logo_size}/{$member.logo}">-->
+                    </div>
+                    {/if}
             </div>
-
 <!-- Member Description -->                
             <div id="glm-member-detail-descr-row" class="row" data-equalizer>
                 {if ($member.amenities && $detail_show_amenities) || ($member.cc_type && $detail_show_creditcards) || ($member.categories && $detail_show_categories)}
                 <div id="glm-member-detail-amenities-container" class="small-12 medium-4 columns" >
-                    <div class="glm-member-detail-border" data-equalizer-watch>
+                    <div data-equalizer-watch>
                     {if $member.amenities && $detail_show_amenities}
-                                <b>Amenities & Services</b>
-                                <ul>
+                    <table>
+                        <th><b>Amenities & Services</b></th>
                         {foreach $member.amenities as $a}
-                                    <li>
-                                        {$a.name}
-                                    </li>
+                        <tr>
+                            <td>
+                                {$a.name}
+                            </td>
+                        </tr>
                         {/foreach}
-                                </ul>
+                    </table>
 
                     {/if}
                     {if $member.cc_type && $detail_show_creditcards}
@@ -136,7 +134,7 @@
                 {else}
                 <div id="glm-member-detail-description-container" class="small-12 medium-9 medium-centered columns" >
                 {/if}
-                    <div class="glm-member-detail-border"data-equalizer-watch>
+                    <div data-equalizer-watch>
                     {if $member.descr && $detail_show_description}{$member.descr}{/if}
                     {if $member.short_descr && $detail_show_short_descr}{$member.short_descr}{/if}
                     </div>

diff --git a/views/front/members/list.html b/views/front/members/list.html
index a97b9da..47992de 100644 (file)
--- a/views/front/members/list.html
+++ b/views/front/members/list.html
@@ -78,16 +78,16 @@
             <div class="small-12 columns glm-member-list-container">
                 <div class="row">
                 <!-- Member Logo - Medium and up-->  
-                {if $m.logo && $list_show_logo}
-                    <div class="glm-member-list-image-wrapper small-12 medium-3 columns">
+                {if $list_show_logo}
+                    <div class="glm-member-list-image-wrapper small-12 medium-4 columns">
                         <div class="glm-member-list-image-border">
-                            <img class="glm-member-list-image-left" src="{$glmPluginMediaURL}/images/{$list_logo_size}/{$m.logo}">
-<!--                            <img class="glm-member-list-image-left" src="http://placehold.it/500x300">-->
+<!--                           <img class="glm-member-list-image left" src="{$glmPluginMediaURL}/images/{$list_logo_size}/{$m.logo}"> -->
+                            <img class="glm-member-list-image left" src="http://placehold.it/500x300">
                         </div>
                     </div>
-                    <div class="small-12 medium-9 glm-member-info columns">
+                    <div class="small-12 medium-4 glm-member-list-active-info columns">
                 {else}
-                    <div class="small-12 glm-member-info columns">    
+                    <div class="small-12 medium-4 left glm-member-list-active-info columns">    
                 {/if}
 <!-- Member name, address, and basic information -->                    
                         <h2>
@@ -111,17 +111,13 @@
                         {if $m.toll_free && $list_show_tollfree}<div><b>Toll Free:</b> {$m.toll_free}</div>{/if}
                         {if $m.region && $list_show_region}<div><p><b>Region:</b> {$m.region}</div>{/if}
                     
-                        <div class="glm-member-list-links"><br>
+                    <div class="glm-member-list-links"><br>
                                 {if $m.url && $list_show_url}<a href="{$m.url}"{if $list_show_url_newtarget} target="_blank"{/if}>Website</a>{/if}
                                 {if $m.email && $list_show_email}<a href="mailto:{$m.email}">Email</a>{/if}
-                                <a href="{$thisURL}?glm_action=detail&id={$m.member_pointer}">View Profile</a>
+<!--                                <a href="{$thisURL}?glm_action=detail&id={$m.member_pointer}">View Profile</a>-->
                         </div>
-                    </div>
-                </div>
-                <br>
-<!-- Member Description -->                
-                <div class="row">
-                    <div class="test small-12 columns">
+                         </div>
+                <div class="glm-member-list-description small-12 medium-4 left columns">
                         
                 {if $m.short_descr && $list_show_short_descr}
                 {$m.short_descr} <a href="{$thisURL}?glm_action=detail&id={$m.member_pointer}">... View Profile</a>
@@ -165,8 +161,10 @@
                         </p>
                 {/if}
                     </div>
-                </div>
-            </div>
+                        
+                    </div>
+                 </div>
+<!-- Member Description -->   
         </div>