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 | |
| parent | 7c73949066cf1b730a2c8c3408fa016048538716 (diff) | |
feat(templates): Slightly less barebones index & thread templates
| -rw-r--r-- | templates/index.html | 57 | ||||
| -rw-r--r-- | templates/thread.html | 97 |
2 files changed, 115 insertions, 39 deletions
diff --git a/templates/index.html b/templates/index.html index fe35eb7bc03d..5fc0d9a77c52 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,28 +1,41 @@ -<!DOCTYPE html> -<html> +<!doctype html> +<html lang="en"> <head> - <title>Converse Index page</title> + <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 Index</title> </head> <body> - <h1>Welcome to Converse</h1> - <ul> - {% for thread in threads -%} - <li><a href="/thread/{{ thread.id }}">{{ thread.title }}</a> (posted at {{ thread.posted }} by {{ thread.author_name }})</li> - {%- endfor %} - </ul> - <hr> - <form action="/thread/submit" method="post"> - <div> - <label for="title">Title:</label> - <input type="text" id="title" name="title"> + <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"> + <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" disabled> + <button class="btn btn-outline-success my-2 my-sm-0 mr-1" type="submit" disabled>Search</button> + <a class="btn btn-outline-secondary my-2" href="/thread/new">New thread</a> + </form> + </nav> + </header> + <div class="container"> + <div class="row"> + <div class="col-12"> + <div class="list-group"> + {% for thread in threads -%} + <a href="/thread/{{ thread.id }}" class="list-group-item list-group-item-action flex-column align-items-start"> + <div class="d-flex w-100 justify-content-between"> + <h5 class="mb-1">{{ thread.title }}</h5> + <small class="text-muted">{{ thread.posted }}</small> + </div> + <p class="mb-1">Created by {{ thread.author_name }}</p> + </a> + {%- endfor %} + </div> + </div> </div> - <div> - <label for="body">Content:</label> - <textarea id="body" name="body"></textarea> - </div> - <div> - <input type="submit" value="Submit"> - </div> - </form> + </div> </body> </html> 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> |