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 { &__link {
font-size: 16.8px; font-size: 16.8px;
@include themify($themes) { @include themify($themes) {
color: themed('related-link-color'); color: themed('related-link-color');
} }
} }
&-ul {
@include align-self(center);
list-style-type: disc;
}
} }

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

@ -135,7 +135,7 @@
} }
.copy-to-clipboard { .copy-to-clipboard {
@include clippy(); @include clippy();
background-position: 50% 50%; background-position: 50% 50%;
background-size: 16px 16px; background-size: 16px 16px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -165,6 +165,17 @@
.chroma .copy-to-clipboard:hover { .chroma .copy-to-clipboard:hover {
@include translateY(-0.1rem); @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 { blockquote {
margin: 0 1.75rem 1.75rem 1.5rem; margin: 0 1.75rem 1.75rem 1.5rem;
@ -332,7 +343,7 @@ pre:not(.chroma) {
} }
.single__contents > .language-code { .single__contents > .language-code {
overflow: auto; overflow-x: auto;
position: relative; position: relative;
margin: 1em 0; margin: 1em 0;
@ -354,45 +365,15 @@ pre:not(.chroma) {
background: themed('content-pre-header-background-color'); 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 { .highlight > .chroma {
margin: 1em 0; margin: 1em 0;
border-radius: 5px; border-radius: 5px;
overflow-x: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125); box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
position: relative; position: relative;
overflow-x: auto;
@include themify($themes) { @include themify($themes) {
color: themed('content-pre-color'); color: themed('content-pre-color');
background: themed('content-pre-background-color'); background: themed('content-pre-background-color');
@ -402,24 +383,20 @@ div.chroma {
padding: 0; padding: 0;
} }
table { &::after {
position: relative; position: absolute;
top: 0;
&::after { right: 0;
position: absolute; left: 0;
top: 0; padding: 2px 7px;
right: 0; font-size: $code-font-size;
left: 0; font-family: $title-font;
padding: 2px 7px; font-weight: bold;
font-size: $code-font-size; @include themify($themes) {
font-family: $title-font; color: themed('content-pre-header-color');
font-weight: bold; background: themed('content-pre-header-background-color');
@include themify($themes) {
color: themed('content-pre-header-color');
background: themed('content-pre-header-background-color');
}
content: attr(data-lang);
} }
content: attr(data-lang);
} }
.lntd { .lntd {
@ -443,20 +420,20 @@ div.chroma {
pre { pre {
margin: 0; margin: 0;
padding: 34px 4px 6px; padding: 34px 4px 6px;
&::after { // &::after {
content: 'Code'; // content: 'Code';
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
left: 0; // left: 0;
height: 31px; // height: 31px;
padding: 5px 7px; // padding: 5px 7px;
font-size: $code-font-size; // font-size: $code-font-size;
font-family: $title-font; // font-family: $title-font;
font-weight: bold; // font-weight: bold;
border-top-left-radius: 0.34rem; // border-top-left-radius: 0.34rem;
border-top-right-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 }} {{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }} {{ with $related }}
<h1 class="related__title"> <h1 class="related__title">
<hr class="hr-dots" /> <hr class="hr-dots"/>
<div> <div>
{{ i18n "single-related" }} {{ i18n "single-related" }}
</div> </div>

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

@ -76,10 +76,7 @@
.forEach((element) => { .forEach((element) => {
const sub = element.querySelector('code[data-lang]'); const sub = element.querySelector('code[data-lang]');
if (sub) { if (sub) {
element.setAttribute('data-lang', mapLang(sub.getAttribute('data-lang'))); $(element).closest('div.chroma').attr('data-lang', mapLang(sub.getAttribute('data-lang')));
} else {
element.setAttribute('data-lang', 'Code');
$(element).addClass('chroma');
} }
} }
); );
@ -91,8 +88,7 @@
if (!$(element).attr('data-lang')) { if (!$(element).attr('data-lang')) {
$(element).parent().wrap('<div data-lang="Code" class="language-code"></div>'); $(element).parent().wrap('<div data-lang="Code" class="language-code"></div>');
} }
} });
);
})(); })();
function mapLang(name) { function mapLang(name) {
@ -187,7 +183,7 @@
$(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s'); $(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"/>'); $(node).append('<span class="copy-to-clipboard" title="Copy to clipboard"/>');
}); });
@ -201,7 +197,13 @@
if (!clipInit) { if (!clipInit) {
var text, clip = new ClipboardJS('.copy-to-clipboard', { var text, clip = new ClipboardJS('.copy-to-clipboard', {
text: function (trigger) { 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, ''); return text.replace(/^\$\s/gm, '');
} }
}); });
@ -234,19 +236,15 @@
break; break;
} }
} }
if (!isNotAllowedIncluded) { if (!isNotAllowedIncluded) {
if (curClassName) { 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 // gallery
{{ $enablePhotoSwipe := ($.Param "enablePhotoSwipe") }} {{ $enablePhotoSwipe := ($.Param "enablePhotoSwipe") }}
var enablePhotoSwipe = JSON.parse({{ $enablePhotoSwipe | jsonify }}); var enablePhotoSwipe = JSON.parse({{ $enablePhotoSwipe | jsonify }});