kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

clipboard icon positioning

This commit is contained in:
zzossig 2019-11-29 00:43:35 +09:00
parent 1b52ab1479
commit 564ca10170
5 changed files with 61 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/sass/components/_related.scss
View File

@ -15,15 +15,15 @@
}
}
&-ul {
@include align-self(center);
list-style-type: disc;
}
&__link {
font-size: 16.8px;
@include themify($themes) {
color: themed('related-link-color');
}
}
&-ul {
@include align-self(center);
list-style-type: disc;
}
}

105
assets/sass/pages/_single.scss
View File

@ -165,6 +165,17 @@
.chroma .copy-to-clipboard:hover {
@include translateY(-0.1rem);
}
.language-code .copy-to-clipboard {
position: absolute;
right: 4px;
top: 5px;
border-radius: 2px;
z-index: 1;
@include transition(all, 0.2s, ease);
}
.language-code .copy-to-clipboard:hover {
@include translateY(-0.1rem);
}
blockquote {
margin: 0 1.75rem 1.75rem 1.5rem;
@ -332,7 +343,7 @@ pre:not(.chroma) {
}
.single__contents > .language-code {
overflow: auto;
overflow-x: auto;
position: relative;
margin: 1em 0;
@ -354,45 +365,15 @@ pre:not(.chroma) {
background: themed('content-pre-header-background-color');
}
}
.copy-to-clipboard {
position: absolute;
right: 4px;
top: 5px;
border-radius: 2px;
z-index: 1;
@include transition(all, 0.2s, ease);
}
.copy-to-clipboard:hover {
@include translateY(-0.1rem);
}
.chroma .copy-to-clipboard {
position: absolute;
right: 4px;
top: 5px;
border-radius: 2px;
z-index: 1;
@include transition(all, 0.2s, ease);
}
.chroma .copy-to-clipboard:hover {
@include translateY(-0.1rem);
}
}
// chroma
div.chroma {
overflow: auto;
}
.highlight > .chroma {
margin: 1em 0;
border-radius: 5px;
overflow-x: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
position: relative;
overflow-x: auto;
@include themify($themes) {
color: themed('content-pre-color');
background: themed('content-pre-background-color');
@ -402,24 +383,20 @@ div.chroma {
padding: 0;
}
table {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: $code-font-size;
font-family: $title-font;
font-weight: bold;
@include themify($themes) {
color: themed('content-pre-header-color');
background: themed('content-pre-header-background-color');
}
content: attr(data-lang);
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: $code-font-size;
font-family: $title-font;
font-weight: bold;
@include themify($themes) {
color: themed('content-pre-header-color');
background: themed('content-pre-header-background-color');
}
content: attr(data-lang);
}
.lntd {
@ -443,20 +420,20 @@ div.chroma {
pre {
margin: 0;
padding: 34px 4px 6px;
&::after {
content: 'Code';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 31px;
padding: 5px 7px;
font-size: $code-font-size;
font-family: $title-font;
font-weight: bold;
border-top-left-radius: 0.34rem;
border-top-right-radius: 0.34rem;
}
// &::after {
// content: 'Code';
// position: absolute;
// top: 0;
// right: 0;
// left: 0;
// height: 31px;
// padding: 5px 7px;
// font-size: $code-font-size;
// font-family: $title-font;
// font-weight: bold;
// border-top-left-radius: 0.34rem;
// border-top-right-radius: 0.34rem;
// }
}
}
}

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

2
layouts/partials/body/related.html
View File

@ -2,7 +2,7 @@
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h1 class="related__title">
<hr class="hr-dots" />
<hr class="hr-dots"/>
<div>
{{ i18n "single-related" }}
</div>

24
layouts/partials/script/single-script.html
View File

@ -76,10 +76,7 @@
.forEach((element) => {
const sub = element.querySelector('code[data-lang]');
if (sub) {
element.setAttribute('data-lang', mapLang(sub.getAttribute('data-lang')));
} else {
element.setAttribute('data-lang', 'Code');
$(element).addClass('chroma');
$(element).closest('div.chroma').attr('data-lang', mapLang(sub.getAttribute('data-lang')));
}
}
);
@ -91,8 +88,7 @@
if (!$(element).attr('data-lang')) {
$(element).parent().wrap('<div data-lang="Code" class="language-code"></div>');
}
}
);
});
})();
function mapLang(name) {
@ -187,7 +183,7 @@
$(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
});
$('.language-code pre').each(function (i, node) {
$('.language-code').each(function (i, node) {
$(node).append('<span class="copy-to-clipboard" title="Copy to clipboard"/>');
});
@ -201,7 +197,13 @@
if (!clipInit) {
var text, clip = new ClipboardJS('.copy-to-clipboard', {
text: function (trigger) {
text = $(trigger).prev('code').text();
console.log();
if ($(trigger).prev().find('code').length > 1) {
text = $(trigger).prev().find(`code[class^="language-"]`).text();
} else {
text = $(trigger).prev().find('code').text();
}
return text.replace(/^\$\s/gm, '');
}
});
@ -237,16 +239,12 @@
if (!isNotAllowedIncluded) {
if (curClassName) {
code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
code.closest('div.chroma').append('<span class="copy-to-clipboard" title="Copy to clipboard" />');
}
}
}
});
/*$('.language-code code').each(function(i, node) {
$(node).append('<span class="copy-to-clipboard" title="Copy to clipboard" />');
});*/
// gallery
{{ $enablePhotoSwipe := ($.Param "enablePhotoSwipe") }}
var enablePhotoSwipe = JSON.parse({{ $enablePhotoSwipe | jsonify }});