feat(widget): show floating toc on mobile devices

This commit is contained in:
ppoffice 2018-11-05 00:28:34 -05:00
parent bcf1ca69ce
commit b138ed3a88
5 changed files with 74 additions and 12 deletions

View File

@ -7,6 +7,15 @@
* <%- column_count() %> * <%- column_count() %>
*/ */
module.exports = function (hexo) { module.exports = function (hexo) {
hexo.extend.helper.register('has_widget', function (type) {
const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
if (!hasWidgets) {
return false;
}
const widgets = hexo.extend.helper.get('get_config').bind(this)('widgets');
return widgets.some(widget => widget.hasOwnProperty('type') && widget.type === type);
});
hexo.extend.helper.register('get_widgets', function (position) { hexo.extend.helper.register('get_widgets', function (position) {
const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets'); const hasWidgets = hexo.extend.helper.get('has_config').bind(this)('widgets');
if (!hasWidgets) { if (!hasWidgets) {

View File

@ -32,6 +32,11 @@
</a> </a>
<% } %> <% } %>
<% } %> <% } %>
<% if (get_config('toc') === true && has_widget('toc') && (page.layout === 'page' || page.layout === 'post')) { %>
<a class="navbar-item is-hidden-tablet catalogue" title="<%= _p('widget.catalogue', Infinity) %>" href="javascript:;">
<i class="fas fa-list-ul"></i>
</a>
<% } %>
<% if (has_config('search.type')) { %> <% if (has_config('search.type')) { %>
<a class="navbar-item search" title="<%= __('search.search') %>" href="javascript:;"> <a class="navbar-item search" title="<%= __('search.search') %>" href="javascript:;">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>

View File

@ -1,5 +1,10 @@
family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
family-mono = "Source Code Pro", monospace, "Microsoft YaHei" family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
gap = 64px
screen-tablet = 769px
screen-desktop = 1088px
screen-widescreen = 1280px
screen-fullhd = 1472px
/* --------------------------------- /* ---------------------------------
* Override CSS Framework * Override CSS Framework
@ -13,20 +18,20 @@ body
body, button, input, select, textarea body, button, input, select, textarea
font-family: family-sans font-family: family-sans
@media screen and (min-width: 1280px) @media screen and (min-width: screen-widescreen)
.is-1-column .container .is-1-column .container
.is-2-column .container .is-2-column .container
max-width: 960px max-width: screen-desktop - 2 * gap
width: 960px width: screen-desktop - 2 * gap
@media screen and (min-width: 1472px) @media screen and (min-width: screen-fullhd)
.is-2-column .container .is-2-column .container
max-width: 1152px max-width: screen-widescreen - 2 * gap
width: 1152px width: screen-widescreen - 2 * gap
.is-1-column .container .is-1-column .container
max-width: 960px max-width: screen-desktop - 2 * gap
width: 960px width: screen-desktop - 2 * gap
@media screen and (max-width: 768px) @media screen and (max-width: screen-tablet - 1)
.section .section
padding: 1.5rem 1rem padding: 1.5rem 1rem
@ -85,7 +90,7 @@ img.thumbnail
&.is-active &.is-active
color: hsl(217, 71%, 53%) color: hsl(217, 71%, 53%)
background-color: transparent background-color: transparent
@media screen and (max-width: 1087px) @media screen and (max-width: screen-desktop - 1)
.navbar-menu .navbar-menu
justify-content: center justify-content: center
box-shadow: none box-shadow: none
@ -170,6 +175,32 @@ img.thumbnail
margin-left: 0.75rem margin-left: 0.75rem
margin-right: 0 margin-right: 0
@media screen and (max-width: screen-tablet - 1)
#toc
display: none
position: fixed
margin: 1rem
left: 0
right: 0
bottom: 0
z-index: 100
max-height: calc(100vh - 2rem)
overflow-y: auto
#toc-mask
display: none
position: fixed
top: 0
left: 0
right: 0
bottom: 0
z-index: 99
background: rgba(0, 0, 0, 0.7)
#toc,
#toc-mask
&.is-active
display: block
/* --------------------------------- /* ---------------------------------
* Custom modifiers * Custom modifiers
* --------------------------------- */ * --------------------------------- */
@ -233,7 +264,7 @@ img.thumbnail
.has-link-black-ter .has-link-black-ter
color: hsl(0, 0%, 14%) !important color: hsl(0, 0%, 14%) !important
@media screen and (max-width: 768px) @media screen and (max-width: screen-tablet - 1)
.has-text-centered-mobile .has-text-centered-mobile
text-align: center !important text-align: center !important
.is-flex-center-mobile .is-flex-center-mobile

View File

@ -25,4 +25,21 @@
} }
adjustNavbar(); adjustNavbar();
$(window).resize(adjustNavbar); $(window).resize(adjustNavbar);
var $toc = $('#toc');
if ($toc.length > 0) {
var $mask = $('<div>');
$mask.attr('id', 'toc-mask');
$('body').append($mask);
function toggleToc() {
$toc.toggleClass('is-active');
$mask.toggleClass('is-active');
}
$toc.on('click', toggleToc);
$mask.on('click', toggleToc);
$('.navbar-main .catalogue').on('click', toggleToc);
}
})(jQuery); })(jQuery);