Update to Trail list and Trail detail pages.

diff --git a/Toolkit/Members/css/member.css b/Toolkit/Members/css/member.css
index cdfd6a1..163b7fb 100755 (executable)
--- a/Toolkit/Members/css/member.css
+++ b/Toolkit/Members/css/member.css
@@ -119,6 +119,8 @@
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        padding: 6px 0 0 88px;
+       margin-left: 20px;
+       margin-bottom: 10px;
 }
 #member-detail .list-add-link:hover {
        color: #F7931E;
@@ -176,6 +178,23 @@
 .list-add-link img, .list-view-link img {
        margin-bottom: 10px;
 }
+#member-detail .buy-map-link {
+       display: block;
+       float: right;
+       clear: right;
+       width: 270px;
+       height: 30px;
+       background: #736357 url(../../../assets/buy.png) 88px 6px no-repeat;
+       border-radius: 6px;
+       color: #FFF;
+       font-family: Arial, Helvetica, sans-serif;
+       font-weight: normal;
+       padding: 6px 0 0 110px;
+       margin: 0 0 10px 0;
+}
+#member-detail .buy-map-link:hover {
+       color: #F7931E;
+}
 .search-result-img {
        float: right;
        /*clear: right;*/
@@ -251,6 +270,24 @@ div.search-result-more-div a:active {
        margin-left: 76px;
        display: inline;
        }
+/* Member Tabs */
+#trail_main_btn, #trail_guide_btn, #trail_facilities_btn, #trail_directions_btn, #trail_information_btn {
+       float: left;
+       display: block;
+       padding: 5px 10px;
+       background: #736357;
+       border-radius: 6px 6px 0 0;
+       margin-right: 2px;
+       color: #FFF;
+       font-weight: bold;
+       cursor: pointer;
+}
+#trail_main_btn:hover, #trail_guide_btn:hover, #trail_facilities_btn:hover, #trail_directions_btn:hover, #trail_information_btn:hover {
+       color: #F7931E;
+}
+#trail_main_btn.current {
+       color: #F7931E;
+}
 #member-detail {
        clear: left;
        padding-top: 10px;
@@ -262,16 +299,48 @@ div.search-result-more-div a:active {
        clear: none;
 }
 #top_wrapper {
+       padding: 20px 0;
+       margin: 0;
+       width: 100%;
+       overflow: hidden;
+       /*background: url(../../../assets/bg_2.jpg) 0 0 repeat;
+       border: 1px solid #B0A487;
+       border-radius: 0 8px 8px 8px;
+       -webkit-box-shadow: inset 0 0 10px rgba(176,164,135,.7);
+       -moz-box-shadow: inset 0 0 10px rgba(176,164,135,.7);
+       box-shadow: inset 0 0 10px rgba(176,164,135,.7);*/
+}
+#trail_guide {
        padding: 20px;
        margin: 0;
        width: 100%;
        overflow: hidden;
        background: url(../../../assets/bg_2.jpg) 0 0 repeat;
        border: 1px solid #B0A487;
-       border-radius: 8px;
+       border-radius: 0 8px 8px 8px;
        -webkit-box-shadow: inset 0 0 10px rgba(176,164,135,.7);
        -moz-box-shadow: inset 0 0 10px rgba(176,164,135,.7);
        box-shadow: inset 0 0 10px rgba(176,164,135,.7);
+       display: block;
+}
+#trail_facilities, #trail_directions, #trail_information {
+       padding: 20px;
+       margin: 0;
+       width: 100%;
+       overflow: hidden;
+       background: url(../../../assets/bg_2.jpg) 0 0 repeat;
+       border: 1px solid #B0A487;
+       border-radius: 0 8px 8px 8px;
+       -webkit-box-shadow: inset 0 0 10px rgba(176,164,135,.7);
+       -moz-box-shadow: inset 0 0 10px rgba(176,164,135,.7);
+       box-shadow: inset 0 0 10px rgba(176,164,135,.7);
+       display: none;
+}
+#trail_guide_btn.current, #trail_facilities_btn.current, #trail_directions_btn.current, #trail_information_btn.current {
+       color: #F7931E;
+}
+#trail_desc {
+       clear: left;
 }
 #member-img-1 {
        padding-right:0;
@@ -282,7 +351,7 @@ div.search-result-more-div a:active {
 #business-list-contacts h2 {margin-bottom: 0;}
 #member-detail .vcard {
        float: left;
-       width:  200px;
+       width: 300px;
        }
 #member-detail .member-button {
        float: left;
@@ -298,9 +367,10 @@ div.search-result-more-div a:active {
        }
 #image-box {
        float: right;
+       clear: right;
        width: 270px;
        margin-bottom: 10px;
-       margin-left: 10px;
+       margin-left: 20px;
        }
 #photo-caption {
        text-align: center;
