blog/publish: styled the page

diff --git a/src/templates/blog/publish.html b/src/templates/blog/publish.html
index e66f86abbb64647654821ae00f6982da0a3625b9..4e6d9c9cb5b00d251ee472bb82477930091d7374 100644 (file)
--- a/src/templates/blog/publish.html
+++ b/src/templates/blog/publish.html
@@ -2,30 +2,72 @@
 
 {% block title %}{{ _("Publish %s") % post.title }}{% end block %}
 
-{% block modal %}
-       <div class="card">
-               <div class="card-body">
-                       <h5 class="card-title mb-1">{{ _("Publish Post") }}</h5>
-                       <h6 class="card-subtitle text-muted mb-3">{{ post.title }}</h6>
+{% block container %}
+       <section class="hero is-primary">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">Home</a>
+                                               </li>
+                                               <li>
+                                                       <a href="/blog">Blog</a>
+                                               </li>
+                                               <li>
+                                                       <a href="/blog/">{{ post.title }}</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("Publish %s") % post.title }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+                               <h3 class="title is-3">{{ _("Publish Post") }}</h3>
+                               <h4 class="title is-4">{{ post.title }}</h4>
+                       </div>
+               </div>
+       </section>
 
-                       <form action="" method="POST">
-                               {% raw xsrf_form_html() %}
+       <div class="container">
+               <section class="section has-text-centered">
+                       <div class="columns is-centered">
+                               <div class="column is-one-fifth">
+                                       <h5 class="title is-5">When to Publish</h5>
 
-                               <input type="hidden" name="when">
+                                       <form action="" method="POST">
+                                               {% raw xsrf_form_html() %}
 
-                               <div class="mb-3">
-                                       <label class="form-label">{{ _("Time to Publish") }}</label>
+                                               <div class="block">
+                                                       <div class="field">
+                                                               <input type="hidden" name="when">
+                                                       </div>
+                                               </div>
 
-                                       <input type="datetime-local" class="form-control"
-                                               pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>
-                               </div>
+                                               <div class="block">
+                                                       <div class="field">
+                                                               <p class="control">
+                                                                       <input type="datetime-local" class="input"
+                                                                               pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>
+                                                               </p>
+                                                       </div>
+                                               </div>
 
-                               <div class="d-grid gap-2">
-                                       <button type="submit" class="btn btn-primary">{{ _("Publish") }}</button>
-                                       <a class="btn btn-secondary" href="/post/{{ post.slug }}">{{ _("Cancel") }}</a>
+                                               <div class="block">
+                                                       <div class="field">
+                                                               <div class="level">
+                                                                       <div class="level-left">
+                                                                               <button type="submit" class="button is-success has-text-weight-bold is-halfwidth">{{ _("Publish") }}</button>
+                                                                       </div>
+                                                                       <div class="level-right">
+                                                                               <a class="button is-danger has-text-weight-bold is-halfwidth" href="/post/{{ post.slug }}">{{ _("Cancel") }}</a>
+                                                                       </div>
+                                                               </div>
+                                                       </div>
+                                               </div>
+                                       </div>
                                </div>
                        </form>
-               </div>
+               </section>
        </div>
 {% end block %}