From 4e4193d13fea114ac1b2714f9a262a4bc6d79b75 Mon Sep 17 00:00:00 2001 From: Jan Szejko Date: Fri, 20 Apr 2018 16:49:10 +0200 Subject: [PATCH] rework frontend for book abstracts --- .../templates/catalogue/book_short.html | 11 +- .../static/js/contrib/jquery.shorten.js | 104 +++--------------- .../static/scss/main/book_box.scss | 48 ++++++-- 3 files changed, 57 insertions(+), 106 deletions(-) diff --git a/src/catalogue/templates/catalogue/book_short.html b/src/catalogue/templates/catalogue/book_short.html index bf3a4b260..b2a912f1a 100644 --- a/src/catalogue/templates/catalogue/book_short.html +++ b/src/catalogue/templates/catalogue/book_short.html @@ -94,11 +94,6 @@ {% endif %} {% endwith %} - {% if book.abstract %} -
- {{ book.abstract|safe }} -
- {% endif %} {% book_shelf_tags book.pk %} @@ -143,6 +138,12 @@ +
+ {% if book.abstract %} +
+ {{ book.abstract|safe }} +
+ {% 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 f8cede4d2..8a7da1475 100644 --- 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
- 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 += ''; // 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 = $('
').html(bag + '' + config.ellipsesText + '').html(); - }else{ - c+=config.ellipsesText; - } - - var html = '
' + c + - '
' + content + - '
' + config.moreText + ''; - - $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 = '' + config.moreText + ''; + $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 1554b6a84..dd2a77f49 100755 --- 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 -- 2.20.1