diff options
| author | Vincent Ambo <tazjin@gmail.com> | 2018-04-15T19·13+0200 |
|---|---|---|
| committer | Vincent Ambo <tazjin@gmail.com> | 2018-04-15T19·13+0200 |
| commit | ec712cc4c0e12329f51d10d9bd626d1859a011b8 (patch) | |
| tree | e5b51d31c4bfb66eaca5c29e9d796b1a7599dee5 /templates/post.html | |
| parent | 4c0e6552e80e70de55fa0ab4310dfec0078b18b9 (diff) | |
refactor(templates/render): Add generic post editing template
Adds a generic template that can be used for submitting, responding to and editing posts.
Diffstat (limited to 'templates/post.html')
| -rw-r--r-- | templates/post.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/templates/post.html b/templates/post.html new file mode 100644 index 000000000000..74cf03abf307 --- /dev/null +++ b/templates/post.html @@ -0,0 +1,103 @@ +<!-- {# + This template is shared by the new thread, reply and post-editing pages. + + The main display differences between the different editing styles are the + headline of the page ("Submit new thread", "Reply to thread", "Edit post") + and whether or not the subject line field is displayed in the input form. + + Every one of these pages can have a variable length list of alerts submitted + into the template, which will be rendered as Boostrap alert boxes above the + user input form. +#} --> + +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta http-equiv="Content-Security-Policy" content="script-src 'self';"> + <!-- 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> + <header> + <nav class="navbar navbar-light bg-light justify-content-between mb-3"> + <a class="navbar-brand" href="/"> + {% if mode == "NewThread" %} + <h2>Converse: Submit new thread</h2> + {% elif mode == "PostReply" %} + <h2>Converse: Reply to thread</h2> + {% elif mode == "EditPost" %} + <h2>Converse: Edit post</h2> + {% endif %} + </a> + <form class="form-inline"> + <a class="btn btn-outline-secondary my-2" href="/">Back to index</a> + </form> + </nav> + </header> + <div class="container border rounded"> + <div class="d-flex flex-column mt-3 border-bottom"> + {%- for alert in alerts %} + <div class="alert alert-warning m-3"><strong>{{ alert }}</strong></div> + {% endfor -%} + + {%- if mode == "NewThread" %} + <h5>Create a new thread</h5> + {% elif mode == "PostReply" %} + <h5>Respond to thread '{{ title }}'</h5> + {% elif mode == "EditPost" %} + <h5>Edit your post</h5> + {% endif -%} + </div> + <div class="d-flex flex-column mt-3"> + {% if mode == "NewThread" %} + <form action="/thread/submit" method="post"> + {% elif mode == "PostReply" %} + <form action="/thread/reply" method="post"> + {% elif mode == "EditPost" %} + <form action="/post/edit" method="post"> + {% endif %} + {% if mode == "PostReply" %} + <input type="hidden" id="thread_id" name="thread_id" value="{{ id }}"> + {% elif mode == "EditPost" %} + <input type="hidden" id="thread_id" name="post_id" value="{{ id }}"> + {% endif %} + + {% if mode == "NewThread" %} + <div class="input-group mb-3"> + <div class="input-group-prepend"> + <span class="input-group-text" id="title-text">Title:</span> + </div> + <input type="text" class="form-control" id="title" name="title" aria-label="thread title" {% if title %}value="{{ title }}"{% endif %}> + </div> + {% endif %} + + <div class="d-flex flex-row"> + <div class="input-group"> + <div class="input-group-prepend"> + <span class="input-group-text" id="post-text">Post:</span> + </div> + <textarea class="form-control" id="post" name="post" rows="15" aria-label="post content">{% if body %}{{ body }}{% endif %}</textarea> + </div> + <div class="d-flex flex-column flex-wrap-reverse border rounded"> + <p class="m-2 pb-2 border-bottom border-dark"> + Remember that you can use <a href="https://daringfireball.net/projects/markdown/basics"><strong>Markdown</strong></a> when + writing your posts: + </p> + <p class="ml-4 m-2"><i>*italic text*</i></p> + <p class="ml-4 m-2"><strong>**bold text**</strong></p> + <p class="ml-4 m-2"><s>~strikethrough text~</s></p> + <p class="ml-4 m-2"><code>[link text](https://some.link.com/)</code></p> + <p class="ml-4 m-2"><code></code></p> + <p class="ml-4 m-2">Use <code>*</code> or <code>-</code> to enumerate lists.</p> + <p class="ml-4 m-2">See Markdown documentation for more information!</p> + </div> + </div> + <button class="btn btn-primary mt-3 mb-3" type="submit">Post!</button> + </form> + </div> + </div> + </body> +</html> |