From 243bb33aafac5c80b4404e5917fe54bfec6fa73f Mon Sep 17 00:00:00 2001 From: =?utf8?q?Fr=C3=A9d=C3=A9ric=20Perrin?= Date: Fri, 4 Nov 2016 18:22:17 +0000 Subject: [PATCH] Use jQuery for some effects --- djsite/settings.py | 2 +- quotes/static/quotes/quotes.js | 30 ++++++++++++++++++---------- quotes/static/quotes/style.css | 13 +++++------- quotes/templates/quotes/base.html | 3 ++- quotes/templates/quotes/display.html | 16 ++++----------- 5 files changed, 31 insertions(+), 33 deletions(-) diff --git a/djsite/settings.py b/djsite/settings.py index 8a7b5a1..de13f1a 100644 --- a/djsite/settings.py +++ b/djsite/settings.py @@ -37,6 +37,7 @@ INSTALLED_APPS = ( 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', + 'jquery', 'tinymce', 'quotes', ) @@ -97,7 +98,6 @@ USE_L10N = True USE_TZ = True - # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.8/howto/static-files/ diff --git a/quotes/static/quotes/quotes.js b/quotes/static/quotes/quotes.js index 4ae5cd9..b83047b 100644 --- a/quotes/static/quotes/quotes.js +++ b/quotes/static/quotes/quotes.js @@ -1,13 +1,21 @@ -function showDetails(id) { - document.getElementById(id).style.height = 'auto'; - // document.getElementById(id).style.visibility = 'visible'; - // document.getElementById(id).style.opacity = '1'; - document.getElementById(id + '_button').style.display = 'none'; -} +function toggleDetails(event) { + var detailsid = event.data + + button = $(detailsid+" .showhide_button") + button.text( + button.text() == "Show details" ? "Hide details" : "Show details" + ); -function hideDetails(id) { - document.getElementById(id).style.maxHeight = '0'; - // document.getElementById(id).style.opacity = '0'; - // document.getElementById(id).style.visibility = 'hidden'; - document.getElementById(id + '_button').style.display = 'block'; + $(detailsid+">.hidden_details").slideToggle(750) + + return false; } + +$( function() { + $(".details").each(function(index, elem) { + var detailsid = "#" + elem.id + $(detailsid+" .showhide_button").click(detailsid, toggleDetails) + $(detailsid+" .showhide_button").text("Show details") + $(detailsid+">.hidden_details").hide(0) + }) +}) diff --git a/quotes/static/quotes/style.css b/quotes/static/quotes/style.css index efd85c9..0d5423b 100644 --- a/quotes/static/quotes/style.css +++ b/quotes/static/quotes/style.css @@ -33,14 +33,11 @@ a:hover { } .hidden_details { - /* displayed through Javascript */ - height: 0; - overflow: hidden; - transition: height 3s linear; - /* visibility: hidden; */ - /* opacity: 0; */ - /* transition: opacity 2s linear; */ - + /* hidden, and then toggled, from Javascript. */ + border: 1px solid transparent; + /* without this invisible border there is a jump at the end of the + animation. */ + padding-top: -1em; } .tag_link { diff --git a/quotes/templates/quotes/base.html b/quotes/templates/quotes/base.html index e994b30..4693c42 100644 --- a/quotes/templates/quotes/base.html +++ b/quotes/templates/quotes/base.html @@ -1,8 +1,9 @@ - + {% load staticfiles %} + {% block title %}{% endblock %} diff --git a/quotes/templates/quotes/display.html b/quotes/templates/quotes/display.html index a9ff5cf..1b774a1 100644 --- a/quotes/templates/quotes/display.html +++ b/quotes/templates/quotes/display.html @@ -3,15 +3,9 @@ {{ quote.text|safe }} -
-

- - Show details

-
-

- Hide details

+
+

+

— {{ tag.tag }}{% if not forloop.last %}, {% endif %} + >{{ tag.tag }}{% if not forloop.last %}, {% endif %} {% endfor %}

{% endif %} -

-- 2.43.0