Nofated095
/
hexo-theme-amane
mirror of https://github.com/Nofated095/hexo-theme-amane.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(layout): code block caption bar on safari

This commit is contained in:
ppoffice 2020-01-17 17:37:24 -05:00
parent 8aba483fa5 bf3b49a04b
commit 7d60a3ed5e
2 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
source/css/base.styl
View File

@ -221,29 +221,25 @@ figure.highlight
background: rgba(200, 200, 200, 0.15)
figcaption
margin: 0 !important
padding: .3em .75em
text-align: left
font-style: normal
font-size: .8em
&:after
clear: both
content: " "
display: table
*
color: $grey
span
font-weight: 500
font-family: $family-code
.fold
a
color: #9a9a9a
.level-left *:not(:last-child)
margin-right: .5em
a
float: right
margin-left: 0.5em
.level-right *:not(:first-child)
margin-left: .5em
.fold
margin-right: 0.5em
cursor: pointer
.highlight-body

51
source/js/main.js
View File

@ -62,37 +62,46 @@
}
});
if (typeof ClipboardJS !== 'undefined' && config.article.highlight.clipboard) {
const clipboard = config.article.highlight.clipboard;
const fold = config.article.highlight.fold.trim();
$('figure.highlight').each(function() {
if ($(this).find('figcaption').length) {
$(this).find('figcaption').addClass('level');
$(this).find('figcaption').append('<div class="level-left">');
$(this).find('figcaption').append('<div class="level-right">');
$(this).find('figcaption div.level-left').append($(this).find('figcaption').find('span'));
$(this).find('figcaption div.level-right').append($(this).find('figcaption').find('a'));
} else {
if (clipboard || fold) {
$(this).prepend('<figcaption class="level"><div class="level-left"></div><div class="level-right"></div></figcaption>');
}
}
});
if (typeof ClipboardJS !== 'undefined' && clipboard) {
$('figure.highlight').each(function() {
const id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
const button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
$(this).attr('id', id);
if ($(this).find('figcaption').length) {
$(this).find('figcaption').prepend(button);
} else {
$(this).prepend('<figcaption>' + button + '</figcaption>');
}
$(this).find('figcaption div.level-right').append(button);
});
new ClipboardJS('.highlight .copy'); // eslint-disable-line no-new
}
const fold = config.article.highlight.fold;
if (fold.trim()) {
if (fold) {
$('figure.highlight').each(function() {
if ($(this).find('figcaption').length) {
// fold individual code block
if ($(this).find('figcaption').find('span').length > 0) {
const span = $(this).find('figcaption').find('span').eq(0);
if (span[0].innerText.indexOf('>folded') > -1) {
span[0].innerText = span[0].innerText.replace('>folded', '');
$(this).find('figcaption').prepend(createFoldButton('folded'));
toggleFold(this, true);
return;
}
if ($(this).find('figcaption').find('span').length > 0) {
const span = $(this).find('figcaption').find('span');
if (span[0].innerText.indexOf('>folded') > -1) {
span[0].innerText = span[0].innerText.replace('>folded', '');
$(this).find('figcaption div.level-left').prepend(createFoldButton('folded'));
toggleFold(this, true);
return;
}
$(this).find('figcaption').prepend(createFoldButton(fold));
} else {
$(this).prepend('<figcaption>' + createFoldButton(fold) + '</figcaption>');
}
$(this).find('figcaption div.level-left').prepend(createFoldButton(fold));
toggleFold(this, fold === 'folded');
});