[Rt-commit] rt branch, 5.0/reclip_expanded_content, created. rt-5.0.0alpha1-1-g4fc6fdc45c

[Aaron Trevena]

The branch, 5.0/reclip_expanded_content has been created
        at  4fc6fdc45c81c8b23fbc5960ff421a9e2dc48a5d (commit)

- Log -----------------------------------------------------------------
commit 4fc6fdc45c81c8b23fbc5960ff421a9e2dc48a5d
Author: Aaron Trevena <aaron at aarontrevena.co.uk>
Date:   Fri Apr 17 13:07:25 2020 +0100

    Added reciprocal re-clip button to "show less"
    
    The clip/unclip feature and button lacked a re-clip feature, this addresses
    that and adds a button to show less, that's hidden when clipped and exposed
    when unclipped making unclip action reversible.

diff --git a/share/html/Elements/JavascriptConfig b/share/html/Elements/JavascriptConfig
index 548e0bad6b..00e76d734e 100644
--- a/share/html/Elements/JavascriptConfig
+++ b/share/html/Elements/JavascriptConfig
@@ -77,6 +77,7 @@ my $Catalog = {
     lower_disabled => "disabled", # loc
     history_scroll_error => "Could not load ticket history. Reason:", #loc
     unclip => "Show all", #loc
+    clip => "Show less", #loc
 };
 $_ = loc($_) for values %$Catalog;
 
diff --git a/share/static/css/elevator-light/collection.css b/share/static/css/elevator-light/collection.css
index 3f508c5d42..b9609630bf 100644
--- a/share/static/css/elevator-light/collection.css
+++ b/share/static/css/elevator-light/collection.css
@@ -21,7 +21,8 @@
     overflow-y: hidden;
 }
 
-.collection-as-table a.unclip {
+.collection-as-table a.unclip,
+.collection-as-table a.reclip {
     font-size: smaller;
     font-weight: normal;
 }
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 6ee838aa63..789079c493 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -280,17 +280,26 @@ jQuery(function() {
     initDatePicker();
     jQuery('td.collection-as-table:not(.editable)').each( function() {
         if ( jQuery(this).children() ) {
-            var max_height = jQuery(this).css('line-height').replace('px', '') * 5;
+	    var max_height = jQuery(this).css('line-height').replace('px', '') * 5;
             if ( jQuery(this).children().height() > max_height ) {
                 jQuery(this).children().wrapAll('<div class="clip">');
                 jQuery(this).children('div.clip').height('' + max_height + 'px');
                 jQuery(this).append('<a href="#" class="unclip button btn btn-primary">' + loc_key('unclip') + '</a>');
+		jQuery(this).append('<a href="#" class="reclip button btn btn-primary" style="display: none;">' + loc_key('clip') + '</a>');
             }
         }
     });
     jQuery('a.unclip').click(function() {
         jQuery(this).siblings('div.clip').css('height', 'auto');
         jQuery(this).hide();
+	jQuery(this).siblings('a.reclip').show();
+        return false;
+    });
+    jQuery('a.reclip').click(function() {
+	var max_height = jQuery(this).css('line-height').replace('px', '') * 6;
+        jQuery(this).siblings('div.clip').height('' + max_height + 'px');
+        jQuery(this).siblings('a.clip').show();
+        jQuery(this).hide();
         return false;
     });
 });

-----------------------------------------------------------------------