feat(templates): Add new MDL-based post editing page

author: Vincent Ambo <tazjin@gmail.com> 2018-05-21T13·10+0200
committer: Vincent Ambo <github@tazj.in> 2018-05-22T07·45+0200
commit: dbd207c452124a8fb5cb57d1a50ce513dbc6a4ea (patch)
tree: 6b932691c6fd2e32558e807ada0e19f28e402af5 /templates/post.html
parent: 0febe676b223e47d80bfb3dec183c0a40842e4f3 (diff)
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 }}&nbsp;</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>![image text](https://foo.com/thing.jpg)</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>![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>
-          <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>
author	Vincent Ambo <tazjin@gmail.com>	2018-05-21T13·10+0200
committer	Vincent Ambo <github@tazj.in>	2018-05-22T07·45+0200
commit	dbd207c452124a8fb5cb57d1a50ce513dbc6a4ea (patch)
tree	6b932691c6fd2e32558e807ada0e19f28e402af5 /templates/post.html
parent	0febe676b223e47d80bfb3dec183c0a40842e4f3 (diff)