about summary refs log tree commit diff
path: root/web/converse/templates/post.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/converse/templates/post.html')
-rw-r--r--web/converse/templates/post.html124
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 000000000000..50d23c93a36b
--- /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 }}&nbsp;</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>![image text](https://foo.com/thing.jpg)</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://github.com/tazjin/converse">Converse</a></p>
+        </div>
+      </footer>
+      </div>
+      <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+  </body>
+</html>