New packaging markup and styles

diff --git a/css/front.css b/css/front.css
new file mode 100644 (file)
index 0000000..dc14a27
--- /dev/null
+++ b/css/front.css
@@ -0,0 +1,80 @@
+/* 
+    Created on : Dec 29, 2015, 4:55:34 PM
+    Author     : laury
+*/
+
+/* Member Packages */
+
+div.member {
+    background: transparent none repeat scroll 0 0;
+    margin: 0 0 20px;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+}
+.member h2 {
+    background: #f5f5f5 none repeat scroll 0 0;
+    border: 1px solid #ccc;
+    color: #73bf45;
+    display: block;
+    font-size: 16px;
+    overflow: hidden;
+    padding: 5px 10px;
+    width: 100%;
+}
+div.member div.address {
+    overflow: hidden;
+    padding: 20px 3%;
+}
+.glm-member-package-container .member > h2,
+.glm-member-package-container .member > h2 a {
+    color: #73bf45;
+    font-weight: normal;
+}
+#content-wrapper .package-info > h3 {
+    clear: left;
+}
+.glm-member-package-container .package-info {
+    background: #f5f5f5 none repeat scroll 0 0;
+    border: 1px solid #ccc;
+    clear: both;
+    display: block;
+    float: left;
+    margin: 0 3% 20px;
+    overflow: hidden;
+    padding: 20px;
+    width: 94%;
+    font-size: 16px;
+}
+@media (max-width: 640px) {
+    .glm-member-package-container .package-info {
+        margin: 0 0 20px;
+        width: 100%;
+        padding: 15px;
+    }
+}
+.glm-member-package-container .package-info h3 {
+    font-weight: normal;
+}
+
+.glm-member-package-container .address > * {
+    line-height: 1.25;
+}
+.glm-member-package-container img {
+    display: block;
+    float: right;
+    min-width: 100px;
+    overflow: hidden;
+    padding: 20px 3%;
+    width: 30%;
+}
+div.member div.address a.email {
+    display: block;
+    float: left;
+    width: auto;
+    color: #73BF45;
+    height: 28px;
+    margin: 0 10px 3px 0;
+    padding: 4px 0 4px 32px;
+    background: url(../assets/email.png) 0 50% no-repeat;
+}
\ No newline at end of file

diff --git a/views/front/packaging/list.html b/views/front/packaging/list.html
index f1213b6..8aa3b9f 100644 (file)
--- a/views/front/packaging/list.html
+++ b/views/front/packaging/list.html
@@ -15,30 +15,31 @@
     {if $byMember && $p.firstForMember}
         <!-- Container for member information if multiple packages are listed under one member. - Only shows before first package for this member -->
         <div class="member">
-            <h2><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$p.member_slug}/">{$p.ref_dest_name}</a></h2>
-          {if $p.logo}
+            {if $p.logo}
             <img src="{$glmPluginMediaURL}/images/small/{$p.logo}">
           {/if}
+            <h2><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$p.member_slug}/">{$p.ref_dest_name}</a></h2>
+          
             <div class="address">
-                <span>{$p.addr1}</span>
+                <div class="addr1">{$p.addr1}</div>
               {if $p.addr2}
-                <span>{$p.addr2}</span>
+                <div class="addr2">{$p.addr2}</div>
               {/if}
-                <span>{$p.city}</span>, {$p.state.name} {$p.zip}</span>
+                <div class="citystatezip">{if $p.city}{$p.city}, {/if}{if $p.state.name}{$p.state.name} {/if}{if $p.zip}{$p.zip}{/if}</div>
               {if $p.country.name}
-                <span>{$p.country.name}</span>
+                <div class="country">{$p.country.name}</div>
               {/if}
               {if $p.toll_free}
-                <span class="phone">{$p.toll_free}</span>
+                <div class="phone">{$p.toll_free}</div>
               {/if}
               {if $p.phone}
-                <span class="phone">{$p.phone}</span>
+                <div class="phone">{$p.phone}</div>
               {/if}
               {if $p.url}
-                <span class="url">{$p.url}</span>
+                <div><a class="url" title="url" href={$p.url}>{$p.url}</a></div>
               {/if}
               {if $p.email}
-                <span class="email">{$p.email}</span>
+                <div><a class="email" title="Email" href={$p.email}>Email</a></div>
               {/if}
             </div>
         </div>
@@ -50,30 +51,30 @@
         {if !$byMember}
             <!-- Container for member information if displayed with each package -->
             <div class="member">
-                <h2><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$p.member_slug}/">{$p.ref_dest_name}</a></h2>
-              {if $p.logo}
+                {if $p.logo}
                 <img src="{$glmPluginMediaURL}/images/small/{$p.logo}">
               {/if}
+                <h2><a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$p.member_slug}/">{$p.ref_dest_name}</a></h2>
                 <div class="address">
-                    <span>{$p.addr1}</span>
+                    <div class="addr1">{$p.addr1}</div>
                   {if $p.addr2}
-                    <span>{$p.addr2}</span>
+                    <div class="addr2">{$p.addr2}</div>
                   {/if}
-                    <span>{$p.city}</span>, {$p.state.name} {$p.zip}</span>
+                    <div class="citystatezip">{if $p.city}{$p.city}, {/if}{if $p.state.name}{$p.state.name} {/if}{if $p.zip}{$p.zip}{/if}</div>
                   {if $p.country.name}
-                    <span>{$p.country.name}</span>
+                    <div class="country">{$p.country.name}</div>
                   {/if}
                   {if $p.toll_free}
-                    <span class="phone">{$p.toll_free}</span>
+                    <div class="phone">{$p.toll_free}</div>
                   {/if}
                   {if $p.phone}
-                    <span class="phone">{$p.phone}</span>
+                    <div class="phone">{$p.phone}</div>
                   {/if}
                   {if $p.url}
-                    <span class="url">{$p.url}</span>
+                  <a class="url" title="url" href={$p.url}>{$p.url}</a>
                   {/if}
                   {if $p.email}
-                    <span class="email">{$p.email}</span>
+                    <a class="email" title="Email" href={$p.email}>Email</a>
                   {/if}
                 </div>
             </div>
@@ -81,14 +82,15 @@
         
             <!-- Container for package information -->
             <div class="package-info">
-                <h3><a href="{$thisURL}?glm_action=detail&packageID={$p.id}">{$p.title}</a></h3>
+                
               {if $p.image}
                 <img src="{$glmPluginMediaURL}/images/small/{$p.image}">
               {/if}
+                <h3><a href="{$thisURL}?glm_action=detail&packageID={$p.id}">{$p.title}</a></h3>
               {if $p.descr}
-                <span class="descr">{$p.descr}</span>
+                {$p.descr}
               {else if $p.short_descr}
-                <span class="descr">{$p.short_descr}</span>
+                {$p.short_descr}
               {/if}
                 <div class="details">
                     <span class="title">Expires: </span><span class="data">{$p.expire_date.date}</span>