diff options
| author | Vincent Ambo <tazjin@gmail.com> | 2018-04-09T21·37+0200 |
|---|---|---|
| committer | Vincent Ambo <tazjin@gmail.com> | 2018-04-09T21·37+0200 |
| commit | fb7df7a34680524cd269d12e6b49fa487cef38b3 (patch) | |
| tree | cd53b1ab608f9e5ee44a394d4769016310e06043 /templates/thread.html | |
| parent | 7c73949066cf1b730a2c8c3408fa016048538716 (diff) | |
feat(templates): Slightly less barebones index & thread templates
Diffstat (limited to 'templates/thread.html')
| -rw-r--r-- | templates/thread.html | 97 |
1 files changed, 80 insertions, 17 deletions
diff --git a/templates/thread.html b/templates/thread.html index 83007d6ac1b8..3c93a524834f 100644 --- a/templates/thread.html +++ b/templates/thread.html @@ -1,26 +1,89 @@ -<!DOCTYPE html> -<html> +<!doctype html> +<html lang="en"> <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <!-- Bootstrap CSS --> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Converse: {{ thread.title }}</title> </head> <body> - <h1>{{ thread.title }}</h1> + <header> + <nav class="navbar navbar-light bg-light justify-content-between mb-3"> + <a class="navbar-brand" href="/"> + <h2>Converse</h2> + </a> + <form class="form-inline"> + <a class="btn btn-outline-secondary my-2" href="/">Back to index</a> + </form> + </nav> + </header> - <p>{{ thread.body }}<br><i>Posted at {{ thread.posted }} by {{ thread.author_name }}</i></p> - {% for post in posts -%} - <li>{{ post.body }}<br><i>Posted at {{ post.posted }} by {{ post.author_name }}</i></li> - {%- endfor %} + <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>{{ thread.title }}</h3> + </div> + </div> + </div> + <div class="list-group-item flex-column align-items-start"> + <div class="row"> + <div class="col-2 border-right"> + <div class="row"> + <div class="col-12"> + <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" /> + </div> + </div> + <div class="row"> + <div class="col-12"> + <strong>{{ thread.author_name }}</strong> + </div> + </div> + </div> + <div class="col-10"> + {{ thread.body }} + </div> + <small class="text muted"> {{ thread.posted }} </small> + </div> + </div> - <hr> - <form action="/thread/reply" method="post"> - <input type="hidden" id="thread_id" name="thread_id" value="{{ thread.id }}"> - <div> - <label for="body">Content:</label> - <textarea id="body" name="body"></textarea> + {% for post in posts -%} + <div class="list-group-item flex-column align-items-start"> + <div class="row"> + <div class="col-2 border-right"> + <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" /> + {{ post.author_name }} + </div> + <div class="col-10"> + {{ post.body }} + </div> + <small class="text muted"> {{ post.posted }} </small> + </div> + </div> + {%- endfor %} + <div class="list-group-item flex-column align-items-start"> + <div class="row"> + <div class="col-12"> + <form action="/thread/reply" method="post"> + <input type="hidden" id="thread_id" name="thread_id" value="{{ thread.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> + </div> + </div> + </div> </div> - <div> - <input type="submit" value="Reply"> - </div> - </form> + </div> </body> </html> |