Image responsiveness, detail page like the list.

diff --git a/css/front.css b/css/front.css
index e84f1a3..f1ba96a 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -68,7 +68,15 @@ div.member div.address {
     font-weight: normal;
     font-size: 18px;
 }
-
+.glm-package-detail-image-wrapper img {
+    float: right;
+}
+@media (max-width: 640px) {
+    .glm-package-detail-image-wrapper img {
+        float: none;
+        margin: 0 auto;
+    }
+}
 .glm-member-package-container .address > * {
     line-height: 1.25;
 }

diff --git a/views/front/packaging/detail.html b/views/front/packaging/detail.html
index 9219f1b..fa47dac 100644 (file)
--- a/views/front/packaging/detail.html
+++ b/views/front/packaging/detail.html
@@ -5,55 +5,62 @@
     These may be modified or added to by entries in the glm-member-db/config/plugin.ini file
 -->
 
-<!-- Package Detail Container -->
+<!-- Package Detail Container -->    
 <div class="glm-member-package-detail-container">
     
 {if $havePackage}
-
+    <div class="glm-member-package-container">
     <!-- Container for member information -->
-    <div class="member">
-        <h2><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$package.member_slug}/">{$package.member.member.ref_dest_name}</a></h2>
-      {if $package.member.logo}
-        <img src="{$glmPluginMediaURL}/images/small/{$package.member.logo}">
-      {/if}
-        <div class="address">
-            <span>{$package.member.addr1}</span>
-          {if $package.member.addr2}
-            <span>{$package.member.addr2}</span>
-          {/if}
-            <span>{$package.member.city}</span>, {$package.member.state.name} {$package.member.zip}</span>
-          {if $package.member.country.name}
-            <span>{$package.member.country.name}</span>
-          {/if}
-          {if $package.member.toll_free}
-            <span class="phone">{$package.member.toll_free}</span>
-          {/if}
-          {if $package.member.phone}
-            <span class="phone">{$package.member.phone}</span>
-          {/if}
-          {if $package.member.url}
-            <span class="url">{$package.member.url}</span>
-          {/if}
-          {if $package.member.email}
-            <span class="email">{$package.member.email}</span>
+        <div class="member">
+            {if $package.member.logo}
+           <div class="glm-member-img-wrap"> 
+            <img src="{$glmPluginMediaURL}/images/medium/{$package.member.logo}">
+           </div> 
           {/if}
+            <h2 class="member-title"><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$package.member.member_slug}/">{$package.member.member_name}</a></h2>
+            <div class="address">
+                <div class="addr1">{$package.member.addr1}</div>
+              {if $package.member.addr2}
+                <div class="addr2">{$package.member.addr2}</div>
+              {/if}
+                <div class="citystatezip">{if $package.member.city}{$package.member.city}, {/if}{if $package.member.state.name}{$package.member.state.name} {/if}{if $package.member.zip}{$package.member.zip}{/if}</div>
+              {if $package.member.country.name}
+                <div class="country">{$package.member.country.name}</div>
+              {/if}
+              {if $package.member.toll_free}
+                <div class="phone">{$package.member.toll_free}</div>
+              {/if}
+              {if $package.member.phone}
+                <div class="phone">{$package.member.phone}</div>
+              {/if}
+              {if $package.member.url}
+                <div><a class="url" title="url" href={$package.member.url}>{$package.member.url}</a></div>
+              {/if}
+              {if $package.member.email}
+                <div><a class="email" title="Email" href="mailto:{$package.member.email}">{$package.member.email}</a></div>
+              {/if}
+            </div>
         </div>
-    </div>
-        
-    <!-- Container for package information -->
-    <div class="package-info">
-        <h3><a href="{$thisURL}?glm_action=detail&packageID={$package.id}">{$package.title}</a></h3>
-      {if $package.image}
-        <img src="{$glmPluginMediaURL}/images/small/{$package.image}">
-      {/if}
-      {if $package.descr}
-        <span class="descr">{$package.descr}</span>
-      {else if $package.short_descr}
-        <span class="descr">{$package.short_descr}</span>
-      {/if}
-        <div class="details">
-            <span class="title">Expires: </span><span class="data">{$package.expire_date.date}</span>
-            <span class="title">Pricing: </span><span class="data">{$package.pricing}</span>
+                    <!-- Container for package information -->
+        <div class="package">
+            <div class="package-info">
+
+              {if $package.image}
+               <div class="glm-member-img-wrap">
+                <img src="{$glmPluginMediaURL}/images/medium/{$package.image}">
+               </div>
+              {/if}
+                <h3 class="package-title"><a href="{$thisURL}?glm_action=detail&packageID={$package.id}">{$package.title}</a></h3>
+              {if $package.descr}
+                {$package.descr}
+              {else if $package.short_descr}
+                {$package.short_descr}
+              {/if}
+                <div class="details">
+                    <div><span class="title">Expires: </span><span class="data">{$package.expire_date.date}</span></div>
+                    <div><span class="title">Pricing: </span><span class="data">{$package.pricing}</span></div>
+                </div>
+            </div>
         </div>
     </div>
         
@@ -63,4 +70,4 @@
 
 </div> <!-- /package detail container -->
 
-{include file='front/footer.html'}
\ No newline at end of file
+{include file='front/footer.html'}

diff --git a/views/front/packaging/list.html b/views/front/packaging/list.html
index 35d6727..f05288a 100644 (file)
--- a/views/front/packaging/list.html
+++ b/views/front/packaging/list.html
@@ -75,8 +75,8 @@
             </div>
         {/foreach} <!-- /package -->
         
-        </div> <!-- /member -->
-      {/foreach}
+        </div> 
+      {/foreach} <!-- /member -->
   
   <!-- If packages are listed by package, use this block -->
   {else}