docs/edit: restyled the page

diff --git a/src/templates/docs/edit.html b/src/templates/docs/edit.html
index 5717c0f6e3769ddc1e5413bad6b25af9d582d073..3f1f3404742987b838f9f9ca1ae7181f7b9e16e5 100644 (file)
--- a/src/templates/docs/edit.html
+++ b/src/templates/docs/edit.html
@@ -5,9 +5,9 @@
 {% block main %}
        {% import os.path %}
 
-       <div class="card mb-4">
-               <div class="card-body">
-                       <h4 class="card-title">
+       <div class="container">
+               <section class="section">
+                       <h4 class="title is-4">
                                {% if page %}{{ _("Edit %s") % page.title }}{% else %}{{ _("Create A New Page") }}{% end %}
                        </h4>
 
@@ -15,7 +15,7 @@
                                {% raw xsrf_form_html() %}
 
                                <div class="mb-3">
-                                       <div class="btn-toolbar mb-3" role="toolbar">
+                                       <!--<div class="btn-toolbar mb-3" role="toolbar">
                                                <div class="btn-group btn-group-sm mr-2" role="group">
                                                        <button type="button" class="btn btn-secondary"
                                                                        id="bold" title="{{ _("Bold") }} [{{ _("Ctrl") }}-B]">
@@ -54,56 +54,118 @@
                                                <a class="btn btn-sm btn-secondary" href="{{ path }}/_files"
                                                                target="_blank" title="{{ _("Files") }}">
                                                        <i class="fas fa-images"></i>
-                                               </a>
-                                       </div>
+                                               </a>-->
+
+                                               <div class="field has-addons">
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="bold" title="{{ _("Bold") }} [{{ _("Ctrl") }}-B]">
+                                                                       <i class="fas fa-bold"></i>
+                                                               </button>
+                                                       </p>
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="italic" title="{{ _("Italic") }} [{{ _("Ctrl") }}-I]">
+                                                                       <i class="fas fa-italic"></i>
+                                                               </button>
+                                                       </p>
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="code" title="{{ _("Code") }} [{{ _("Ctrl") }}-C]">
+                                                                       <i class="fas fa-code"></i>
+                                                               </button>
+                                                       </p>
+                                               </div>
+                                               <div class="field has-addons">
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="headline-up" title="{{ _("Headline one level up") }}">
+                                                                       <i class="fas fa-chevron-left"></i>
+                                                               </button>
+                                                       </p>
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="headline" title="{{ _("Headline") }} [{{ _("Ctrl") }}-H]">
+                                                                       <i class="fas fa-heading"></i>
+                                                               </button>
+                                                       </p>
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="headline-down" title="{{ _("Headline one level down") }}">
+                                                                       <i class="fas fa-chevron-right"></i>
+                                                               </button>
+                                                       </p>
+                                               </div>
+                                               <div class="field has-addons">
+                                                       <p class="control">
+                                                               <button type="button" class="button"
+                                                                               id="link" title="{{ _("Link") }} [{{ _("Ctrl") }}-L]">
+                                                                       <i class="fas fa-link"></i>
+                                                               </button>
+                                                       </p>
+                                                       <p class="control">
+                                                               <a class="button" href="{{ path }}/_files"
+                                                                               target="_blank" title="{{ _("Files") }}">
+                                                                       <i class="fas fa-images"></i>
+                                                               </a>
+                                                       </p>
+                                               </div>
+
 
-                                       <textarea class="form-control" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
-                                               >{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
+                                       <div class="field">
+                                               <div class="control">
+                                                       <textarea class="textarea" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
+                                                       >{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
+                                               </div>
+                                       </div>
                                </div>
 
-                               <div class="mb-3 row">
-                                       <label class="col-sm-4 col-form-label">{{ _("What has changed?") }}</label>
-                                       <div class="col-sm-8">
-                                               <input type="text" class="form-control" name="changes" required>
+                               <div class="field">
+                                       <label class="label">{{ _("What has changed?") }}</label>
+                                       <div class="control">
+                                               <input type="text" class="input" name="changes" required>
                                        </div>
                                </div>
 
                                {% if page and not page.is_watched_by(current_user) %}
-                                       <div class="mb-3 form-check">
-                                               <div class="form-check">
-                                                       <input class="form-check-input" type="checkbox" name="watch" id="watch" checked>
-                                                       <label class="form-check-label" for="watch">{{ _("Watch this page") }}</label>
+                                       <div class="block">
+                                               <div class="control">
+                                                       <label class="checkbox" for="watch">{{ _("Watch this page") }}</label>
+                                                               <input type="checkbox" name="watch" id="watch" checked>
+                                                       </label>
                                                </div>
 
                                                <small class="form-text text-muted">
-                                                       {{ _("Get notified when this page is changed") }}
+                                                       {{_("Get notified when this page is changed") }}
                                                </small>
                                        </div>
                                {% end %}
 
-                               <div class="d-grid">
-                                       <button type="submit" class="btn btn-primary">
+                               <div class="control">
+                                       <button type="submit" class="button is-primary">
                                                {% if page %}{{ _("Save Page") }}{% else %}{{ _("Create Page") }}{% end %}
                                        </button>
                                </div>
                        </form>
                </div>
-       </div>
+       </section>
 
-       <div id="preview" class="fade show">
-               <div class="d-flex align-items-center mb-4">
-                       <h4 class="mb-0">{{ _("Preview") }}</h4>
-                       <div id="spinner" class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
-               </div>
+       <section class="section">
+               <div id="preview" class="fade show">
+                       <div class="d-flex align-items-center mb-4">
+                               <h4 class="mb-0">{{ _("Preview") }}</h4>
+                               <div id="spinner" class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
+                       </div>
 
-               <div class="card">
-                       <div class="card-body mb-0">
-                               <div id="preview-content" class="wiki-content mb-0">
-                                       {{ _("Loading...") }}
+                       <div class="card">
+                               <div class="card-body mb-0">
+                                       <div id="preview-content" class="wiki-content mb-0">
+                                               {{ _("Loading...") }}
+                                       </div>
                                </div>
                        </div>
                </div>
-       </div>
+       </section>
 {% end block %}
 
 {% block javascript %}