style: add touch-friendly min-heights, responsive comment form, and mobile layout refinements across CSS

devplacepy/templates/_comment_section.html

@@ -2,7 +2,7 @@
     <h3>Comments</h3>
 
     {% macro render_comment(item, depth=0) %}
-    <div class="comment" style="margin-left: {{ depth * 1.5 }}rem;" data-depth="{{ depth }}">
+    <div class="comment" style="--comment-depth: {{ depth }};" data-depth="{{ depth }}">
         <div class="comment-votes">
             <form method="POST" action="/votes/comment/{{ item.comment['uid'] }}">
                 <input type="hidden" name="value" value="1">
@@ -54,21 +54,5 @@
     <p class="no-comments-msg">No comments yet. Start the discussion.</p>
     {% endfor %}
 
-    {% if user %}
-    <form class="comment-form" method="POST" action="/comments/create">
-        <input type="hidden" name="target_uid" value="{{ target_uid }}">
-        <input type="hidden" name="target_type" value="{{ target_type }}">
-        <a href="/profile/{{ user['username'] }}">
-        <img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
-        </a>
-        <textarea name="content" placeholder="Your opinion goes here..." required maxlength="1000" class="emoji-picker-target" data-mention></textarea>
-        <div class="comment-form-actions">
-            <div class="attachment-upload-container" data-attachment-upload
-                 data-max-size="{{ max_upload_size_mb() }}"
-                 data-max-files="{{ max_attachments_per_resource() }}"
-                 data-allowed-types="{{ allowed_file_types() }}"></div>
-            <button type="submit" class="comment-form-submit"><span class="icon">&#x1F4E4;</span> Post</button>
-        </div>
-    </form>
-    {% endif %}
+    {% set _comment_target_uid = target_uid %}{% set _comment_target_type = target_type %}{% include "_comment_form.html" %}
 </section>