Update member profile page

Update the trail description to be with the other tabs.
adding a script for 'Show more' 'Show less'

diff --git a/Toolkit/Members/css/member.css b/Toolkit/Members/css/member.css
index 201fb06..b6e83e0 100755 (executable)
--- a/Toolkit/Members/css/member.css
+++ b/Toolkit/Members/css/member.css
@@ -272,6 +272,7 @@ div.search-result-more-div a:active {
        }
 /* Member Tabs */
 #trail_main_btn,
+#trail_descr_btn,
 #trail_guide_btn,
 #trail_facilities_btn,
 #trail_directions_btn,
@@ -287,7 +288,17 @@ div.search-result-more-div a:active {
        font-weight: bold;
        cursor: pointer;
 }
+.showLess {
+    height: 150px;
+    overflow: hidden;
+    margin: 0 0 10px;
+}
+.showMore {
+    height: available;
+    overflow: visible;
+}
 #trail_main_btn:hover,
+#trail_descr_btn:hover,
 #trail_guide_btn:hover,
 #trail_facilities_btn:hover,
 #trail_directions_btn:hover,
@@ -320,7 +331,7 @@ div.search-result-more-div a:active {
        -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 {
+#trail_descr {
        padding: 20px;
        margin: 0;
        width: 100%;
@@ -333,6 +344,7 @@ div.search-result-more-div a:active {
        box-shadow: inset 0 0 10px rgba(176,164,135,.7);
        display: block;
 }
+#trail_guide,
 #trail_facilities,
 #trail_directions,
 #trail_hours,
@@ -349,6 +361,7 @@ div.search-result-more-div a:active {
        box-shadow: inset 0 0 10px rgba(176,164,135,.7);
        display: none;
 }
+#trail_descr_btn.current,
 #trail_guide_btn.current,
 #trail_facilities_btn.current,
 #trail_directions_btn.current,
@@ -356,9 +369,6 @@ div.search-result-more-div a:active {
 #trail_information_btn.current {
        color: #F7931E;
 }
-#trail_desc {
-       clear: left;
-}
 #member-img-1 {
        padding-right:0;
        border-radius: 6px;

diff --git a/Toolkit/Members/templates/memberDetail.tpl b/Toolkit/Members/templates/memberDetail.tpl
index 50246d7..aef6b9f 100644 (file)
--- a/Toolkit/Members/templates/memberDetail.tpl
+++ b/Toolkit/Members/templates/memberDetail.tpl
@@ -1,3 +1,17 @@
+<style>
+.show-more {
+    padding: 10px 0;
+    text-align: center;
+}
+.short-text {
+    overflow: hidden;
+    height: 8em;
+}
+
+.full-text{
+    height: auto;
+}
+</style>
 <flexy:toJavascript
        flexy:prefix="glm_"
        base_url="base_url"
@@ -91,13 +105,22 @@
                                <div flexy:if="difficulty"><b>Difficulty:</b> {difficulty:h}</div>
                        </div>
                </div><!-- /.vcard -->
-               <div id="trail_desc" flexy:if="description"><h1 style="font-size: 18px;">Trail Description</h1>{description:h}</div>
        </div><!--/#top_wrapper-->
-       <div id="trail_guide_btn" flexy:if="guide" class="current">Guide</div>
+    <div id="trail_descr_btn" flexy:if="description" class="current">Trail Description</div>
+       <div id="trail_guide_btn" flexy:if="guide" class="">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_hours_btn" flexy:if="hours" class="">Hours &amp; fees</div>
        <div id="trail_information_btn" flexy:if="information" class="">Information</div>
+    <div id="trail_descr" flexy:if="description">
+        <h1 style="font-size: 18px;">Trail Description</h1>
+        <div class="text-content short-text">
+            {description:h}
+        </div>
+        <div class="show-more">
+        <a href="#">Show more</a>
+        </div>
+    </div>
        <div id="trail_guide" flexy:if="guide">
                <h2>Trail Guide: </h2>{guide:h}
        </div>
@@ -127,6 +150,48 @@
 </div>
 <script type="text/javascript">
 $(document).ready(function() {
+    $(".show-more a").each(function() {
+        var $link = $(this);
+        var $content = $link.parent().prev("div.text-content");
+
+        console.log($link);
+
+        var visibleHeight = $content[0].clientHeight;
+        var actualHide = $content[0].scrollHeight - 1;
+
+        console.log(actualHide);
+        console.log(visibleHeight);
+
+        if (actualHide > visibleHeight) {
+            $link.show();
+        } else {
+            $link.hide();
+        }
+    });
+
+    $(".show-more a").on("click", function() {
+        var $link = $(this);
+        var $content = $link.parent().prev("div.text-content");
+        var linkText = $link.text();
+
+        $content.toggleClass("short-text, full-text");
+
+        $link.text(getShowLinkText(linkText));
+
+        return false;
+    });
+
+    function getShowLinkText(currentText) {
+        var newText = '';
+
+        if (currentText.toUpperCase() === "SHOW MORE") {
+            newText = "Show less";
+        } else {
+            newText = "Show more";
+        }
+
+        return newText;
+    }
        $("#member-logo1").fancybox({
                helpers: {
                        title: {

diff --git a/libjs/pagefunctions.js b/libjs/pagefunctions.js
index 2f4756d..12dcf40 100755 (executable)
--- a/libjs/pagefunctions.js
+++ b/libjs/pagefunctions.js
@@ -7,9 +7,9 @@ $(document).ready(function() {
     currentNav();
 
     // Add Click Handlers for the tab buttons.
-    //$("#trail_main_btn").click(function() {
-    // trailTabs(this);
-    //});
+    $("#trail_descr_btn").click(function() {
+       trailTabs(this);
+    });
     $("#trail_guide_btn").click(function() {
         trailTabs(this);
     });
@@ -40,7 +40,7 @@ function trailTabs(clickedLink) {
     //alert(clickedLink.id);
 
     // Clear all currents.
-    //$("#trail_main_btn").removeClass('current');
+    $("#trail_descr_btn").removeClass('current');
     $("#trail_guide_btn").removeClass('current');
     $("#trail_facilities_btn").removeClass('current');
     $("#trail_directions_btn").removeClass('current');
@@ -49,6 +49,7 @@ function trailTabs(clickedLink) {
 
     // Hide all tab content.
     //$("#top_wrapper").css('display', 'none');
+    $("#trail_descr").css('display', 'none');
     $("#trail_guide").css('display', 'none');
     $("#trail_facilities").css('display', 'none');
     $("#trail_directions").css('display', 'none');
@@ -56,7 +57,10 @@ function trailTabs(clickedLink) {
     $("#trail_information").css('display', 'none');
 
     // Set this as current.
-    if (clickedLink.id == "trail_guide_btn") {
+    if (clickedLink.id == "trail_descr_btn") {
+        $("#trail_descr_btn").addClass('current');
+        $("#trail_descr").css('display', 'block');
+    } else if (clickedLink.id == "trail_guide_btn") {
         $("#trail_guide_btn").addClass('current');
         $("#trail_guide").css('display', 'block');
     } else if (clickedLink.id == "trail_facilities_btn") {