diff options
| author | Vincent Ambo <tazjin@gmail.com> | 2018-04-15T10·38+0200 |
|---|---|---|
| committer | Vincent Ambo <tazjin@gmail.com> | 2018-04-15T10·38+0200 |
| commit | ee4b690d22050b790d161ea943baf87f6f20a256 (patch) | |
| tree | b1c496474f1899a8fa7c922f64590f6d9080dd0b /templates/thread.html | |
| parent | 9cee48f2dac7400fc0df78b8790ff1e1600a632e (diff) | |
refactor(templates): Restyle thread view using flex layout
Diffstat (limited to 'templates/thread.html')
| -rw-r--r-- | templates/thread.html | 83 |
1 files changed, 35 insertions, 48 deletions
diff --git a/templates/thread.html b/templates/thread.html index 7a2d6ee2ef4b..f11b96b4d7af 100644 --- a/templates/thread.html +++ b/templates/thread.html @@ -21,59 +21,46 @@ </header> <div class="container"> - <div class="row"> - <div class="col-12"> - <div class="list-group"> - <div class="list-group-item flex-column"> - <div class="row"> - <div class="col-12"> - <h3>{{ title }}</h3> - </div> - </div> - </div> + <div class="list-group d-flex flex-column"> + <div class="list-group-item d-flex"> + <h3>{{ title }}</h3> + </div> - {% for post in posts -%} - <div id="post-{{ post.id}}" class="list-group-item flex-column align-items-start"> - <a href="/thread/{{ id }}#post-{{ post.id }}"> - <small class="text-muted float-right">{{ post.posted }}</small> - </a> - <div class="row"> - <div class="col-2 border-right"> - <div class="row"> - <div class="col-12"> - <img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid" /> - </div> - </div> - <div class="row"> - <div class="col-12"> - <strong>{{ post.author_name }}</strong> - </div> - </div> - </div> - <div class="col-10"> - {{ post.body }} - </div> - </div> + {% for post in posts -%} + <div id="post-{{ post.id}}" class="list-group-item d-flex flex-row"> + <div class="d-flex flex-column pr-3 mr-1 border-right"> + <img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid" style="width: 80px;"/> + <strong>{{ post.author_name }}</strong> + </div> + + <div class="align-self-stretch">{{ post.body }}</div> + + <div class="d-inline-flex flex-column align-items-end ml-auto"> + <a href="/thread/{{ id }}#post-{{ post.id }}" class="ml-auto"> + <small class="text-muted float-right">{{ post.posted }}</small> + </a> + + <div class="d-inline-flex flex-row mt-auto ml-auto"> + {%- if post.editable %} + <a href="#edit" class="badge badge-light border m-1 p-1">Edit</a> + {% endif -%} + <a href="#quote" class="badge badge-light border m-1 p-1">Quote</a> </div> - {%- endfor %} + </div> + </div> + {%- endfor %} - <div class="list-group-item flex-column align-items-start"> - <div class="row"> - <div class="col-12"> - <form id="reply-form" action="/thread/reply" method="post"> - <input type="hidden" id="thread_id" name="thread_id" value="{{ id }}"> - <label for="body">You can use <strong>Markdown</strong>!</label> - <div class="input-group"> - <textarea class="form-control" id="body" name="body" aria-label="thread response"></textarea> - <div class="input-group-append"> - <button class="btn btn-outline-primary" type="submit">Post!</button> - </div> - </div> - </form> - </div> + <div class="list-group-item flex-column align-items-start"> + <form id="reply-form" action="/thread/reply" method="post"> + <input type="hidden" id="thread_id" name="thread_id" value="{{ id }}"> + <label for="body">You can use <strong>Markdown</strong>!</label> + <div class="input-group"> + <textarea class="form-control" id="body" name="body" aria-label="thread response" rows="10"></textarea> + <div class="input-group-append"> + <button class="btn btn-primary" type="submit">Post!</button> </div> </div> - </div> + </form> </div> </div> </div> |