Fockin better comments BRUH, testpage now VC

yadc/assets/css/base-types.scss

@@ -92,6 +92,21 @@ h4 {
         .edit {
             display: none !important;
         }
+
+        // START COMMENT NOJS EDITING
+        &:hover {
+            .jsoff-show.edit {
+                display: initial !important;
+            }
+            .jsoff-show.notedit {
+                display: none !important;
+            }
+        }
+        .jsoff-hide.edit, .jsoff-hide.notedit {
+            display: none !important;
+        }
+        // END COMMENT NOJS EDITING
+
     }
     &.time-to-edit {
         .notedit {
@@ -308,18 +323,17 @@ label {
 
 
 .comment-container {
-    padding: 0 10px;
+    // padding: 0 10px;
     max-width: 500px;
 
     article.comment {
         overflow: hidden;
         // margin-bottom: 1em;
-        margin: .4em 0;
+        margin: .4em .4em;
+        padding: .4em .4em;
 
         p, textarea {
-            // margin-top: .5em;
+            margin: 0;
-            margin-top: 0;
-            // margin-bottom: 1em;
 
             &.deleted {
                 color: red;
@@ -329,11 +343,32 @@ label {
         .comment-head {
             display: flex;
             justify-content: space-between;
+            align-items: baseline;
+
+            h4 {
+                margin: 0;
+                padding: .4em;
+            }
 
             a, label {
                 cursor: pointer;
             }
-            .controls > * { display: inline-block; }
+            .controls { display: flex; }
+
+            .controls label > input {
+                display: none;
+            }
+        }
+        .comment-editform {
+            // THIS IS FUCKED UP
+            p {
+                padding: .5em;
+            }
+            textarea {
+                font-size: inherit;
+                font-family: inherit;
+                border: none;
+            }
         }
     }
 }

yadc/assets/js/formswitchers.js

@@ -56,5 +56,7 @@ function doubleclickSwitcher(rootSelector, triggerSelector, dblSelector) {
     })
 }
 
-toggleSwitcher('section.comments article.comment', '.comment-head .control-edit', '.comment-content')
+toggleSwitcher('article.comment', '.comment-head .control-edit', '.comment-content')
-doubleclickSwitcher('section.management-table tbody > tr', 'label.to-edit, label.to-close', '.notedit')
+doubleclickSwitcher('section.management-table tbody > tr', 'label.to-edit, label.to-close', '.notedit')
+
+document.querySelectorAll('.jsoff-show, .jsoff-hide').forEach(el => el.classList.remove('jsoff-show', 'jsoff-hide'))

yadc/bp/main.py

@@ -41,6 +41,15 @@ def uploaded_big_thumb(*args, **kwargs):
 def uploaded_smol_thumb(*args, **kwargs):
     return uploaded_img(*args, **kwargs, store=IMAGE_STORE.thumb_smol, exten='jpg')
 
+@bp.route('/test')
+def test():
+    from yadc.models import Comment
+    from yadc.forms import CommentForm
+    comment = Comment.query.get(2)
+    comment2 = Comment.query.get(5)
+    comment.editform = CommentForm(id=comment.id, content=comment.content)
+    comment2.editform = CommentForm(id=comment2.id, content=comment2.content)
+    return render_template('test.html', comment=comment, comment2=comment2)
 
 # @bp.route('/threads')
 # def threads():

yadc/static/all.js

@@ -56,8 +56,10 @@ function doubleclickSwitcher(rootSelector, triggerSelector, dblSelector) {
     })
 }
 
-toggleSwitcher('section.comments article.comment', '.comment-head .control-edit', '.comment-content')
+toggleSwitcher('article.comment', '.comment-head .control-edit', '.comment-content')
 doubleclickSwitcher('section.management-table tbody > tr', 'label.to-edit, label.to-close', '.notedit')
+
+document.querySelectorAll('.jsoff-show, .jsoff-hide').forEach(el => el.classList.remove('jsoff-show', 'jsoff-hide'))
 let nav_menu = document.querySelectorAll("#nav-menu, nav#main-nav > ._overlay")
 function nav_menu_event(event) {
     let drop = document.getElementById("main-nav")

yadc/templates/_includes.html

@@ -45,6 +45,46 @@
 </div>
 {% endmacro %}
 
+{% macro render_comment(comment, editform) %}
+<article class="comment editingable">
+    <form action="{{ url_for('post.comment') }}" method="post">
+        {{ editform.csrf_token }}
+        {{ editform.id() }}
+        <div class="comment-head">
+            <h4>{{ comment.user.username or "Deleted account" }}</h4>
+            <span class="controls">
+                {% if current_user.is_moderator %}
+                {% if not comment.deleted %}
+                <a class="control-moderate"><label>ban{{ editform.ban() }}</label></a>
+                {% else %}
+                <a class="control-moderate"><label>unban{{ editform.unban() }}</label></a>
+                {% endif %}
+                {% endif %}
+                {% if comment.is_author %}
+                <a class="jsoff-show edit"><label>delete{{ editform.delete() }}</label></a>
+                <a class="jsoff-show edit"><label>submit{{ editform.edit() }}</label></a>
+                <a class="jsoff-hide notedit control-edit"><label>edit</label></a>
+                <a class="jsoff-hide edit control-edit"><label>cancel</label></a>
+                {% endif %}
+            </span>
+        </div>
+
+        <div class="comment-editform baseform">
+            {% if not comment.deleted or comment.is_author or current_user.is_moderator %}
+            <p class="{%if comment.is_author%}jsoff-show {%endif%}comment-content notedit">{{ comment.content }}</p>
+            {% endif %}
+            {% if comment.is_author %}
+            {{ editform.content(class="jsoff-show edit") }}
+            {% endif %}
+
+            {% if comment.deleted %}
+            <p class="deleted">[Comment banned]</p>
+            {% endif %}
+        </div>
+    </form>
+</article>
+{% endmacro %}
+
 {% macro render_tag_input(input_field, param_dict={}) %}
 <div class="tag-input"{% for key,value in param_dict.items() %} data-{{key}}="{{value}}"{% endfor %}>
     <div class="tag-suggester" data-inputname="{{ input_field.name }}">

yadc/templates/post/post.html

@@ -1,5 +1,5 @@
 {% extends 'layout/base_sidebar_tags.html' %}
-{% from '_includes.html' import render_tag_input %}
+{% from '_includes.html' import render_tag_input, render_comment with context %}
 
 {% block sidebar %}
 <article class="post-desc">
@@ -75,8 +75,7 @@
 <section class="comments">
     <h3>Comments</h3>
     <div class="comment-container">
-        {% for comment in comments %}
+        {#<article class="comment editingable">
-        <article class="comment editingable">
             <form action="{{ url_for('post.comment') }}" method="post">
                 {{ comment.editform.csrf_token }}
                 {{ comment.editform.id() }}
@@ -91,6 +90,7 @@
                         {% endif %}
                         {% endif %}
                         {% if comment.is_author %}
+                        <noscript class="jsoff-hide"></noscript>
                         <a class="notedit control-edit"><label>edit</label></a>
                         <a class="edit control-edit"><label>cancel</label></a>
                         {% endif %}
@@ -106,13 +106,17 @@
                     {% endif %}
 
                     {% if comment.is_author %}
+                    <noscript class="jsoff-show"></noscript>
                     {{ comment.editform.content(class="edit") }}
                     {{ comment.editform.edit(class="edit") }}
                     {{ comment.editform.delete(class="edit") }}
                     {% endif %}
                 </div>
             </form>
-        </article>
+        </article>#}
+
+        {% for comment in comments %}
+        {{ render_comment(comment, comment.editform) }}
         {% endfor %}
 
         {% if not comments %}

yadc/templates/test.html

@@ -0,0 +1,97 @@
+{% extends 'layout/base.html' %}
+{% from '_includes.html' import render_comment with context %}
+
+{% block content %}
+<div class="tag-input">
+    <div class="tag-container tags-inpage">
+        <a class="taginpage" data-tagname="test" href="bruh">
+            <span class="tag-icon">
+                <span class="fa fa-tag"></span>
+            </span>
+            <span class="content">
+                bruuuuuuuuuuuh
+                {#<!-- <span class="name">test</span> -->#}
+            </span>
+            <span class="count">12</span>
+            <span class="tag-right">
+                <!-- <span class="fa fa-plus plus"></span> -->
+                <span class="fa fa-close close"></span>
+            </span>
+        </a>
+
+        <a class="taginpage" data-tagname="test" href="bruh">
+            <span class="tag-icon">
+                <span class="fa fa-tag"></span>
+            </span>
+            <span class="content">
+                bruuuuuuuuuuuh
+                {#<!-- <span class="name">test</span> -->#}
+            </span>
+            <span class="count">12</span>
+            <span class="tag-right">
+                <span class="fa fa-plus plus"></span>
+                <!-- <span class="fa fa-close close"></span> -->
+            </span>
+        </a>
+
+        <a class="taginpage" data-tagname="test" href="bruh">
+            <span class="tag-icon">
+                <span class="fa fa-tag"></span>
+            </span>
+            <span class="content">
+                bruuuuuuuuuuuh
+                {#<!-- <span class="name">test</span> -->#}
+            </span>
+            <!-- <span class="count">12</span> -->
+            <span class="tag-right">
+                <!-- <span class="fa fa-plus plus"></span> -->
+                <span class="fa fa-close close"></span>
+            </span>
+        </a>
+    </div>
+</div>
+
+<div class="comment-container" style="border: 1px solid white;">
+    <article class="comment editingable" style="border: 1px solid red;">
+        <form action="{{ url_for('post.comment') }}" method="post">
+            {{ comment.editform.csrf_token }}
+            {{ comment.editform.id() }}
+            <div class="comment-head">
+                <h4>{{ comment.user.username or "Deleted account" }}</h4>
+                <span class="controls">
+                    {% if current_user.is_moderator %}
+                    {% if not comment.deleted %}
+                    <a class="control-moderate"><label>ban{{ comment.editform.ban() }}</label></a>
+                    {% else %}
+                    <a class="control-moderate"><label>unban{{ comment.editform.unban() }}</label></a>
+                    {% endif %}
+                    {% endif %}
+                    {% if comment.is_author %}
+                    <a class="jsoff-show edit"><label>delete{{ comment.editform.delete() }}</label></a>
+                    <a class="jsoff-show edit"><label>submit{{ comment.editform.edit() }}</label></a>
+
+                    <a class="jsoff-hide notedit control-edit"><label>edit</label></a>
+                    <a class="jsoff-hide edit control-edit"><label>cancel</label></a>
+                    {% endif %}
+                </span>
+            </div>
+
+            <div class="comment-editform baseform">
+                {% if not comment.deleted or comment.is_author or current_user.is_moderator %}
+                <p class="{%if comment.is_author%}jsoff-show {%endif%}comment-content notedit">{{ comment.content }}</p>
+                {% endif %}
+                {% if comment.deleted %}
+                <p class="deleted">[Comment banned]</p>
+                {% endif %}
+
+                {% if comment.is_author %}
+                {{ comment.editform.content(class="jsoff-show edit") }}
+                {% endif %}
+            </div>
+        </form>
+    </article>
+
+    {{ render_comment(comment2, comment2.editform) }}
+</div>
+
+{% endblock %}