diff options
Diffstat (limited to 'templates/post.html')
| -rw-r--r-- | templates/post.html | 157 |
1 files changed, 85 insertions, 72 deletions
diff --git a/templates/post.html b/templates/post.html index bdc725c94fc5..db6b00959d93 100644 --- a/templates/post.html +++ b/templates/post.html @@ -14,90 +14,103 @@ <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> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> + <title>Converse: Post</title> + + <!-- TODO --> + <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> - <header> - <nav class="navbar navbar-light bg-light justify-content-between mb-3"> - <a class="navbar-brand" href="/"> + <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"> {% if mode == "NewThread" %} - <h2>Converse: Submit new thread</h2> + Converse: Submit new thread {% elif mode == "PostReply" %} - <h2>Converse: Reply to thread</h2> + Converse: Reply to thread {% elif mode == "EditPost" %} - <h2>Converse: Edit post</h2> + Converse: Edit post {% 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 %} - + </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"> {% 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> + <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 %} + <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 -%} - <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> + {% if mode == "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 {% if title %}value="{{ title }}"{% endif %}> + <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> + {%- if post %}{{ post }}{% endif -%} + </textarea> + <label class="mdl-textfield__label" for="body">Content ...</label> </div> - <textarea class="form-control" id="post" name="post" rows="15" aria-label="post content">{% if post %}{{ post }}{% 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 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> - <button class="btn btn-primary mt-3 mb-3" type="submit">Post!</button> - </form> + </div> + </main> + <footer class="mdl-mini-footer"> + <div class="mdl-mini-footer--right-section"> + <p>Powered by <a href="https://github.com/tazjin/converse">Converse</a></p> + </div> + </footer> </div> - </div> + <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> </body> </html> |