@@ -373,6 +443,40 @@ div.search-result-more-div a:active {
 .member-travel-item h2 {
        clear: right;
        }
+#amenities_box {
+       width: 270px;
+       float: right;
+       clear: right;
+       min-height: 100px;
+       margin-top: 10px;
+       border-radius: 6px;
+       border: 1px solid #B0A487;
+       
+}
+#amenities_box h2 {
+       display: block;
+       color: #FFF;
+       font-size: 14px;
+       font-size: 1.4rem;
+       background: #736357;
+       color: #FFF !important;
+       font-weight: normal;
+       text-align: center;
+       border-radius: 0px;
+       margin: 0;
+}
+#amenities_box h2:first-child {
+       border-radius: 5px 5px 0 0;
+}
+#amenities_box ul {
+       display: block;
+       margin: 0 0 0 10px;
+       padding: 10px 20px;
+       font-size: 14px;
+       font-size: 1.4rem;
+       font-family: Arial, Helvetica, sans-serif;
+       font-weight: normal;
+}
 #search-more {
   height: 1%;
   margin: 10px 10px 10px 10px;
@@ -418,6 +522,7 @@ Restaurant, Hotels and Golf Courses
        margin-top: 1em;
        height: 1%;
        overflow: hidden;
+       padding: 0 20px 5px 20px;
 }
 /* Header Sizes */
 .member-golf-result h2,
@@ -568,7 +673,7 @@ Restaurant, Hotels and Golf Courses
 #member-detail #photo-gallery {
        clear: right;
        margin: 0;
-       border-top: 1px dotted #aaa;
+       /*border-top: 1px dotted #aaa;*/
        padding-top: 1em;
 }
 /* Trip Planner Stuff */
@@ -778,6 +883,9 @@ ul#plannerNav a:hover {
        background: #736357;
        color: #fff;
        padding: 0.1em 0.4em;
