wiki: move save button to title bar

The large&sticky button at the bottom was nice but typing at the end of
the page would get behind it.

diff --git a/panikdb/static/css/style.scss b/panikdb/static/css/style.scss
index 10614ef03d65ba5aaa18cbb133330125961b992d..103452cd684e7061c553930d1dd70dbe790397de 100644 (file)
--- a/panikdb/static/css/style.scss
+++ b/panikdb/static/css/style.scss
@@ -640,20 +640,34 @@ div#content div.wiki-section h3 {
        margin-bottom: 0;
 }
 
-label#quickedit {
+#quickedit {
        position: absolute;
+       top: 0.15em;
        right: 2px;
+       label {
+               display: inline-block;
+               margin-left: 6px;
+       }
        input {
                display: none;
        }
 
+       button,
        span {
+               display: inline-block;
+               font-weight: normal;
                background: white;
                border: 1px solid #386ede;
                padding: 1ex;
                border-radius: 3px;
                color: #386ede;
        }
+       button:hover {
+               &:hover {
+                       color: white;
+                       background: #386ede;
+               }
+       }
 
        input:checked + span {
                background: #386ede;
@@ -663,7 +677,7 @@ label#quickedit {
 
 div[contenteditable=true] {
        outline: 2px solid #386ede;
-       outline-offset: 5px;
+       outline-offset: 12px;
 }
 
 .inline-style-popup,
@@ -717,24 +731,6 @@ div[contenteditable=true] {
        }
 }
 
-.wiki-section button.save {
-       position: sticky;
-       bottom: 10px;
-       width: 100%;
-       background: white;
-       border: 2px solid #386ede;
-       color: #386ede;
-       vertical-align: baseline;
-       border-radius: 3px;
-       font-weight: bold;
-       padding: 5px 15px;
-       cursor: pointer;
-       &:hover {
-               color: white;
-               background: #386ede;
-       }
-}
-
 div.wiki-section {
        position: relative;
        margin: 0 auto;

diff --git a/panikdb/static/js/combo.wiki.js b/panikdb/static/js/combo.wiki.js
index c8dfd32f6c885c4772525090012dc916bc18e02c..2866e4debf69902471b79319da7f8020e6057080 100644 (file)
--- a/panikdb/static/js/combo.wiki.js
+++ b/panikdb/static/js/combo.wiki.js
@@ -345,7 +345,7 @@ $(function() {
         var $button = $('<button class="save">Enregistrer</button>');
         $button[0].div_zone = elem;
         elem.edit_url = $(elem).parents('[data-edit-url]').data('edit-url');
-        $button.insertAfter(elem);
+        $button.insertBefore($('#quickedit label'));
       });
       Phylly.init(),
       $('div[data-edit-url] > div').each(function(i, elem) {

diff --git a/panikdb/templates/combo/page_template_sidebar.html b/panikdb/templates/combo/page_template_sidebar.html
index bfbf8cca458e9e59298faa3502370686f9fde2b0..c3c2bff672434584e0da1135f1eda5a4fbd830b8 100644 (file)
--- a/panikdb/templates/combo/page_template_sidebar.html
+++ b/panikdb/templates/combo/page_template_sidebar.html
@@ -13,7 +13,13 @@
 
 {% block content %}
 <div class="section wiki-section">
-<h3><span class="title">{{ page.title }}</span> {% if request.user.is_authenticated %}<label id="quickedit"><input type="checkbox"><span>Mode édition</span></label>{% endif %}</h3>
+<h3><span class="title">{{ page.title }}</span>
+{% if request.user.is_authenticated %}
+<div id="quickedit">
+  <label><input type="checkbox"><span>Mode édition</span></label>
+</div>
+{% endif %}
+</h3>
 {% csrf_token %}
 
 <div>