From fbf9e9d682e580dc2d020d23ecc173315327ec1e Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Thu, 9 Mar 2017 16:15:10 +0100
Subject: [PATCH 01/10] integrate QC plugin (ajax branch)

This refactors the page-attribute area a bit and intergrates the new
ajax branch of the QC plugin. I'm not really happy about the included
file - it should probably be moved to our Template class instead.
---
 css/area_nav-breadcrumb.less      | 139 ------------------------------
 css/area_nav-page-attributes.less |  30 +++++++
 css/plugins/qc.less               |  28 +++++-
 js/plugins/do_tasks.js            |  94 ++++++++++----------
 js/plugins/qc.js                  |  37 ++++++++
 main.php                          |   3 +-
 script.js                         |   1 +
 style.ini                         |   1 +
 tpl/nav-page-attributes.php       |  57 ++++++++++++
 tpl/nav-page-quality-tasks.php    |  54 ------------
 10 files changed, 200 insertions(+), 244 deletions(-)
 create mode 100644 css/area_nav-page-attributes.less
 create mode 100644 js/plugins/qc.js
 create mode 100755 tpl/nav-page-attributes.php
 delete mode 100755 tpl/nav-page-quality-tasks.php

diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index cd3f5b6..4376701 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -67,145 +67,6 @@
             padding: .1em .1em 0;
         }
     }
-
-
-/* + + + + +  icon list  + + + + + */
-    .page-attributes {
-        list-style: none;
-        float: right;
-        display: inline-block;
-        max-width: 30%;
-        margin: -.45em 0 0;
-        padding: 0;
-        @media @screen_max-xs{
-            max-width: 90%;
-        }
-
-        > li {
-            .btn-usertools-wrapper(); // uniform li
-            .btn-usertools-num();
-
-            float: left;
-
-            > strong,
-            > a {
-                display: block;
-                width: auto;
-                min-height: 2em;
-                border: 1px solid @color-border;
-                border-radius: @border-radius;
-                color: @color-nav;
-                text-align: center;
-                margin: 0;
-            }
-
-            .prefix {
-                .btn-prefix ();
-                .icon-clipboard();
-            }
-
-/* check !!! */
-            &.do_none {
-                position: relative;
-
-                strong {
-                    background-color: @color-site-bg;
-                }
-
-                .num {
-                    background-color: @color-border;
-                    color: @color-nav;
-                }
-            }
-/* end check !!! */
-
-            &.plugin__qc {
-                display: inline-block;
-                overflow: visible;
-                position: static;
-            }
-        } // li
-
-        a {
-            transition: @transition color, @transition background-color, @transition border-color;
-
-            &[aria-expanded="false"] + #plugin__qc__wrapper {
-                display: none;
-            }
-
-            &:hover,
-            &:active,
-            &:focus {
-                background-color: @button_color;
-                border-color: @button_background;
-                color: @button_background;
-
-                .prefix {
-                    color: @button_background;
-                }
-            }
-        }
-
-        #plugin__qc__wrapper {
-            position: absolute;
-            right: 0;
-            width: auto;
-            border: 0 none;
-            background: @background_page-header;
-            background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
-            background: linear-gradient(top, @background_page-header, @color-content-bg);
-            box-shadow: @box-shadow-bottom;
-            z-index: 2000;
-
-            #plugin__qc__out{
-                h1 {
-                    font-size: @font-size-head3;
-                }
-
-                h2 {
-                    margin-top: 1.6em;
-                    font-size: @font-size-head5;
-                }
-                > h1,
-                > h2,
-                > p,
-                > dl,
-                > div {
-                    padding-left: 1rem;
-                    margin-left: 0;
-                }
-
-                > div p {
-                    padding-left: 0;
-                    margin-left: 0;
-                }
-            }
-
-            &[aria-hidden="false"] {
-                margin-top: .5rem;
-            }
-        }
-
-        #plugin__qc__icon {
-            display: none;
-        }
-
-        #plugin__qc__link {
-            position: relative;
-
-            .prefix {
-                .icon-emo-happy();
-
-                width: 100%;
-                font-size: @font-size-default;
-
-                &::before {
-                    width: 100%;
-                    margin: .1em 0 0;
-                }
-            }
-        }
-    }
 }
 
 
diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
new file mode 100644
index 0000000..228f667
--- /dev/null
+++ b/css/area_nav-page-attributes.less
@@ -0,0 +1,30 @@
+/**
+ * Page Attribute Icons in the breadcrumb bar
+ */
+.page-attributes {
+    list-style: none;
+    float: right;
+    display: inline-block;
+    max-width: 30%;
+    margin: -.45em 0 0;
+    padding: 0;
+    @media @screen_max-xs {
+        max-width: 90%;
+    }
+
+    > li {
+        .btn-usertools-wrapper(); // uniform li
+        .btn-usertools-num();
+
+        position: relative;
+        float: left;
+        display: block;
+        width: auto;
+        min-height: 2em;
+        border: 1px solid @color-border;
+        border-radius: @border-radius;
+        color: @color-nav;
+        text-align: center;
+        margin: 0;
+    }
+}
diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index dff5a32..42c57a5 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -1,6 +1,26 @@
-#plugin__qc__wrapper{
-    font-size: @font-size-default;
-    p{
-        font-size: @font-size-default;
+/**
+ * Styles for the QC plugin
+ */
+
+// icon in page attributes
+.page-attributes .plugin_qc {
+    .qc_icon {
+        margin: 0;
+        width: 2em;
+        height: 2em;
+
+        svg {
+            margin-top: 0.1em;
+            margin-left: 0.1em;
+            width: 1.6em;
+            height: 1.6em;
+        }
     }
 }
+
+// output
+.qc-output {
+    font-size: 90%;
+    border-bottom: 1px solid @ini_border;
+}
+
diff --git a/js/plugins/do_tasks.js b/js/plugins/do_tasks.js
index 78a8f34..1ff8717 100755
--- a/js/plugins/do_tasks.js
+++ b/js/plugins/do_tasks.js
@@ -1,47 +1,49 @@
-( function( $, spc ) {
-
-    var togglePageAnalysis = function(){
-            var $this = $('.page-attributes').find('.plugin__qc');
-            try{
-                var $link = $this.find('#plugin__qc__link'),
-                    $container = $this.find('#plugin__qc__wrapper');
-
-                if($container.length < 1){
-                    $this.remove();
-                }else{
-                    $container.attr('aria-hidden','true');
-                    var $icon = $container.find('#plugin__qc__icon');
-                    $container.find('#plugin__qc__out').removeAttr('style');
-                    $link.on( 'click', function(e){
-                        e.preventDefault();
-                        $icon.trigger('click');
-                        var oldState = ($link.attr('aria-expanded')=== "true" );
-                        $container.attr('aria-hidden',oldState);
-                        $(this).attr('aria-expanded',!oldState);
-
-                    });
-
-                    if($container.length > 0){
-                        var num = $container.attr('data-errors');
-                        if(num){
-                            $link.find('.num').empty().append(num);
-                            $link.closest('li').removeClass('do_none');
-                        }
-                    }
-
-                }
-
-            }catch(err){
-                $this.remove();
-            }
-    };
-
-    $(function(){
-        togglePageAnalysis();
-    });
-
-} )( jQuery, spc );
-
-
-
+// FIXME figure out what this did and why
 
+// ( function( $, spc ) {
+//
+//     var togglePageAnalysis = function(){
+//             var $this = $('.page-attributes').find('.plugin__qc');
+//             try{
+//                 var $link = $this.find('#plugin__qc__link'),
+//                     $container = $this.find('#plugin__qc__wrapper');
+//
+//                 if($container.length < 1){
+//                     $this.remove();
+//                 }else{
+//                     $container.attr('aria-hidden','true');
+//                     var $icon = $container.find('#plugin__qc__icon');
+//                     $container.find('#plugin__qc__out').removeAttr('style');
+//                     $link.on( 'click', function(e){
+//                         e.preventDefault();
+//                         $icon.trigger('click');
+//                         var oldState = ($link.attr('aria-expanded')=== "true" );
+//                         $container.attr('aria-hidden',oldState);
+//                         $(this).attr('aria-expanded',!oldState);
+//
+//                     });
+//
+//                     if($container.length > 0){
+//                         var num = $container.attr('data-errors');
+//                         if(num){
+//                             $link.find('.num').empty().append(num);
+//                             $link.closest('li').removeClass('do_none');
+//                         }
+//                     }
+//
+//                 }
+//
+//             }catch(err){
+//                 $this.remove();
+//             }
+//     };
+//
+//     $(function(){
+//         togglePageAnalysis();
+//     });
+//
+// } )( jQuery, spc );
+//
+//
+//
+//
diff --git a/js/plugins/qc.js b/js/plugins/qc.js
new file mode 100644
index 0000000..65d795b
--- /dev/null
+++ b/js/plugins/qc.js
@@ -0,0 +1,37 @@
+/**
+ * Add custom QC functionality instead of using the plugin's mechanism
+ */
+jQuery(function () {
+    var $panel = jQuery('div.qc-output').hide();
+
+    // load summary
+    jQuery('.page-attributes .plugin_qc a').load(
+        DOKU_BASE + '/lib/exe/ajax.php',
+        {
+            call: 'plugin_qc_short',
+            id: JSINFO['id']
+        },
+        function () {
+            jQuery(this).find('span span').addClass('num');
+        }
+    ).click(function (e) {
+        e.preventDefault();
+
+        if ($panel.html() == '') {
+            // load output
+            $panel.load(
+                DOKU_BASE + '/lib/exe/ajax.php',
+                {
+                    call: 'plugin_qc_long',
+                    id: JSINFO['id']
+                },
+                function () {
+                    $panel.dw_show();
+                }
+            );
+        } else {
+            $panel.dw_toggle();
+        }
+    });
+
+});
diff --git a/main.php b/main.php
index 2934e3f..22fa813 100755
--- a/main.php
+++ b/main.php
@@ -230,7 +230,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* page quality / page tasks */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                include('tpl/nav-page-quality-tasks.php');
+                                include('tpl/nav-page-attributes.php');
                             ?>
 
                             <?php
@@ -266,6 +266,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                                 include('tpl/nav-meta-box.php'); ?>
                             </div>
 
+                            <div class="qc-output"></div>
 
                             <div class="msg-area"><?php html_msgarea();/*msg('Information.', 0);msg('Success', 1);msg('Notification', 2);msg('Fehler', -1);*/ ?></div>
                             <?php
diff --git a/script.js b/script.js
index 0636fe1..ed8b13e 100755
--- a/script.js
+++ b/script.js
@@ -2,6 +2,7 @@
 /* DOKUWIKI:include js/base/spc.js */
 
 /* DOKUWIKI:include js/plugins/do_tasks.js */
+/* DOKUWIKI:include js/plugins/qc.js */
 
 /* DOKUWIKI:include js/meta-box.js */
 /* DOKUWIKI:include js/sidebar.js */
diff --git a/style.ini b/style.ini
index d29dc7e..7319985 100755
--- a/style.ini
+++ b/style.ini
@@ -67,6 +67,7 @@ css/area_footer.less                  = all
 css/area_msg.less                     = all
 css/area_nav-direct.less              = all
 css/area_nav-breadcrumb.less          = all
+css/area_nav-page-attributes.less     = all
 css/area_nav-usertools.less           = all
 css/area_sidebar-search.less          = all
 css/area_nav-pagetools.less           = all
diff --git a/tpl/nav-page-attributes.php b/tpl/nav-page-attributes.php
new file mode 100755
index 0000000..0a7f0d2
--- /dev/null
+++ b/tpl/nav-page-attributes.php
@@ -0,0 +1,57 @@
+<?php
+if(!defined('DOKU_INC')) die();
+
+/** @var \helper_plugin_do $doPlugin */
+$doPlugin = plugin_load('helper', 'do');
+/** @var \helper_plugin_qc $qcPlugin */
+$qcPlugin = plugin_load('helper', 'qc');
+
+
+if($doPlugin !== null || $qcPlugin !== null) {
+    echo '<ul class="page-attributes">';
+}
+
+
+if($qcPlugin && $qcPlugin->shouldShow()) {
+    echo '<li class="plugin_qc"><a href="#">…</a></li>'; // filled by javascript
+}
+
+
+if($doPlugin !== null) {
+    $count = $doPlugin->getPageTaskCount();
+    $num = $count['count'];
+    $title = "";
+
+    if($num == 0) { // no tasks - does not exist do in plug-in
+        $class = "do_none";
+        $title = tpl_getLang('tasks_page_none');
+    } elseif($count['undone'] == 0) { // all tasks done
+        $class = 'do_done';
+        $title = $this->getLang('title_alldone');
+    } elseif($count['late'] == 0) { // open tasks but none late
+        $class = 'do_undone';
+        $title = sprintf($this->getLang('title_intime'), $count['undone']);
+    } else { // late tasks
+        $class = 'do_late';
+        $title = sprintf($this->getLang('title_late'), $count['undone'], $count['late']);
+    }
+    $markup = "<li class=\"plugin__do_pagetasks " . $class . "\" title=\"'.$title.'\"><strong><span class=\"prefix\">" . tpl_getLang('prefix_tasks_page') . " </span><span class=\"num\">" . $num . "</span></strong></li>";
+
+    echo $markup;
+}
+
+if($doPlugin !== null || $qcPlugin !== null) {
+    echo "</ul>";
+}
+
+
+
+/*
+
+
+$out = '<div class="plugin__do_pagetasks" title="' . $title . '"><span class="' . $class . '">';
+$out .= $count['undone'];
+$out .= '</span></div>';
+
+if($return) return $out;
+echo $out;*/
diff --git a/tpl/nav-page-quality-tasks.php b/tpl/nav-page-quality-tasks.php
deleted file mode 100755
index 2a1977c..0000000
--- a/tpl/nav-page-quality-tasks.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-?>
-
-<?php
-    /** @var \helper_plugin_do $doPlugin */
-    $doPlugin = plugin_load('helper','do');
-
-    /** @var \helper_plugin_qc $qc */
-    $qc = plugin_load('helper','qc');
-    if ($doPlugin !== null ||$qc ) {
-        echo "<ul class=\"page-attributes\">";
-    }
-    if ($qc) {
-        echo "<li class=\"plugin__qc do_none\"><a id=\"plugin__qc__link\" aria-expanded=\"false\" href=\"#plugin__qc__wrapper\"><span class=\"prefix\">".tpl_getLang('quality_trigger')."</span><span class=\"num\">0</span></strong></a>";
-        $qc->tplErrorCount();
-        echo "</li>";
-    }
-    if ($doPlugin !== null ) {
-        $count = $doPlugin->getPageTaskCount();
-        $num = $count['count'];
-        $title = "";
-
-        if($num == 0){ // no tasks - does not exist do in plug-in
-            $class = "do_none";
-            $title = tpl_getLang('tasks_page_none');
-        } elseif($count['undone'] == 0){ // all tasks done
-            $class = 'do_done';
-            $title = $this->getLang('title_alldone');
-        }elseif($count['late'] == 0) { // open tasks but none late
-            $class = 'do_undone';
-            $title = sprintf($this->getLang('title_intime'), $count['undone']);
-        } else { // late tasks
-            $class = 'do_late';
-            $title = sprintf($this->getLang('title_late'), $count['undone'], $count['late']);
-        }
-        $markup = "<li class=\"plugin__do_pagetasks ".$class."\" title=\"'.$title.'\"><strong><span class=\"prefix\">".tpl_getLang('prefix_tasks_page')." </span><span class=\"num\">".$num."</span></strong></li>";
-
-        echo $markup;
-    }
-
-    if ($doPlugin !== null ||$qc ) {
-        echo "</ul>";
-    }
-
-/*
-
-
-$out = '<div class="plugin__do_pagetasks" title="' . $title . '"><span class="' . $class . '">';
-$out .= $count['undone'];
-$out .= '</span></div>';
-
-if($return) return $out;
-echo $out;*/

From a94fc7a514a474778ffdc5e7e998f441ce1d2576 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Thu, 9 Mar 2017 16:16:19 +0100
Subject: [PATCH 02/10] give tabs a class for special styling

I nearly needed that but then didn't. but it might come in handy
---
 tpl/nav-meta-box.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tpl/nav-meta-box.php b/tpl/nav-meta-box.php
index 77328c5..abf95a3 100755
--- a/tpl/nav-meta-box.php
+++ b/tpl/nav-meta-box.php
@@ -9,7 +9,7 @@ $tabs = \dokuwiki\template\sprintdoc\Template::getInstance()->getMetaBoxTabs();
         <li class="a11y">&nbsp;</li>
         <?php
         foreach($tabs as $tab) {
-            echo '<li>';
+            echo '<li class="' . $tab['id'] . '">';
             echo '<a href="#' . $tab['id'] . '" aria-expanded="false">';
             echo '<span class="prefix">';
             echo $tab['label'];

From 80573eb8846ddd766f5554ac7ffc548113d92346 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Thu, 9 Mar 2017 16:18:15 +0100
Subject: [PATCH 03/10] do not break the C in CSS

Non-explicitly styled elements are supposed to inherit their parent's
font and colors!
---
 css/base.less | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/css/base.less b/css/base.less
index 9b9ed35..8198e74 100755
--- a/css/base.less
+++ b/css/base.less
@@ -433,18 +433,7 @@ nav > ul {
         padding: 0;
     }
 
-    html, body, div, span, applet, object, iframe,
-    h1, h2, h3, h4, h5, h6, p, blockquote,
-    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
-    small, strike, strong, sub, sup, tt, var,
-    b, u, i, center,
-    dl, dt, dd, ol, ul, li,
-    fieldset, form, label, legend,
-    table, caption, tbody, tfoot, thead, tr, th, td,
-    article, aside, canvas, details, embed,
-    figure, figcaption, footer, header,
-    menu, nav, output, ruby, section, summary,
-    time, mark, audio, video {
+    html, body {
         font-family: @font_family_screen;
         color: @ini_text;
     }

From a21c6f8785ac4967f21ffe25bb28652e3383f951 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= <deutschlaender@cosmocode.de>
Date: Thu, 13 Apr 2017 12:44:53 +0200
Subject: [PATCH 04/10] SPR-869: debug for wiki in root

---
 css/area_nav-page-attributes.less | 25 +++++++++++++++++++++++++
 js/plugins/qc.js                  |  4 ++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
index eb9d612..6cfa847 100644
--- a/css/area_nav-page-attributes.less
+++ b/css/area_nav-page-attributes.less
@@ -12,6 +12,13 @@
         max-width: 90%;
     }
 
+    li.plugin_qc .qc_icon svg {
+        margin-left: 0;
+        margin-top: 0.2em;
+        width: 1.5em;
+        height: 1.5em;
+    }
+
     > li {
         .btn-usertools-wrapper(); // uniform li
         .btn-usertools-num();
@@ -26,6 +33,24 @@
         text-align: center;
         margin: 0 .25rem;
 
+        a {
+            display: block;
+            width: auto;
+            min-height: 26px;
+            &:hover, &:focus, &:active {
+                background-color: @ini_nav_menu_hover_color;
+                border-color: @ini_nav_menu_hover_color;
+                color: @ini_nav_menu_hover_bg;
+                span.qc_icon {
+                    &.qc_bad, &.qc_meh, &.qc_good {
+                        fill: @ini_nav_menu_hover_bg;
+                        color: @ini_nav_menu_hover_bg;
+                    }
+                }
+
+            }
+        }
+
         .prefix {
             .btn-prefix ();
             .icon-clipboard();
diff --git a/js/plugins/qc.js b/js/plugins/qc.js
index 65d795b..5a0de75 100644
--- a/js/plugins/qc.js
+++ b/js/plugins/qc.js
@@ -6,7 +6,7 @@ jQuery(function () {
 
     // load summary
     jQuery('.page-attributes .plugin_qc a').load(
-        DOKU_BASE + '/lib/exe/ajax.php',
+        DOKU_BASE + 'lib/exe/ajax.php',
         {
             call: 'plugin_qc_short',
             id: JSINFO['id']
@@ -20,7 +20,7 @@ jQuery(function () {
         if ($panel.html() == '') {
             // load output
             $panel.load(
-                DOKU_BASE + '/lib/exe/ajax.php',
+                DOKU_BASE + 'lib/exe/ajax.php',
                 {
                     call: 'plugin_qc_long',
                     id: JSINFO['id']

From 9161dde6469491dc934c9c23d730ad0eb9f2a7a9 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Thu, 13 Apr 2017 15:29:36 +0200
Subject: [PATCH 05/10] SPR-869: QC Plugin icon qs

---
 css/area_nav-page-attributes.less | 41 +++++++++++++++++--------------
 css/base_mixins.less              |  4 +--
 css/plugins/qc.less               | 10 +++++---
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
index 6cfa847..f433a32 100644
--- a/css/area_nav-page-attributes.less
+++ b/css/area_nav-page-attributes.less
@@ -1,6 +1,10 @@
 /**
  * Page Attribute Icons in the breadcrumb bar
  */
+
+
+/* + + + + +  icons in breadcrumb area  + + + + + */
+
 .page-attributes {
     list-style: none;
     float: right;
@@ -8,17 +12,11 @@
     max-width: 30%;
     margin: -.45em 0 0;
     padding: 0;
+
     @media @screen_max-xs {
         max-width: 90%;
     }
 
-    li.plugin_qc .qc_icon svg {
-        margin-left: 0;
-        margin-top: 0.2em;
-        width: 1.5em;
-        height: 1.5em;
-    }
-
     > li {
         .btn-usertools-wrapper(); // uniform li
         .btn-usertools-num();
@@ -28,26 +26,34 @@
         display: block;
         width: auto;
         min-height: @toggle-size;
-        border: 1px solid @wikiicons-border;
-        border-radius: @ini_default_border_radius;
         text-align: center;
         margin: 0 .25rem;
 
+        strong {
+            display: block;
+            min-height: 1.64rem;
+            border: 1px solid @wikiicons-border;
+            border-radius: @ini_default_border_radius;
+        }
+
         a {
             display: block;
             width: auto;
-            min-height: 26px;
-            &:hover, &:focus, &:active {
+            min-height: 1.64rem;
+            border: 1px solid @wikiicons-border;
+            border-radius: @ini_default_border_radius;
+
+            &:hover,
+            &:focus,
+            &:active {
                 background-color: @ini_nav_menu_hover_color;
                 border-color: @ini_nav_menu_hover_color;
                 color: @ini_nav_menu_hover_bg;
-                span.qc_icon {
-                    &.qc_bad, &.qc_meh, &.qc_good {
-                        fill: @ini_nav_menu_hover_bg;
-                        color: @ini_nav_menu_hover_bg;
-                    }
-                }
 
+                span {
+                    fill: @ini_nav_menu_hover_bg;
+                    color: @ini_nav_menu_hover_bg;
+                }
             }
         }
 
@@ -59,6 +65,5 @@
             font-size: 1.2rem;
             line-height: 1;
         }
-
     }
 }
diff --git a/css/base_mixins.less b/css/base_mixins.less
index 82a5291..f287552 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -200,7 +200,7 @@
     font-size: @font-size-default;
 
     @media @screen_min-xxlg {
-        margin-top: .25rem;
+        margin-top: .22rem;
     }
 
     @media @screen_max-xxlg {
@@ -208,7 +208,7 @@
     }
 
     @media @screen_max-md {
-        margin-top: .25rem;
+        margin-top: .2rem;
     }
 }
 
diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index df44e98..71d3167 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -2,23 +2,25 @@
  * Styles for the QC plugin
  */
 
-// icon in page attributes
+
+/* + + + + +  icon in page attributes3  + + + + + */
+
 .page-attributes .plugin_qc {
     .qc_icon {
         margin: 0;
 
         svg {
-            margin-top: 0.1em;
-            margin-left: 0.1em;
+            margin-top: .1em;
             width: 1.6em;
             height: 1.6em;
+            font-size: (@font-size-small - .06);
         }
     }
 }
 
+
 // output
 .qc-output {
     font-size: 90%;
     border-bottom: 1px solid @ini_border;
 }
-

From b457c328a9a6b6ccd9bb3fdb0e76e30bbb4ca958 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Thu, 13 Apr 2017 15:35:03 +0200
Subject: [PATCH 06/10] SPR-908: QS - wiki-icons

---
 css/area_nav-page-attributes.less | 4 ++++
 css/plugins/do_tasks.less         | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
index f433a32..a04dfa6 100644
--- a/css/area_nav-page-attributes.less
+++ b/css/area_nav-page-attributes.less
@@ -65,5 +65,9 @@
             font-size: 1.2rem;
             line-height: 1;
         }
+
+        .num {
+            top: -.6em;
+        }
     }
 }
diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less
index 261f5de..6b66253 100755
--- a/css/plugins/do_tasks.less
+++ b/css/plugins/do_tasks.less
@@ -19,7 +19,6 @@ ul.page-attributes {
             }
 
             .num {
-                margin-top: 1px;
                 background-color: @noopentasks-border; // fix
                 color: @noopentasks-color; // fix
             }

From e8d58fb55be094623b563540e67d899511883d10 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Wed, 19 Apr 2017 11:52:59 +0200
Subject: [PATCH 07/10] SPR-869: QC Plugin output + icon in breadcrumb

---
 css/area_nav-page-attributes.less |  4 +++-
 css/base_mixins.less              |  6 +++---
 css/plugins/qc.less               | 16 +++++++++++++---
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
index a04dfa6..b7ab433 100644
--- a/css/area_nav-page-attributes.less
+++ b/css/area_nav-page-attributes.less
@@ -40,8 +40,10 @@
             display: block;
             width: auto;
             min-height: 1.64rem;
+            background-color: @ini_nav_menu_hover_bg;
             border: 1px solid @wikiicons-border;
             border-radius: @ini_default_border_radius;
+            transition: @transition background-color, @transition border-color, @transition color;
 
             &:hover,
             &:focus,
@@ -58,7 +60,7 @@
         }
 
         .prefix {
-            .btn-prefix ();
+            .btn-prefix(.26rem);
             .icon-clipboard();
 
             display: block;
diff --git a/css/base_mixins.less b/css/base_mixins.less
index f287552..4f7428b 100755
--- a/css/base_mixins.less
+++ b/css/base_mixins.less
@@ -175,7 +175,7 @@
     }
 }
 
-.btn-usertools-num () {
+.btn-usertools-num() {
     .num {
         position: absolute;
         right: -.4rem;
@@ -192,7 +192,7 @@
     }
 }
 
-.btn-prefix () {
+.btn-prefix(@margin-top:.3rem) {
     .fontello();
     .hide-text-show-before();
 
@@ -204,7 +204,7 @@
     }
 
     @media @screen_max-xxlg {
-        margin-top: .3rem;
+        margin-top: @margin-top;
     }
 
     @media @screen_max-md {
diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index 71d3167..3119ed8 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -3,7 +3,7 @@
  */
 
 
-/* + + + + +  icon in page attributes3  + + + + + */
+/* + + + + +  icon in breadcrumb  + + + + + */
 
 .page-attributes .plugin_qc {
     .qc_icon {
@@ -19,8 +19,18 @@
 }
 
 
-// output
+/* + + + + +  slideout output  + + + + + */
 .qc-output {
+    min-width: 100%;
+    width: auto;
     font-size: 90%;
-    border-bottom: 1px solid @ini_border;
+    box-shadow: @box-shadow-bottom;
+    margin: -(@page_padding-top) -(@margin-default) 0;
+
+    .qc_icon {
+        background-color: #fff;
+        border-radius: @fix_border-radius;
+        vertical-align: top;
+        padding: .1rem;
+    }
 }

From f078e012ce4e55da1e38efc240aae2d34a2dace4 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Wed, 19 Apr 2017 12:59:06 +0200
Subject: [PATCH 08/10] SPR-869: QC Plugin output responsive

---
 css/plugins/qc.less | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index 3119ed8..1365b82 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -25,7 +25,48 @@
     width: auto;
     font-size: 90%;
     box-shadow: @box-shadow-bottom;
-    margin: -(@page_padding-top) -(@margin-default) 0;
+    margin-bottom: 0;
+
+    @media @screen_min-xxs {
+        margin-top: -(@page_padding-top);
+        margin-right: -(@margin-default);
+        margin-left: -(@margin-default);
+        padding-left: @margin-default;
+        padding-right: @margin-default;
+    }
+
+    @media @screen_max-md {
+        margin-top: -(@page_padding-top + 2);
+        margin-right: -(@margin-default * 1.6);
+        margin-left: -(@margin-default);
+        padding-top: @margin-default;
+    }
+
+    @media @screen_max-xxs {
+        margin-left: -(@margin-small);
+        padding-left: @margin-small;
+        padding-right: @margin-default;
+    }
+
+    div,
+    p {
+        margin-left: 0;
+    }
+
+    dl {
+        dt,
+        dd {
+            @media @screen_max-xxs {
+                float: none;
+                display: inline-block;
+                width: 49%;
+                max-width: 10em;
+                vertical-align: top;
+                margin-left: 0;
+                padding-bottom: @small-spacing;
+            }
+        }
+    }
 
     .qc_icon {
         background-color: #fff;

From 401950068f61a711e5371fd1d08c13b1a288881c Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Wed, 19 Apr 2017 13:04:37 +0200
Subject: [PATCH 09/10] SPR-869: QC Plugin output responsive

---
 css/plugins/qc.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index 1365b82..35476c6 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -28,7 +28,7 @@
     margin-bottom: 0;
 
     @media @screen_min-xxs {
-        margin-top: -(@page_padding-top);
+        margin-top: -(@margin-default + 1);
         margin-right: -(@margin-default);
         margin-left: -(@margin-default);
         padding-left: @margin-default;
@@ -56,6 +56,8 @@
     dl {
         dt,
         dd {
+            padding-bottom: @small-spacing;
+
             @media @screen_max-xxs {
                 float: none;
                 display: inline-block;
@@ -63,7 +65,6 @@
                 max-width: 10em;
                 vertical-align: top;
                 margin-left: 0;
-                padding-bottom: @small-spacing;
             }
         }
     }

From 2b368d03e69d938c137310c4638f1b056ea89c1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= <deutschlaender@cosmocode.de>
Date: Wed, 19 Apr 2017 16:13:20 +0200
Subject: [PATCH 10/10] SPR-869: headline hierarchies did not match font-sizes

---
 css/plugins/qc.less | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index 35476c6..25688b9 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -27,6 +27,17 @@
     box-shadow: @box-shadow-bottom;
     margin-bottom: 0;
 
+    h2 {
+        font-size: 1.3rem;
+    }
+    h3 {
+         font-size: 1.1rem;
+    }
+    h4, h5, h6 {
+        font-size: 1rem;
+    }
+
+
     @media @screen_min-xxs {
         margin-top: -(@margin-default + 1);
         margin-right: -(@margin-default);