✏️ Add theme-toggle function on mobile devices & fixed mobile menu-toggle style on some platform

This commit is contained in:
Covey 2018-09-15 13:00:59 +08:00
parent 33c59f8c49
commit c4b38f085a
5 changed files with 82 additions and 82 deletions

View File

@ -14,17 +14,20 @@
margin: 0;
height: 5em;
line-height: 5.5em;
background: #ffffff;
background: $light-background-color;
.navbar-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-right: 1em;
padding-left: 1em;
box-sizing: border-box;
.menu-toggle {
float: right;
.menu-toggle {
cursor: pointer;
height: 5em;
line-height: 5.5em;
span {
@ -38,6 +41,10 @@
-webkit-transition: .25s margin .25s, .25s transform;
-moz-transition: .25s margin .25s, .25s transform;
transition: .25s margin .25s, .25s transform;
.dark-theme & {
background: $dark-font-color;
}
}
span:nth-child(1) {
@ -90,6 +97,14 @@
&.active {
display: block;
}
.dark-theme & {
background: $dark-background-color;
border-top: 2px solid $dark-font-secondary-color;
}
}
.dark-theme & {
background: $dark-background-color !important;
}
}
}

View File

@ -1,44 +1,56 @@
(function(){
'use strict';
var _Blog = window._Blog || {};
jQuery(function($) {
_Blog.changeTitle = function() {
'use strict';
var _Blog = window._Blog || {};
_Blog.prettify = function() {
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
window.prettyPrint && prettyPrint();
};
_Blog.externalUrl = function() {
$.expr[':'].external = function(obj) {
return !obj.href.match(/^mailto\:/) &&
(obj.hostname != location.hostname);
};
$('a:external').addClass('external');
$(".external").attr('target', '_blank');
var currentTitle = document.title;
window.onblur = function() {
document.title = 'I miss you!';
}
window.onfocus = function() {
document.title = currentTitle;
_Blog.changeTitle = function() {
var currentTitle = document.title;
window.onblur = function() {
document.title = 'I miss you!';
}
window.onfocus = function() {
document.title = currentTitle;
}
};
_Blog.toggleTheme = function() {
const currentTheme = window.localStorage && window.localStorage.getItem('theme')
const isDark = currentTheme === 'dark'
$('body').toggleClass('dark-theme', isDark)
$('.theme-switch').on('click', () => {
$('body').toggleClass('dark-theme')
window.localStorage &&
window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', )
})
}
};
_Blog.toggleTheme = function() {
const currentTheme = window.localStorage && window.localStorage.getItem('theme')
const themeSwitchEL = document.querySelector('.theme-switch')
const isDark = currentTheme === 'dark'
document.body.classList.toggle('dark-theme', isDark)
_Blog.toggleMobileMenu = function() {
$('.menu-toggle').on('click', () => {
$('.menu-toggle').toggleClass('active')
$('#mobile-menu').toggleClass('active')
})
}
themeSwitchEL.addEventListener('click', () => {
document.body.classList.toggle('dark-theme')
window.localStorage &&
window.localStorage.setItem(
'theme',
document.body.classList.contains('dark-theme') ? 'dark' : 'light',
)
})
}
_Blog.toggleMobileMenu = function(){
const menuToggle = document.querySelector('.menu-toggle')
const mobileMenu = document.querySelector('#mobile-menu')
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('active')
menuToggle.classList.toggle('active')
})
}
_Blog.toggleTheme()
_Blog.changeTitle()
_Blog.toggleMobileMenu()
}());
$(document).ready(function() {
_Blog.prettify()
_Blog.changeTitle()
_Blog.toggleTheme()
_Blog.toggleMobileMenu()
});
});

View File

@ -1,24 +0,0 @@
jQuery(function($) {
'use strict';
var _Blog = window._Blog || {};
_Blog.prettify = function() {
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
window.prettyPrint && prettyPrint();
};
_Blog.externalUrl = function() {
$.expr[':'].external = function(obj) {
return !obj.href.match(/^mailto\:/) &&
(obj.hostname != location.hostname);
};
$('a:external').addClass('external');
$(".external").attr('target', '_blank');
}
$(document).ready(function() {
_Blog.prettify();
});
});

View File

@ -14,10 +14,10 @@
<nav class="navbar-mobile" id="nav-mobile" style="display: none">
<div class="container">
<div class="navbar-header">
<a href="{{ "/" | absURL}}">LiuZhichao</a>
<button class="menu-toggle">
<div> <a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-xihuan"></i></a>&nbsp;<a href="{{ "/" | absURL}}">{{ .Site.Title }}</a></div>
<div class="menu-toggle">
<span></span><span></span><span></span>
</button>
</div>
</div>
<div class="menu" id="mobile-menu">

View File

@ -1,28 +1,25 @@
{{ $cdn_url := .Scratch.Get "cdn_url" }}
{{ $postHasImages := .Scratch.Get "postHasImages"}}
{{ $jquery := resources.Get "/js/jquery.min.js" }}
{{ $lazysizes := resources.Get "/js/lazysizes.min.js"}}
{{ $prettify := resources.Get "/js/prettify.min.js" }}
{{ $dynamic := resources.Get "/js/dynamic.to.top.min.js" }}
{{ $main := resources.Get "/js/main.js" }}
{{ $lihtGallery := resources.Get "/js/lightGallery-all.min.js" }}
{{ $lihtGallery_init := resources.Get "/js/lightGallery-init.js" }}
{{ if .IsPage }}
{{ $jquery := resources.Get "/js/jquery.min.js" }}
{{ $lazysizes := resources.Get "/js/lazysizes.min.js"}}
{{ $prettify := resources.Get "/js/prettify.min.js" }}
{{ $dynamic := resources.Get "/js/dynamic.to.top.min.js" }}
{{ $main := resources.Get "/js/main.js" }}
{{ $page := resources.Get "/js/page.js" }}
{{ $lihtGallery := resources.Get "/js/lightGallery-all.min.js" }}
{{ $lihtGallery_init := resources.Get "/js/lightGallery-init.js" }}
{{ if $postHasImages }}
<link href="//lib.baomitu.com/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet">
{{ $vendorscript := slice $jquery $lazysizes $prettify $dynamic $main $page $lihtGallery $lihtGallery_init | resources.Concat "/js/vendor0.js" | resources.Minify }}
{{ $vendorscript := slice $jquery $lazysizes $prettify $dynamic $main $lihtGallery $lihtGallery_init | resources.Concat "/js/vendor_gallery.js" | resources.Minify }}
<script src="{{ printf "%s%s" $cdn_url $vendorscript.RelPermalink }}" async="" ></script>
{{ else }}
{{ $vendorscript := slice $jquery $prettify $dynamic $main $page | resources.Concat "/js/vendor1.js" | resources.Minify }}
{{ $vendorscript := slice $jquery $prettify $dynamic $main | resources.Concat "/js/vendor_no_gallery.js" | resources.Minify }}
<script src="{{ printf "%s%s" $cdn_url $vendorscript.RelPermalink }}" async=""></script>
{{ end }}
{{ else }}
{{ $main := resources.Get "/js/main.js" | resources.Minify}}
{{ $main := slice $jquery $main | resources.Concat "/js/vendor_main.js" | resources.Minify}}
<script src="{{ printf "%s%s" $cdn_url $main.RelPermalink }}" async=""></script>
{{ end }}