EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style the fake icon

Browse source 
When no icon is provided, we use the first two letters as icon. A fancy
border makes it look more like an icon.
This commit is contained in:
Andreas Gohr 2017-02-15 14:55:47 +01:00
commit 285c4f96a7
2 changed files with 25 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

23
css/area_main-sidebar.less
View file

@ -35,6 +35,24 @@
margin-right: @margin-small; margin-right: @margin-small;
color: @color-nav; color: @color-nav;
// simple fake icon
strong {
display: inline-block;
font-size: @icon-size * 0.5;
width: @icon-size * 0.9;
height: @icon-size * 0.9;
line-height: @icon-size * 0.9;
margin: @icon-size * 0.05;
vertical-align: baseline;
text-align: center;
color: @color-nav;
border: 1px solid @color-nav;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}
// real icon
svg { svg {
width: @icon-size; width: @icon-size;
height: @icon-size; height: @icon-size;
@ -52,6 +70,11 @@
color: @button_background; color: @button_background;
text-decoration: none; text-decoration: none;
span strong {
color: @button_background;
border-color: @button_background;
}
span svg path { span svg path {
fill: @button_background; fill: @button_background;
} }

3
js/sidebar.js
View file

@ -14,7 +14,8 @@ jQuery(function () {
const data = $me.text().split('@', 2); const data = $me.text().split('@', 2);
const text = data[0].trim(); const text = data[0].trim();
const $icon = jQuery('<span>') const $icon = jQuery('<span>')
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase()); .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
.wrapInner('<strong>');
if (data[1]) { if (data[1]) {
const src = data[1].trim(); const src = data[1].trim();
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed