LP#1424815: Changing CSS approach for Read More feature user/kmlussier/LP1424815_long_fields_accordion
authorKathy Lussier <klussier@masslnc.org>
Fri, 2 Jun 2017 13:31:42 +0000 (09:31 -0400)
committerKathy Lussier <klussier@masslnc.org>
Thu, 31 Aug 2017 02:24:59 +0000 (22:24 -0400)
Changes the CSS approach for implementing the Read More feature to something
that is a little simpler.

Util.pm is also updated so that split_for_accordion returns the full string,
in addition to the two pieces of the string, since the new CSS approach
requires it.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Conflicts:
Open-ILS/src/templates/opac/css/style.css.tt2

Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader/Util.pm
Open-ILS/src/templates/opac/css/style.css.tt2
Open-ILS/src/templates/opac/parts/record/contents.tt2

index 95ae2fd..99273bf 100644 (file)
@@ -234,7 +234,7 @@ sub init_ro_object_cache {
             $rest = substr $string, $loc;
         }
 
-        return ($short, $rest);
+        return ($short, $rest, $string);
     };
 
 
index 17b9af7..0fbf78d 100644 (file)
@@ -1907,6 +1907,24 @@ a.opac-button-header:hover, #dash_wrapper a.opac-button:hover {
 .rdetail_content_type, .rdetail_subject_type {
     vertical-align: top;
     font-weight: bold;
+    white-space: nowrap;
+    [% IF rtl == 't' -%]
+    padding-left: .5em;
+    [% ELSE -%]
+    padding-right:.5em;
+    [% END -%]
+}
+
+#cont_long {
+    display: none;
+}
+
+#generalnote:target #cont_long, #bibnote:target #cont_long, #contentsnote:target #cont_long, #summarynote:target #cont_long  {
+    display: inline-block;
+}
+
+#generalnote:target #cont_short, #bibnote:target #cont_short, #contentsnote:target #cont_short, #summarynote:target #cont_short {
+    display:none;
 }
 
 .bookbag-item-row td { vertical-align: top; }
