From b8adbb9e24dc48aeb7fdee7e778c6c5c6a244b1e Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Tue, 12 Sep 2023 11:06:19 +0200
Subject: [PATCH] streamline page attributes
Page attribute icons should now align better and all look the same.
---
css/area_nav-page-attributes.less | 86 +++++++++++--------------------
css/plugins/do_tasks.less | 21 --------
css/plugins/qc.less | 24 ---------
css/plugins/quicksubscribe.less | 24 ---------
css/plugins/starred.less | 33 ------------
style.ini | 1 -
tpl/nav-page-attributes.php | 8 ++-
7 files changed, 37 insertions(+), 160 deletions(-)
delete mode 100644 css/plugins/quicksubscribe.less
diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less
index 4484f4f..2d24c75 100644
--- a/css/area_nav-page-attributes.less
+++ b/css/area_nav-page-attributes.less
@@ -1,78 +1,54 @@
/**
* Page Attribute Icons in the breadcrumb bar
*/
-
-/* + + + + + icons in breadcrumb area + + + + + */
.page-attributes {
list-style: none;
float: right;
- display: inline-block;
- max-width: 30%;
- margin: -.45em 0 0;
+ margin: -.45em 0 0; // FIXME sourrounding CSS should be fixed so negative margin is not needed
padding: 0;
-
- @media @screen_max-xs {
- max-width: 90%;
- }
+ display: flex;
+ gap: 0.5rem;
> li {
- .btn-usertools-wrapper(); // uniform li
- .btn-usertools-num();
-
+ margin: 0;
+ padding: 0;
+ border: 1px solid @wikiicons-border;
+ border-radius: @ini_default_border_radius;
position: relative;
- float: left;
- display: block;
- width: auto;
- min-height: @toggle-size;
- text-align: center;
- margin: 0 .25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: @transition background-color, @transition border-color, @transition color;
- strong {
+ // override any plugin element styles
+ * {
+ margin: 0;
+ padding: 0;
+ line-height: normal;
display: block;
- min-height: 1.64rem;
- border: 1px solid @wikiicons-border;
- border-radius: @ini_default_border_radius;
}
- a {
- 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;
+ // number badge
+ .btn-usertools-num();
- &:hover,
- &:focus,
- &:active {
- background-color: @ini_nav_menu_hover_color;
- border-color: @ini_nav_menu_hover_color;
- color: @ini_nav_menu_hover_bg;
+ // icon
+ svg {
+ height: 1.5em;
+ width: 1.5em;
- span {
- fill: @ini_nav_menu_hover_bg;
- color: @ini_nav_menu_hover_bg;
- }
+ path {
+ fill: @ini_nav_menu_color;
}
}
- .prefix {
- .btn-prefix(.26rem);
- .icon-clipboard();
+ // adjust colors on hover
+ &:hover {
+ background-color: @ini_nav_menu_hover_color;
+ border-color: @ini_nav_menu_hover_color;
- display: block;
- font-size: 1.2rem;
- line-height: 1;
- }
-
- .num {
- top: -.6em;
- font-size: @font-size-very-small;
- }
-
- &:empty {
- display: none;
+ svg path {
+ fill: @ini_nav_menu_hover_bg;
+ }
}
}
}
diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less
index 8a43015..b09d449 100755
--- a/css/plugins/do_tasks.less
+++ b/css/plugins/do_tasks.less
@@ -2,27 +2,6 @@
* This file provides styles for do-task plugin
*/
-/* + + + + + global + + + + + */
-ul.page-attributes {
- .plugin_do_pagetasks {
- position: relative;
- border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-
- strong {
- overflow: hidden;
- background-color: @ini_background_site;
- border-color: @noopentasks-border;
- color: @ini_text_webframe;
- }
-
- &.do_none {
- .num {
- background-color: @noopentasks-border; // fix
- color: @noopentasks-color; // fix
- }
- }
- }
-}
/* + + + + + usertool icon in header + + + + + */
#dokuwiki__usertools.nav-usertools {
diff --git a/css/plugins/qc.less b/css/plugins/qc.less
index b08d756..c26c734 100644
--- a/css/plugins/qc.less
+++ b/css/plugins/qc.less
@@ -2,30 +2,6 @@
* Styles for the QC plugin
*/
-/* + + + + + icon in breadcrumb + + + + + */
-.page-attributes .plugin_qc {
- .qc_icon {
- margin: 0;
-
- svg {
- margin-top: .1em;
- width: 1.6em;
- height: 1.6em;
- font-size: (@font-size-small - .06);
- }
- }
-
- a {
- &:hover,
- &:focus,
- &:active {
- svg path {
- fill: @ini_nav_menu_hover_bg;
- }
- }
- }
-}
-
/* + + + + + slideout output + + + + + */
.qc-output {
position: relative;
diff --git a/css/plugins/quicksubscribe.less b/css/plugins/quicksubscribe.less
deleted file mode 100644
index afc1b60..0000000
--- a/css/plugins/quicksubscribe.less
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * This file provides styles for the quicksubscribe plugin
- */
-
-.page-attributes {
- li.plugin_quicksubscribe {
- a.plugin_qsub_subscribe {
- svg {
- width: 1.6em;
- height: 1.6em;
- font-size: 0.82rem;
- fill: @ini_nav_menu_hover_color;
- }
- }
-
- a:hover,
- a:focus,
- a:active {
- svg {
- fill: @ini_nav_menu_hover_bg;
- }
- }
- }
-}
diff --git a/css/plugins/starred.less b/css/plugins/starred.less
index 74003b5..26426d6 100644
--- a/css/plugins/starred.less
+++ b/css/plugins/starred.less
@@ -1,43 +1,10 @@
/**
* This file provides styles for starred plugin
*/
-
-.page-attributes {
- li.plugin_starred {
- .starred {
- display: block;
- padding-top: .05rem;
-
- svg {
- width: 1.6em;
- height: 1.6em;
- font-size: 0.82rem;
- fill: @ini_nav_menu_hover_color;
- }
- }
-
- a {
- max-height: @toggle-size;
- }
-
- a:hover,
- a:focus,
- a:active {
- .starred svg {
- fill: @ini_nav_menu_hover_bg;
- }
- }
- }
-}
-
nav.nav-starred {
ul {
list-style: none;
- &#sidebar-menu-starred {
- margin-left: 0;
- }
-
li {
margin-left: 0;
diff --git a/style.ini b/style.ini
index 66ea444..48dda70 100755
--- a/style.ini
+++ b/style.ini
@@ -113,7 +113,6 @@ css/plugins/extension__manager.less = all
css/plugins/folded.less = all
css/plugins/configmanager.less = all
css/plugins/starred.less = all
-css/plugins/quicksubscribe.less = all
css/plugins/sitemapnavi.less = all
css/plugins/data.less = all
css/plugins/fastwiki.less = all
diff --git a/tpl/nav-page-attributes.php b/tpl/nav-page-attributes.php
index f79d40c..58d220e 100755
--- a/tpl/nav-page-attributes.php
+++ b/tpl/nav-page-attributes.php
@@ -39,9 +39,13 @@ if($doPlugin !== null) {
$class = 'do_late';
$title = sprintf(tpl_getLang('tasks_page_late'), $count['undone'], $count['late']);
}
- $markup = "<li class=\"plugin_do_pagetasks $class\" title=\"$title\"><strong><span class=\"num\">{$count['undone']}</span><span class=\"prefix\">" . tpl_getLang('prefix_tasks_page') . " </span></strong></li>";
- echo $markup;
+ echo '<li class="plugin_do_pagetasks">';
+ echo '<span title="'.$title.'" class="'.$class.'">';
+ echo inlineSVG(DOKU_PLUGIN . 'do/pix/clipboard-text.svg');
+ echo '</span>';
+ echo '<span class="num">' . $count['undone'] . '</span>';
+ echo '</li>';
}
if($starredPlugin !== null) {