changeset 1166:130ac1e98cf4

More V3 forums tweaking. Adding attachments is working now. Adding a post via ajax is working. Still need to display attachments on posts.
author Brian Neal <bgneal@gmail.com>
date Sun, 20 Aug 2017 15:55:54 -0500
parents 3d17714c9a26
children 41f530c80517
files forums/static/js/forums.js forums/views/main.py sg101/templates/forums/topic.html
diffstat 3 files changed, 52 insertions(+), 23 deletions(-) [+]
line wrap: on
line diff
--- a/forums/static/js/forums.js	Tue Apr 18 20:13:59 2017 -0500
+++ b/forums/static/js/forums.js	Sun Aug 20 15:55:54 2017 -0500
@@ -21,13 +21,24 @@
          dataType: 'html',
          success: function (data, textStatus) {
             postText.val('');
-            var lastTr = $('#forum-topic tr:last');
-            var newClass = lastTr.hasClass('odd') ? 'even' : 'odd';
-            lastTr.after(data);
-            lastTr = $('#forum-topic tr:last');
-            lastTr.addClass(newClass);
-            lastTr.hide();
-            lastTr.fadeIn(3000);
+            var lastPost = $('#forum-topic-post-container > div:last-child');
+            var firstCard = lastPost.find('div > div').first();
+            var newCardClass = firstCard.hasClass('sg101-card1') ? 'sg101-card2' : 'sg101-card1';
+            var newDividerClass = newCardClass == 'sg101-card1' ? 'sg101-card-divider1' : 'sg101-card-divider2';
+            lastPost.after(data);
+
+            lastPost = $('#forum-topic-post-container > div:last-child');
+            var firstCard = lastPost.find('> div > div').first();
+            firstCard.addClass(newCardClass);
+            var firstDivider = firstCard.find('> div').first();
+            firstDivider.addClass(newDividerClass);
+            var lastCard = lastPost.find('> div:last-child > div').first();
+            lastCard.addClass(newCardClass);
+            var lastDivider = lastCard.find('> div').first();
+            lastDivider.addClass(newDividerClass);
+
+            lastPost.hide();
+            lastPost.fadeIn(3000);
             postButton.removeAttr('disabled').val('Submit Reply');
             initAttachments();
          },
@@ -179,10 +190,12 @@
       {
          vid = 0;
          var s = '<div id="init-add">' +
-            '<img src="/static/icons/television_add.png" alt="Add" /> ' +
-            '<a href="#">Attach Video</a></div>';
+                     '<button class="button">' +
+                        '<i class="fi-video"></i> Attach Video' +
+                     '</button>' +
+                 '</div>';
          vidDiv.prepend(s);
-         $('#attachment a').click(function () {
+         $('#attachment button').click(function () {
             $('#init-add').remove();
             addVideo();
             return false;
@@ -208,10 +221,21 @@
    {
       var id = "video-" + vid;
 
-      var fakeForm = '<div id="' + id + '">' +
-         '<img src="/static/icons/television_add.png" alt="Attach" class="r" /> ' +
-         '<input type="text" size="45" class="r" /> <button type="button" class="r">Attach</button> ' +
-         '<a href="#" class="r">Remove</a><br /></div>';
+      var fakeForm =
+         '<div id="' + id + '" class="row">' +
+            '<div class="columns r">' +
+               '<div class="input-group">' +
+                  '<span class="input-group-label"><i class="fi-video"></i></span>' +
+                  '<input class="input-group-field" type="text">' +
+                  '<div class="input-group-button">' +
+                     '<button type="button" class="button r">Attach</button>' +
+                  '</div>' +
+               '</div>' +
+            '</div>' +
+            '<div class="small-2 columns r">' +
+               '<a href="#">Remove</a>' +
+            '</div>' +
+         '</div>';
 
       var n = $('#attachment div').length;
 
@@ -229,7 +253,7 @@
       }
       else
       {
-         $('#attachment div:last').after(fakeForm);
+         $('#attachment div.row:last').after(fakeForm);
       }
 
       $('#' + id + ' a').click(function() {
@@ -253,12 +277,13 @@
             success: function (data, textStatus) {
                $('#' + id + " .r").remove();
                var myDiv = $('#' + id);
-               var html = '<span class="link">' +
-                  '<img src="/static/icons/television_delete.png" alt="Remove" /> ' +
-                  '<a href="#">Remove</a></span>' +
-                  '<input type="hidden" name="attachment" value="' + data.id + '" />';
+               var html =
+                  '<div class="columns">' +
+                     data.embed +
+                     '<p><a href="#"><i class="fi-x"></i> Remove ' +
+                        '<i class="fi-arrow-up"></i></a></p>' +
+                  '</div>';
                myDiv.prepend(html);
-               myDiv.prepend(data.embed);
                $('#' + id + ' a').click(function() {
                   myDiv.remove();
                   relabelAttachLink();
--- a/forums/views/main.py	Tue Apr 18 20:13:59 2017 -0500
+++ b/forums/views/main.py	Sun Aug 20 15:55:54 2017 -0500
@@ -341,7 +341,7 @@
         _bump_post_count(request.user)
         _update_last_visit(request.user, form.topic, datetime.datetime.now())
 
-        return render(request, 'forums/display_post.html', {
+        return render(request, 'forums/display_post_v3.html', {
             'post': post,
             'can_moderate': perms.can_moderate(form.topic.forum, request.user),
             'can_reply': True,
--- a/sg101/templates/forums/topic.html	Tue Apr 18 20:13:59 2017 -0500
+++ b/sg101/templates/forums/topic.html	Sun Aug 20 15:55:54 2017 -0500
@@ -31,11 +31,13 @@
 <a class="button" href="{% url 'forums-new_topic' slug=forum.slug %}">New Topic</a>
 {% include 'core/v3/pagination.html' %}
 
+<div id="forum-topic-post-container">
 {% for post in page.object_list %}
    {% cycle 'sg101-card1' 'sg101-card2' as card_class silent %}
    {% cycle 'sg101-card-divider1' 'sg101-card-divider2' as card_divider_class silent %}
    {% include 'forums/display_post_v3.html' %}
 {% endfor %}
+</div>
 
 <div class="more-top-margin">
    {% include 'core/v3/pagination.html' %}
@@ -43,7 +45,8 @@
 
 {% if last_page and can_reply %}
 <a name="forum-reply-form"></a>
-{% show_form "Reply to Topic" form "Submit Reply" 1 %}
+{# show_form "Reply to Topic" form "Submit Reply" 1 #}
+{% include 'forums/new_post_form.html' %}
 {% endif %}
 
 {% if user.is_authenticated %}
@@ -116,8 +119,9 @@
 {% endblock %}
 
 {% block custom_js %}
-   {% script_tags 'jquery-ui' %}
+   {% js_tags 'jquery-ui' %}
    <script src="{% static "js/jquery.form.min.js" %}"></script>
    <script src="{% static "js/forums.js" %}"></script>
+   <script src="{% static "js/v3/post_box.js" %}"></script>
    {% include "forums/jump_box.js" %}
 {% endblock %}