@@ -2923,6 +2941,9 @@ a.preflib_change {
     h2.rdetail_uris {
         clear: both;
     }
+    .rdetail_content_type, .rdetail_subject_type {
+        white-space: normal;
+    }
     #metarecord_population {
         overflow: hidden;
         width: 100%;
@@ -3250,92 +3271,4 @@ label[for*=expert_]
 }
 [id^="toggled-inline-"]:target{
     display: inline;
-ul {
-  list-style: none;
-  perspective: 900;
-  padding: 0;
-  margin: 0;
-}
-ul li {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  padding-bottom: 4px;
-  padding-top: 18px;
-  border-top: 1px dotted #dce7eb;
-}
-ul li:nth-of-type(1) {
-  animation-delay: 0.5s;
-}
-ul li:nth-of-type(2) {
-  animation-delay: 0.75s;
-}
-ul li:nth-of-type(3) {
-  animation-delay: 1s;
-}
-ul li:last-of-type {
-  padding-bottom: 0;
-}
-ul li i {
-  position: absolute;
-  transform: translate(-6px, 0);
-  margin-top: 16px;
-  right: 0;
-}
-ul li i:before, ul li i:after {
-  content: "";
-  position: absolute;
-  background-color: #ff6873;
-  width: 3px;
-  height: 9px;
-}
-ul li i:before {
-  transform: translate(-2px, 0) rotate(45deg);
-}
-ul li i:after {
-  transform: translate(2px, 0) rotate(-45deg);
-}
-ul li input[type=checkbox] {
-  position: absolute;
-  cursor: pointer;
-  width: 10%;
-  height: 100%;
-  z-index: 1;
-  opacity: 0;
-}
-ul li input[type=checkbox]:checked ~ p {
-  margin-top: 0;
-  max-height: 0;
-  opacity: 0;
-  transform: translate(0, 50%);
-}
-ul li input[type=checkbox]:checked ~ i:before {
-  transform: translate(2px, 0) rotate(45deg);
-}
-ul li input[type=checkbox]:checked ~ i:after {
-  transform: translate(-2px, 0) rotate(-45deg);
-}
-
-@keyframes flipdown {
-  0% {
-    opacity: 0;
-    transform-origin: top center;
-    transform: rotateX(-90deg);
-  }
-  5% {
-    opacity: 1;
-  }
-  80% {
-    transform: rotateX(8deg);
-  }
-  83% {
-    transform: rotateX(6deg);
-  }
-  92% {
-    transform: rotateX(-3deg);
-  }
-  100% {
-    transform-origin: top center;
-    transform: rotateX(0deg);
-  }
 }
index ca85773..9e80014 100644 (file)
@@ -2,8 +2,9 @@
 contents =  [
     {
         label => l('General Note: '),
-trunc_length => 20,
-        xpath => '//*[@tag="500"]'
+        trunc_length => 50,
+        noteid => l('generalnote'),
+        xpath => '//*[@tag="500"]',
     }, {
         label => l('With Note: '),
         xpath => '//*[@tag="501"]'
@@ -12,10 +13,13 @@ trunc_length => 20,
         xpath => '//*[@tag="502"]'
     }, {
         label => l('Bibliography, etc. Note: '),
-trunc_length => 25,
+        trunc_length => 50,
+        noteid => l('bibnote'),
         xpath => '//*[@tag="504"]'
     }, {
         label => l('Formatted Contents Note: '),
+        trunc_length => 50,
+        noteid => l('contentsnote')
         xpath => '//*[@tag="505"]'
     }, {
         label => l('Restrictions on Access Note: '),
@@ -49,6 +53,8 @@ trunc_length => 25,
         xpath => '//*[@tag="518"]'
     }, {
         label => l('Summary, etc.: '),
+        trunc_length => 50,
+        noteid => 'summarynote',
         xpath => '//*[@tag="520"]'
     }, {
         label => l('Target Audience Note: '),
@@ -174,11 +180,11 @@ BLOCK render_contents;
         total_contents = all_content.join(" ").replace('\s+$', '');
         %] [% total_contents;
         IF total_contents.size;
-            IF total_contents.length > cont.trunc_length; # should be ok on undefined... I think.  Just skips it.
+            IF total_contents.length > cont.trunc_length; # TODO need to account for undefined.
               # need to chop!
               blah = ctx.split_for_accordion(total_contents, cont.trunc_length);
               cont.short = blah.0;
-              cont.long  = blah.1;
+              cont.long  = blah.2;
             END;
             '<br/>';
         END;
@@ -199,11 +205,10 @@ END
     <td class='rdetail_content_type'>[% cont.label %]</td>
     <td class='rdetail_content_value' property='keywords'>
 [% IF cont.short.length %]
-<ul>
-<li>
-    [% cont.short %]... <input type="checkbox" checked>[% l('(click for more)') %] <p>[% cont.long%]</p>
-</li>
-</ul>
+  <div id='[% cont.noteid %]'>
+   <span id='cont_short'>[% cont.short %]...<a href="#[% cont.noteid %]">[% l('(Read more)') %]</a></span>
+   <span id='cont_long' %]'>[% cont.long %] <a href="#rdetail_content_table">[% l('(Read less)') %]</a></span>
+  </div>
 [% ELSE %]
     [% content %]
 [% END; %]
@@ -217,9 +222,9 @@ END
     IF content_html.length > 0;
 %]
 <h2 class='rdetail_contents'>[% l('Content descriptions') %]</h2>
-<table class='rdetail_content'>
+<table id='rdetail_content_table' class='rdetail_content'>
     <tbody>
 [%- content_html %]
     </tbody>
 </table>
-[%- END %]
\ No newline at end of file
+[%- END %]