From 44e28c2e44ba6a434d6300230565190f143bae0a Mon Sep 17 00:00:00 2001
From: Alek Ratzloff <alekratz@gmail.com>
Date: Sun, 13 Aug 2023 21:48:38 -0700
Subject: [PATCH] Update post view to show OPs with red bars on the left

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>
---
 chanbans/templates/index.html | 59 ++++++++++++++++++-----------------
 static/style00.css            | 22 +++++++++++++
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/chanbans/templates/index.html b/chanbans/templates/index.html
index 051125b..ff33dae 100644
--- a/chanbans/templates/index.html
+++ b/chanbans/templates/index.html
@@ -41,36 +41,39 @@
         {% for post in posts %}
             <tr class="constructed-post">
                 <td align="left">
-                <div class="post reply {% if post['nsfw'] %}nws{% else %}ws{% endif %}">
-                    <div class="post-info">
-                        <input type="checkbox" disabled>
-                        <span class="board"><a href="?board={{post['board']}}">/{{post['board']}}/</a></span>
-                        <span class="subject">{{post['sub']|safe}}</span>
-                        <span class="name-block">
-                            <span class="name">{{post['name']}}</span>
-                            {% if post['trip'] %}
-                                <span class="poster-trip">{{post['trip']}}</span>
-                            {% endif %}
-                        </span>
-                        <span class="date-time">{{post['now']}}</span>
-                        <span class="post-num">No. XXX</span>
-                    </div>
-                    {% if post['thumb_path'] %}
-                        <div class="file">
-                            <div class="file-info">
-                                <span class="file-text">
-                                    File: {{post['tim']}}{{post['ext']}}
-                                    ({{post['fsize']}}, {{post['w']}}x{{post['h']}}, {{post['filename']}}{{post['ext']}})
+                <div class="post-container">
+                    <div class="post-left{% if post['op'] %}-op{%endif %}"></div>
+                    <div class="post post-right reply{% if post['nsfw'] %} nws{% else %} ws{% endif %}">
+                        <div class="post-info">
+                            <input type="checkbox" disabled>
+                            <span class="board"><a href="?board={{post['board']}}">/{{post['board']}}/</a></span>
+                            <span class="subject">{{post['sub']|safe}}</span>
+                            <span class="name-block">
+                                <span class="name">{{post['name']}}</span>
+                                {% if post['trip'] %}
+                                    <span class="poster-trip">{{post['trip']}}</span>
+                                {% endif %}
+                            </span>
+                            <span class="date-time">{{post['now']}}</span>
+                            <span class="post-num">No. XXX</span>
+                        </div>
+                        {% if post['thumb_path'] %}
+                            <div class="file">
+                                <div class="file-info">
+                                    <span class="file-text">
+                                        File: {{post['tim']}}{{post['ext']}}
+                                        ({{post['fsize']}}, {{post['w']}}x{{post['h']}}, {{post['filename']}}{{post['ext']}})
+                                    </span>
+                                </div>
+                                <span class="file-thumb">
+                                    <img src="{{static_url(post['thumb_path'])}}" data-md5="{{post['md5']}}" loading="lazy">
                                 </span>
                             </div>
-                            <span class="file-thumb">
-                                <img src="{{static_url(post['thumb_path'])}}" data-md5="{{post['md5']}}" loading="lazy">
-                            </span>
-                        </div>
-                    {% endif %}
-                    <blockquote class="post-message">
-                        {{post['com']|safe}}
-                    </blockquote>
+                        {% endif %}
+                        <blockquote class="post-message">
+                            {{post['com']|safe}}
+                        </blockquote>
+                    </div>
                 </div>
                 </td>
                 <td>{{post['action']}}</td>
diff --git a/static/style00.css b/static/style00.css
index dcc4ca9..1c41620 100644
--- a/static/style00.css
+++ b/static/style00.css
@@ -42,6 +42,28 @@ header {
     font-size: large;
 }
 
+.post-container {
+    height: 100%;
+    width: 100%;
+    display: table;
+}
+
+.post-left {
+    display: table-cell;
+    width: 5px;
+}
+
+.post-left-op {
+    display: table-cell;
+    width: 5px;
+    background-color: #f00;
+}
+
+.post-right {
+    display: table-cell;
+    padding-left: 10px;
+}
+
 table {
     border-top: 1px solid black;
     border-left: 1px solid black;