From 672e82d06e31704e3df7d1fe0e70b420af5ce944 Mon Sep 17 00:00:00 2001
From: Yanislav Igonin <yanislavdabest@gmail.com>
Date: Mon, 7 Feb 2022 12:27:16 +0200
Subject: [PATCH] Feature - Post design (#11)

* feat: add date and id in post design

* feat: add file styling
---
 static/styles/post.css         |  9 ++++++++-
 templates/components/post.html | 35 ++++++++++++++++++++--------------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/static/styles/post.css b/static/styles/post.css
index 7760cfd..25e8d6f 100644
--- a/static/styles/post.css
+++ b/static/styles/post.css
@@ -1,17 +1,24 @@
 .post-container {
   border: 1px solid rgba(0,0,0,.125);
   border-radius: .25rem;
-  display: flex;
+}
+
+.post-info-container {
+  margin-bottom: 10px;
+  color: #6c757d;
 }
 
 .files-container {
   display: flex;
+  margin-bottom: 10px;
 }
 
 .file-container {
   max-width: 5rem;
+  padding: 2px;
 }
 
 .file {
   width: 100%;
+  border-radius: 5px;
 }
diff --git a/templates/components/post.html b/templates/components/post.html
index 48ba82c..97c386e 100644
--- a/templates/components/post.html
+++ b/templates/components/post.html
@@ -1,20 +1,27 @@
 {{ define "post" }}
   <div class="post-container mb-4">
-    {{ $filesLength := len .Files }}
-    {{ if gt $filesLength 0 }}
-    <div class="files-container">
-      {{ range $File := .Files }}
-      <div class="file-container">
-        <a href="/uploads/{{$.GetThreadID}}/o/{{$File.ID}}.{{$File.Ext}}" target="blank">
-          <img src="/uploads/{{$.GetThreadID}}/t/{{$File.ID}}.{{$File.Ext}}" class="file" alt="Uploaded picture">
-        </a>
-      </div>
-      {{ end }}
-    </div>
-    {{ end }}
-
     <div class="p-2">
-      <p class="card-text line-break text-break">{{.Text}}</p>
+      <div class="post-info-container">
+        <span>{{ .CreatedAt.Format "Jan 02, 2006 15:04:05" }}</span>
+        <span>#{{ .ID }}</span>
+      </div>
+
+      <div class="post-body-container">
+        {{ $filesLength := len .Files }}
+        {{ if gt $filesLength 0 }}
+        <div class="files-container">
+          {{ range $File := .Files }}
+          <div class="file-container">
+            <a href="/uploads/{{$.GetThreadID}}/o/{{$File.ID}}.{{$File.Ext}}" target="blank">
+              <img src="/uploads/{{$.GetThreadID}}/t/{{$File.ID}}.{{$File.Ext}}" class="file" alt="Uploaded picture">
+            </a>
+          </div>
+          {{ end }}
+        </div>
+        {{ end }}
+        
+        <p class="card-text line-break text-break">{{.Text}}</p>
+      </div>
     </div>
   </div>
 {{ end }}
\ No newline at end of file