diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/js/fuji.js | 46 | ||||
| -rw-r--r-- | assets/scss/_fuji-style/_components.scss | 2 | ||||
| -rw-r--r-- | assets/scss/_fuji-style/_content.scss | 76 | ||||
| -rw-r--r-- | assets/scss/_fuji-theme/_style.scss | 18 |
4 files changed, 64 insertions, 78 deletions
diff --git a/assets/js/fuji.js b/assets/js/fuji.js index eda8723..4fbd651 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -51,6 +51,9 @@ function updateUtterancesTheme(utterancesFrame) { } } +// load comment +document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); + // remove empty ul in toc if article only have ## and ### if (document.querySelectorAll('.sidebar-toc ul ul').length > 0) { document.querySelectorAll('.sidebar-toc ul ul').forEach((value, key, parent) => { @@ -75,31 +78,6 @@ if (getNowTheme() === 'dark') { }); } -// if in post page and using utterances -// add utterances comment loading indicator -if (document.querySelector('.post-loading')) { - var commentStatus; // utterence status - var commentLoadingTime = 0; // loading time passed - var commentCheckInterval = self.setInterval(checkUtterances, 500); - - function checkUtterances() { - if (document.querySelector('.post-comment .utterances')) { - commentStatus = document.querySelector('.post-comment .utterances').getAttribute('style'); - } - if (commentStatus) { - clearInterval(commentCheckInterval); - updateUtterancesTheme(document.querySelector('.post-comment iframe')); - document.querySelector('.post-loading').setAttribute('style', 'display: none;'); - } else { - if (++commentLoadingTime > 20) { - clearInterval(commentCheckInterval); - document.querySelector('.post-comment').setAttribute('style', 'display: none;'); - document.querySelector('.post-loading i').className = 'far fa-times-circle'; - } - } - } -} - // theme switch button document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => { let nowTheme = getNowTheme(); @@ -126,12 +104,16 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => updateMeidumTheme(mediumInst); // switch comment area theme // only works after comment area are initialized - if (document.querySelector('.post-loading') && commentStatus) { - updateUtterancesTheme(document.querySelector('.post-comment iframe')); - } - if (document.querySelector('#disqus_thread') && typeof DISQUS !== 'undefined') { - DISQUS.reset({ - reload: true, - }); + let commentArea = document.querySelector('.post-comment'); + let commentStatus = document.querySelector('span.post-comment-notloaded').getAttribute('style'); + if (commentStatus) { + if (commentArea.getAttribute('data-comment') === 'utterances') { + updateUtterancesTheme(document.querySelector('.post-comment iframe')); + } + if (commentArea.getAttribute('data-comment') === 'disqus') { + DISQUS.reset({ + reload: true, + }); + } } }); diff --git a/assets/scss/_fuji-style/_components.scss b/assets/scss/_fuji-style/_components.scss index 429d869..88af65a 100644 --- a/assets/scss/_fuji-style/_components.scss +++ b/assets/scss/_fuji-style/_components.scss @@ -24,7 +24,7 @@ &:last-child { border-radius: 0 0 0.25rem 0.25rem; - font-size: 1.3rem; + font-size: 1.5rem; } } } diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index e45658b..92190a6 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -18,24 +18,18 @@ } .post-meta { - margin: 0.5rem 0.25rem 1rem 0.25rem; // little space - white-space: nowrap; - overflow-x: scroll; + display: flex; + align-items: center; + margin: 0.5rem 0.1rem 1rem 0.1rem; // little space + flex-wrap: wrap; - time, - span:not(:last-child) { - padding-right: 1.5rem; + span { + display: flex; + align-items: center; } - &::-webkit-scrollbar { - display: none; // WebKit - } - - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // Microsoft - - i { - font-size: 0.875rem; + span:not(:last-child) { + padding-right: 1.5rem; } } @@ -57,46 +51,36 @@ } .post-meta-archive { - margin: 0.5rem 0.25rem 0 0.25rem; // little space - white-space: nowrap; - overflow-x: scroll; + display: flex; + align-items: center; + margin: 0.5rem 0.1rem 1rem 0.1rem; // little space + flex-wrap: wrap; - time, span:not(:last-child) { padding-right: 1.5rem; } - - &::-webkit-scrollbar { - display: none; // WebKit - } - - scrollbar-width: none; // Firefox - -ms-overflow-style: none; // Microsoft } .pagination { - text-align: center; - padding: 1rem 0; - font-size: 1.125rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + line-height: 1.25rem; + padding: 1.25rem 0; - & > div { - display: inline-block; + div { + display: flex; + align-items: center; + justify-content: center; width: 2rem; height: 2rem; - &.pag-item { - padding: 0 0.25rem; - - a { - vertical-align: middle; - } + a { + display: flex; + align-items: center; } } - - i { - padding: 0 0.25rem; - vertical-align: middle; - } } .page-info { @@ -160,6 +144,14 @@ article { } } +.post-comment { + span.post-comment-notloaded { + display: flex; + align-items: center; + justify-content: center; + } +} + #disqus_thread { padding: 1.25rem 0; } diff --git a/assets/scss/_fuji-theme/_style.scss b/assets/scss/_fuji-theme/_style.scss index 56a61e7..c70f169 100644 --- a/assets/scss/_fuji-theme/_style.scss +++ b/assets/scss/_fuji-theme/_style.scss @@ -88,12 +88,24 @@ footer { } } -.post-loading, -.post-comment .utterances-frame, -.post-comment #disqus_thread { +.post-loading { border-top: $divider; } +.post-comment { + border-top: $divider; + + span.post-comment-notloaded { + padding: 1.5rem 0; + color: var(--color-secondary); + cursor: pointer; + + &:hover { + color: var(--color-focus); + } + } +} + // components .btn { div { |