Feature - Post design (#11)

* feat: add date and id in post design

* feat: add file styling
This commit is contained in:
Yanislav Igonin 2022-02-07 12:27:16 +02:00 committed by GitHub
parent a02884e6b5
commit 672e82d06e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 15 deletions

View File

@ -1,17 +1,24 @@
.post-container { .post-container {
border: 1px solid rgba(0,0,0,.125); border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem; border-radius: .25rem;
display: flex; }
.post-info-container {
margin-bottom: 10px;
color: #6c757d;
} }
.files-container { .files-container {
display: flex; display: flex;
margin-bottom: 10px;
} }
.file-container { .file-container {
max-width: 5rem; max-width: 5rem;
padding: 2px;
} }
.file { .file {
width: 100%; width: 100%;
border-radius: 5px;
} }

View File

@ -1,20 +1,27 @@
{{ define "post" }} {{ define "post" }}
<div class="post-container mb-4"> <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"> <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>
</div> </div>
{{ end }} {{ end }}