rework frontend for book abstracts

diff --git a/src/catalogue/templates/catalogue/book_short.html b/src/catalogue/templates/catalogue/book_short.html
index bf3a4b2..b2a912f 100644 (file)
--- a/src/catalogue/templates/catalogue/book_short.html
+++ b/src/catalogue/templates/catalogue/book_short.html
@@ -94,11 +94,6 @@
           {% endif %}
           {% endwith %}
         </div>
-        {% if book.abstract %}
-          <div class="abstract more">
-            {{ book.abstract|safe }}
-          </div>
-        {% endif %}
       </div>
       {% book_shelf_tags book.pk %}
 
@@ -143,6 +138,12 @@
           </div>
         </li>
       </ul>
+      <div class="clearboth"></div>
+      {% if book.abstract %}
+        <div class="abstract more">
+          {{ book.abstract|safe }}
+        </div>
+      {% endif %}
       {% block book-box-extra-info %}{% endblock %}
       {% block box-append %}
       {% endblock %}

diff --git a/src/wolnelektury/static/js/contrib/jquery.shorten.js b/src/wolnelektury/static/js/contrib/jquery.shorten.js
index f8cede4..8a7da14 100644 (file)
--- a/src/wolnelektury/static/js/contrib/jquery.shorten.js
+++ b/src/wolnelektury/static/js/contrib/jquery.shorten.js
@@ -16,6 +16,11 @@
 ** I've also added brackets where they weren't added just for readability (mostly for me).
 */
 
+/*
+** largely modified by Jan Szejko
+** Now it doesn't shorten the text, just changes adds a class and lets CSS do the rest
+ */
+
 (function($) {
     $.fn.shorten = function(settings) {
         "use strict";
@@ -23,7 +28,6 @@
         var config = {
             showChars: 100,
             minHideChars: 10,
-            ellipsesText: "...",
             moreText: "more",
             lessText: "less",
             onLess: function() {},
@@ -46,19 +50,15 @@
         $(document).on({
             click: function() {
 
-                var $this = $(this);
-                if ($this.hasClass('less')) {
-                    $this.removeClass('less');
-                    $this.html(config.moreText);
-                    $this.parent().prev().hide();
-                    $this.parent().prev().prev().show();
-                    config.onLess();
-                } else {
-                    $this.addClass('less');
+                var $this = $(this), $main = $this.prev();
+                if ($main.hasClass('short')) {
+                    $main.removeClass('short');
                     $this.html(config.lessText);
-                    $this.parent().prev().show();
-                    $this.parent().prev().prev().hide();
                     config.onMore();
+                } else {
+                    $main.addClass('short');
+                    $this.html(config.moreText);
+                    config.onLess();
                 }
                 return false;
             }
@@ -66,83 +66,9 @@
 
         return this.each(function() {
             var $this = $(this);
-
-            var content = $this.html();
-            var contentlen = $this.text().length;
-            if (contentlen > config.showChars + config.minHideChars) {
-                var c = content.substr(0, config.showChars);
-                if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
-                {
-                    var inTag = false; // I'm in a tag?
-                    var bag = ''; // Put the characters to be shown here
-                    var countChars = 0; // Current bag size
-                    var openTags = []; // Stack for opened tags, so I can close them later
-                    var tagName = null;
-
-                    for (var i = 0, r = 0; r <= config.showChars; i++) {
-                        if (content[i] == '<' && !inTag) {
-                            inTag = true;
-
-                            // This could be "tag" or "/tag"
-                            tagName = content.substring(i + 1, content.indexOf('>', i));
-
-                            // If its a closing tag
-                            if (tagName[0] == '/') {
-
-
-                                if (tagName != '/' + openTags[0]) {
-                                    config.errMsg = 'ERROR en HTML: the top of the stack should be the tag that closes';
-                                } else {
-                                    openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
-                                }
-
-                            } else {
-                                // There are some nasty tags that don't have a close tag like <br/>
-                                if (tagName.toLowerCase() != 'br') {
-                                    openTags.unshift(tagName); // Add to start the name of the tag that opens
-                                }
-                            }
-                        }
-                        if (inTag && content[i] == '>') {
-                            inTag = false;
-                        }
-
-                        if (inTag) { bag += content.charAt(i); } // Add tag name chars to the result
-                        else {
-                            r++;
-                            if (countChars <= config.showChars) {
-                                bag += content.charAt(i); // Fix to ie 7 not allowing you to reference string characters using the []
-                                countChars++;
-                            } else // Now I have the characters needed
-                            {
-                                if (openTags.length > 0) // I have unclosed tags
-                                {
-                                    //console.log('They were open tags');
-                                    //console.log(openTags);
-                                    for (j = 0; j < openTags.length; j++) {
-                                        //console.log('Cierro tag ' + openTags[j]);
-                                        bag += '</' + openTags[j] + '>'; // Close all tags that were opened
-
-                                        // You could shift the tag from the stack to check if you end with an empty stack, that means you have closed all open tags
-                                    }
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    c = $('<div/>').html(bag + '<span class="ellip">' + config.ellipsesText + '</span>').html();
-                }else{
-                    c+=config.ellipsesText;
-                }
-
-                var html = '<div class="shortcontent">' + c +
-                    '</div><div class="allcontent">' + content +
-                    '</div><span><a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
-
-                $this.html(html);
-                $this.find(".allcontent").hide(); // Hide all text
-                $('.shortcontent p:last', $this).css('margin-bottom', 0); //Remove bottom margin on last paragraph as it's likely shortened
-            }
+            var button = '<a href="javascript:void(0)" class="morelink">' + config.moreText + '</a></span>';
+            $this.addClass('short');
+            $this.after(button);
         });
 
     };

diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss
index 1554b6a..dd2a77f 100755 (executable)
--- a/src/wolnelektury/static/scss/main/book_box.scss
+++ b/src/wolnelektury/static/scss/main/book_box.scss
@@ -373,18 +373,6 @@
     }
   }
 
-  .abstract {
-    @include size(font-size, 16px);
-    line-height: 1.2em;
-    @include size(margin-bottom, 18px);
-    @include size(margin-top, 18px);
-
-    p.paragraph {
-      @include size(margin-bottom, 9px);
-      @include size(margin-top, 9px);
-    }
-  }
-
 }
 
 .book-box-tools {
@@ -528,3 +516,39 @@
     }
   }
 }
+
+.abstract {
+  @include size(font-size, 16px);
+  line-height: 1.2em;
+  @include size(margin-bottom, 8px);
+  @include size(margin-top, 18px);
+  overflow: hidden;
+  position: relative;
+
+  p.paragraph {
+    margin-bottom: 0;
+    margin-top: 1.2em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  &.short {
+    height: 3.6em;
+    &:after {
+       content:' ';
+       position:absolute;
+       bottom:0;
+       width:25%;
+       height:20px;
+       background-color:transparent;
+       /* assume ltr */
+       right:0;
+       background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
+       background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
+       background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
+       background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%)
+    }
+  }
+}
\ No newline at end of file