diff options
Diffstat (limited to 'web/converse/templates/post.html')
| -rw-r--r-- | web/converse/templates/post.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/web/converse/templates/post.html b/web/converse/templates/post.html new file mode 100644 index 0000000000..8ea2df1cd3 --- /dev/null +++ b/web/converse/templates/post.html @@ -0,0 +1,124 @@ +{# + 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.0, minimum-scale=1.0"> + <title>Converse: Post</title> + + <meta http-equiv="Content-Security-Policy" content="script-src https://code.getmdl.io 'self';"> + <!-- <link rel="shortcut icon" href="images/favicon.png"> --> + + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu"> + <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> + <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-orange.min.css" /> + <link rel="stylesheet" href="/static/styles.css"> + </head> + <body class="converse mdl-base mdl-color-text--grey-700 mdl-color--grey-100"> + <div class="mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100"> + <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary-dark"> + <div class="mdl-layout__header-row"> + <a href="/" class="mdl-layout-title mdl-color-text--blue-grey-50 cvs-title"> + {% match mode %} + {% when EditingMode::NewThread %} + Converse: Submit new thread + {% when EditingMode::PostReply %} + Converse: Reply to thread + {% when EditingMode::EditPost %} + Converse: Edit post + {% endmatch %} + </a> + <div class="mdl-layout-spacer"></div> + <a href="/"> + <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> + Back to index + </button> + </a> + </div> + </header> + <main class="mdl-layout__content mdl-grid"> + <div class="mdl-card mdl-shadow--2dp mdl-cell--8-col"> + {% match mode %} + {% when EditingMode::NewThread %} + <form action="/thread/submit" method="post"> + {% when EditingMode::PostReply %} + <form action="/thread/reply" method="post"> + {% when EditingMode::EditPost %} + <form action="/post/edit" method="post"> + {% endmatch %} + {% match mode %} + {% when EditingMode::PostReply %} + <input type="hidden" id="thread_id" name="thread_id" value="{{ id.unwrap() }}"> + {% when EditingMode::EditPost %} + <input type="hidden" id="thread_id" name="post_id" value="{{ id.unwrap() }}"> + {% else %} + {# no post ID when making a new thread #} + {% endmatch %} + <div class="mdl-card__supporting-text"> + {% for alert in alerts %} + <span class="mdl-chip mdl-color--red-200"> + <span class="mdl-chip__text">{{ alert }} </span> + </span> + {% endfor %} + {% if mode == EditingMode::NewThread %} + <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col"> + <input class="mdl-textfield__input" type="text" id="title" name="title" aria-label="thread title" required {% match title %}{% when Some with (title_text) %}value="{{ title_text }}"{% else %}{# Nothing! #}{% endmatch %}> + <label class="mdl-textfield__label" for="title">Thread title</label> + </div> + {% endif %} + <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col"> + <textarea class="mdl-textfield__input" type="text" rows="25" id="post" name="post" aria-label="post content" required> + {%- match post -%} + {%- when Some with (post_text) -%} + {{- post_text -}} + {%- else -%} + {# Nothing! #} + {%- endmatch -%} + </textarea> + <label class="mdl-textfield__label" for="body">Content ...</label> + </div> + </div> + <div class="mdl-card__actions"> + <input class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect" type="submit" value="Submit!"> + </div> + </form> + </div> + <div class="mdl-card mdl-shadow--2dp mdl-cell--4-col"> + <div class="mdl-card__title mdl-card--border"> + Quick Markdown primer: + </div> + <div class="mdl-card__supporting-text"> + <p> + Remember that you can use <a href="https://daringfireball.net/projects/markdown/basics"><strong>Markdown</strong></a> when + writing your posts: + </p> + <p><i>*italic text*</i></p> + <p><strong>**bold text**</strong></p> + <p><s>~strikethrough text~</s></p> + <p><code>[link text](https://some.link.com/)</code></p> + <p><code></code></p> + <p>Use <code>*</code> or <code>-</code> to enumerate lists.</p> + <p>See Markdown documentation for more information!</p> + </div> + </div> + </main> + <footer class="mdl-mini-footer"> + <div class="mdl-mini-footer--right-section"> + <p>Powered by <a href="https://code.tvl.fyi/about/web/converse">Converse</a></p> + </div> + </footer> + </div> + <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> + </body> +</html> |