]> gitweb.fperrin.net Git - djsite.git/commitdiff
projects / djsite.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7169c93)
Use jQuery for some effects
authorFrédéric Perrin <frederic.perrin@resel.fr>
Fri, 4 Nov 2016 18:22:17 +0000 (18:22 +0000)
committerFrédéric Perrin <frederic.perrin@resel.fr>
Fri, 4 Nov 2016 18:22:17 +0000 (18:22 +0000)
djsite/settings.py patch | blob | history
quotes/static/quotes/quotes.js patch | blob | history
quotes/static/quotes/style.css patch | blob | history
quotes/templates/quotes/base.html patch | blob | history
quotes/templates/quotes/display.html patch | blob | history

diff --git a/djsite/settings.py b/djsite/settings.py
index 8a7b5a17ce6f139909eeaaf0d983b6c4ced04e81..de13f1a9b5e431a222cbc56a4d42407275b99409 100644 (file)
--- 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 4ae5cd99b868773ac4f6d0116f87abcccb3f1f80..b83047b208dcb1c65976fbd8d7502ed78d339db9 100644 (file)
--- 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 efd85c9c2cd5c5fe1bc4f1d8a280ca7bdfdf4b71..0d5423b47bcace28443db046056501e94638a04b 100644 (file)
--- 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 e994b30f4e23fe682113aba0f225fc6fbe0618e2..4693c42d9f22cf05f32af0af99cc847c807e58e2 100644 (file)
--- a/quotes/templates/quotes/base.html
+++ b/quotes/templates/quotes/base.html
@@ -1,8 +1,9 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
   <head>
     {% load staticfiles %}
     <link rel="stylesheet" type="text/css" href="{% static 'quotes/style.css' %}" />
+    <script src="{% static 'js/jquery.js' %}"></script>
     <script src="{% static 'quotes/quotes.js' %}"></script>
     <title>{% block title %}{% endblock %}</title>
   </head>
diff --git a/quotes/templates/quotes/display.html b/quotes/templates/quotes/display.html
index a9ff5cfbf3e5c6bdf78fc57f110654a6c8d24a17..1b774a1463dfd71135f5ed6039fb7acc71742212 100644 (file)
--- a/quotes/templates/quotes/display.html
+++ b/quotes/templates/quotes/display.html
@@ -3,15 +3,9 @@
     {{ quote.text|safe }}
   </div>
 
-  <div class="details">
-    <p id="details_{{ quote.id}}_button">
-      <a href="" class="show_details"
-         onclick="showDetails('details_{{ quote.id }}'); return false;">
-       Show details</a></p>
-    <div class="hidden_details" id="details_{{ quote.id }}">
-      <p><a href="" class="hide_details"
-           onclick="hideDetails('details_{{ quote.id }}'); return false;">
-         Hide details</a></p>
+  <div class="details" id="details_{{ quote.id }}">
+    <p><a href="#" class="showhide_button"></a></p>
+    <div class="hidden_details">
       <p class="author">
        — <span class="name">
          <a href="{{ quote.work.author.get_absolute_url }}"
@@ -36,12 +30,10 @@
        Tags:
        {% for tag in quote.tags.all %}
          <a href="{{ tag.get_absolute_url }}" class="tag_link"
-           >{{ tag.tag }}</a
-           >{% if not forloop.last %}, {% endif %}
+           >{{ tag.tag }}</a>{% if not forloop.last %}, {% endif %}
         {% endfor %}
       </p>
       {% endif %}
-
     </div> <!-- /hidden_details -->
   </div>   <!-- /details -->
   <p class="permalink">
The quotes app