+       display: block;
+       float: left;
+       margin-top: 4px;
 }
 .pages a {
        margin-right: 2px;
@@ -785,6 +893,9 @@ ul#plannerNav a:hover {
        padding: 0.1em 0.4em;
        border: 1px solid #736357;
        text-decoration: none;
+       display: block;
+       float: left;
+       margin-top: 4px;
 }
 .pages a:hover, .business-first-letter a:hover {
        border-color: #F60;
@@ -794,6 +905,7 @@ ul#plannerNav a:hover {
        width: 46%;
        min-height: 100px;
        padding-top: 10px;
+       overflow: hidden;
 }
 .business-first-letter > div {
        margin-bottom: 1em;
@@ -804,6 +916,9 @@ ul#plannerNav a:hover {
        padding: 0.1em 0.4em;
        border: 1px solid #736357;
        text-decoration: none;
+       display: block;
+       float: left;
+       margin-top: 4px;
 }
 /* member db category search result, numbered icons */
 .search-result-map-img {

diff --git a/Toolkit/Members/templates/memberDetail.tpl b/Toolkit/Members/templates/memberDetail.tpl
index d655cb3..bf5a545 100644 (file)
--- a/Toolkit/Members/templates/memberDetail.tpl
+++ b/Toolkit/Members/templates/memberDetail.tpl
@@ -6,8 +6,20 @@
     >
 </flexy:toJavascript>
 <div id="member-detail">
+       
        <div id="top_wrapper">
+               
                <div id="image-box" style="height: 1%; overflow: hidden;">
+                       {if:addToLink}
+                       <a id="add-{member_id}" class="list-add-link" rel="{member_id}" flexy:if="plink" href="{plink:h}">
+                               Add to Trip Planner
+                       </a>
+                       {else:}
+                       <a href="{plink:h}" flexy:if="plink" class="list-view-link">
+                               View Trip Planner
+                       </a>
+                       {end:}
+                       <div flexy:if="paypal"><a class="buy-map-link" href="{paypal:h}">Buy Map</a></div>
                        <div flexy:if="logo" id="logo-spot">
                 <a
                     class="thickbox"
@@ -19,6 +31,18 @@
                                         src="{image_path:h}{logo:h}">
                 </a>
                        </div>
+                       <div id="amenities_box">
+                               <h2>Amenities</h2>
+                               <div flexy:if="amenities" class="business-list-amenities" style="clear:both;">
+                                       <ul>
+                                               <li flexy:foreach="amenities,v">{v:h}</li>
+                                       </ul>
+                               </div>
+                               <h2>File Downloads</h2>
+                               <div flexy:if="files" id="member-files">
+                                       <a flexy:foreach="files,k,v" class="file-download pdf external" href="{v[href]:h}">{v[name]:h}</a>
+                               </div>
+                       </div>
                </div>
 
                <div class="vcard">
@@ -76,39 +100,30 @@
                        </div><!-- /#google-div -->
 
                </div><!-- /.vcard -->
-        <div flexy:if="paypal"><a href="{paypal:h}">Buy Map</a></div>
-               {if:addToLink}
-               <a id="add-{member_id}" class="list-add-link" rel="{member_id}" flexy:if="plink" href="{plink:h}">
-                       Add to Trip Planner
-                       <!--<img alt="Add to Your Travel List" class="list-add-link" rel="{member_id}" title="Add to Your Travel List" src="{base_url:h}assets/addto.gif" style="float: right; margin: 10px;clear: right;">
-                       <img id="loading-planner" style="display: none;" src="{glm_base_url:h}gallery/loadingAnimation.gif">-->
-               </a>
-               {else:}
-               <a href="{plink:h}" flexy:if="plink" class="list-view-link">
-                       View Trip Planner
-                       <!--<img alt="View Your Travel List" title="View Your Travel List" src="{base_url:h}assets/viewTravelPlanner.gif" style="float: right; margin: 10px;clear: right;">-->
-               </a>
-               {end:}
+        
+               
+               <div id="trail_desc" flexy:if="description"><h1 style="font-size: 18px;">Trail Description</h1>{description:h}</div>
        </div><!--/#top_wrapper-->
-       <div style="text-align: justify;margin-top: 20px;" flexy:if="description">{description:h}</div>
-       <div style="text-align: justify;" flexy:if="guide">
+       
+       <div id="trail_guide_btn" flexy:if="guide" class="current">Guide</div>
+       <div id="trail_facilities_btn" flexy:if="facilities" class="">Facilities</div>
+       <div id="trail_directions_btn" flexy:if="directions" class="">Directions</div>
+       <div id="trail_information_btn" flexy:if="information" class="">Information</div>
+       
+       <div id="trail_guide" flexy:if="guide">
                <h2>Trail Guide: </h2>{guide:h}
        </div>
-       <div style="text-align: justify;" flexy:if="facilities">
+       <div id="trail_facilities" flexy:if="facilities">
                <h2>Facilities: </h2>{facilities:h}
        </div>
-       <div style="text-align: justify;" flexy:if="directions">
+       <div id="trail_directions" flexy:if="directions">
                <h2>Directions: </h2>{directions:h}
        </div>
-       <div style="text-align: justify;" flexy:if="information">
+       <div id="trail_information" flexy:if="information">
                <h2>Information: </h2>{information:h}
        </div>
 
-       <div flexy:if="amenities" class="business-list-amenities">
-               <ul>
-                       <li flexy:foreach="amenities,v">{v:h}</li>
-               </ul>
-       </div>
+       
 
        <div flexy:if="files" id="member-files">
                <h2>Files Available for Download</h2>

diff --git a/assets/buy.png b/assets/buy.png
new file mode 100755 (executable)
index 0000000..a16ec80
Binary files /dev/null and b/assets/buy.png differ

diff --git a/libjs/pagefunctions.js b/libjs/pagefunctions.js
index bbe4425..82a0bd4 100755 (executable)
--- a/libjs/pagefunctions.js
+++ b/libjs/pagefunctions.js
@@ -1,5 +1,22 @@
 $(document).ready(function() {
        currentNav();
+       
+       // Add Click Handlers for the tab buttons.
+       //$("#trail_main_btn").click(function() {
+       //      trailTabs(this);
+       //});
+       $("#trail_guide_btn").click(function() {
+               trailTabs(this);
+       });
+       $("#trail_facilities_btn").click(function() {
+               trailTabs(this);
+       });
+       $("#trail_directions_btn").click(function() {
+               trailTabs(this);
+       });
+       $("#trail_information_btn").click(function() {
+               trailTabs(this);
+       });
 });
 
 function currentNav() {
@@ -9,4 +26,37 @@ function currentNav() {
                        $(this).parent('li').addClass('parent');
                }
        });
+}
+
+function trailTabs(clickedLink) {
+       //alert(clickedLink.id);
+       
+       // Clear all currents.
+       //$("#trail_main_btn").removeClass('current');
+       $("#trail_guide_btn").removeClass('current');
+       $("#trail_facilities_btn").removeClass('current');
+       $("#trail_directions_btn").removeClass('current');
+       $("#trail_information_btn").removeClass('current');
+       
+       // Hide all tab content.
+       //$("#top_wrapper").css('display', 'none');
+       $("#trail_guide").css('display', 'none');
+       $("#trail_facilities").css('display', 'none');
+       $("#trail_directions").css('display', 'none');
+       $("#trail_information").css('display', 'none');
+       
+       // Set this as current.
+       if(clickedLink.id == "trail_guide_btn") {
+               $("#trail_guide_btn").addClass('current');
+               $("#trail_guide").css('display', 'block');
+       } else if(clickedLink.id == "trail_facilities_btn") {
+               $("#trail_facilities_btn").addClass('current');
+               $("#trail_facilities").css('display', 'block');
+       } else if(clickedLink.id == "trail_directions_btn") {
+               $("#trail_directions_btn").addClass('current');
+               $("#trail_directions").css('display', 'block');
+       } else if(clickedLink.id == "trail_information_btn") {
+               $("#trail_information_btn").addClass('current');
+               $("#trail_information").css('display', 'block');
+       }
 }
\ No newline at end of file