Move new posts to their own page

oslo-lib/src/lib.rs

@@ -31,6 +31,9 @@ pub async fn build_app() -> Result<tide::Server<State>, tide::Error> {
     app.at("/posts")
         .with(require_auth)
         .post(routes::create_post);
+    app.at("/posts/new")
+        .with(require_auth)
+        .get(routes::new_post);
     app.at("/posts/:id")
         .get(routes::single_post)
         .post(routes::update_post)

oslo-lib/src/routes.rs

@@ -31,6 +31,11 @@ pub async fn single_post(req: Request<State>) -> Result {
     render_html_response("single.html", &context, req)
 }
 
+pub async fn new_post(req: Request<State>) -> Result {
+    let context = Context::new();
+    render_html_response("new.html", &context, req)
+}
+
 pub async fn edit_post(req: Request<State>) -> Result {
     let mut context = Context::new();
     let post_id = req.param("id")?;

static/style.css

@@ -42,7 +42,7 @@ a:hover {
   border-radius: 0;
   font-family: inherit;
   font-size: inherit;
-  padding: 0.15em 0.3em;
+  padding: 0.25em 0.5em;
   text-decoration: none;
 }
 
@@ -74,6 +74,7 @@ a:hover {
 .header {
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   margin: 1em 0;
 }
@@ -83,10 +84,19 @@ a:hover {
   font-style: italic;
   font-weight: bold;
   letter-spacing: 2px;
+  margin: 0.5em 0.5em 0.5em 0;
   padding: 0.25em 0.5em;
   text-decoration: none;
 }
 
+.header__form {
+  display: flex;
+}
+
+.header__form .btn:first-child {
+  margin-right: 0.5em;
+}
+
 .form__field {
   margin: 1em 0;
 }
@@ -98,6 +108,7 @@ a:hover {
 
 .form__textarea,
 .form__text-field {
+  border: 2px solid var(--foreground);
   font-family: monospace;
   font-size: 14px;
   padding: 0.25em;
@@ -177,8 +188,15 @@ a:hover {
   background-color: var(--success-green);
 }
 
+.error {
+  background: var(--white);
+  border: 5px solid var(--danger-red);
+  padding: 1em;
+}
+
 .error__heading {
-  margin: 2em 0 1em;
+  color: var(--danger-red);
+  margin-bottom: 1em;
 }
 
 .error__message {

templates/edit.html

@@ -1,5 +1,8 @@
-{% extends "layout.html" %} {% block content %}
-<div class="posts">
-  {{ components::form(post=post, action="/posts/{{ post.id }}") }}
-</div>
+{% extends "layout.html" %}
+{% block content %}
+
+  <div class="posts">
+    {{ components::form(post=post, action="/posts/{{ post.id }}") }}
+  </div>
+
 {% endblock %}

templates/index.html

@@ -1,6 +1,5 @@
-{% extends "layout.html" %} {% block content %} {% if logged_in %}
-<h1 class="heading">New Post</h1>
-{{ components::form(action="/posts") }} {% endif %}
+{% extends "layout.html" %}
+{% block content %}
 
 <div class="posts">
   {% for post in posts %}
@@ -9,4 +8,5 @@
     No posts yet
   {% endfor %}
 </div>
+
 {% endblock %}

templates/layout.html

@@ -11,10 +11,16 @@
     <div class="container">
       <header class="header">
         <a class="header__logo btn" href="/">:: dlyan.net</a>
+
         {% if logged_in %}
-        <form action="/logout" method="POST">
-          <input class="btn" type="submit" value="Log out" />
-        </form>
+          <div class="header__auth">
+            <form class="header__form" action="/logout" method="POST">
+              <a href="/posts/new" class="btn">
+                new post
+              </a>
+              <input class="btn" type="submit" value="log out" />
+            </form>
+          </div>
         {% endif %}
       </header>
       <div class="messages">

templates/new.html

@@ -0,0 +1,5 @@
+{% extends 'layout.html' %}
+{% block content %}
+  <h1 class="heading">New Post</h1>
+  {{ components::form(action="/posts") }}
+{% endblock %}