From c4b38f085af2e7a31ac81747b360f5e9b436dc6d Mon Sep 17 00:00:00 2001 From: Covey Date: Sat, 15 Sep 2018 13:00:59 +0800 Subject: [PATCH] :pencil2: Add theme-toggle function on mobile devices & fixed mobile menu-toggle style on some platform --- assets/css/_common/_core/media.scss | 23 ++++++-- assets/js/main.js | 88 ++++++++++++++++------------- assets/js/page.js | 24 -------- layouts/partials/header.html | 6 +- layouts/partials/js.html | 23 ++++---- 5 files changed, 82 insertions(+), 82 deletions(-) delete mode 100644 assets/js/page.js diff --git a/assets/css/_common/_core/media.scss b/assets/css/_common/_core/media.scss index f166221..c407557 100644 --- a/assets/css/_common/_core/media.scss +++ b/assets/css/_common/_core/media.scss @@ -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; } } } diff --git a/assets/js/main.js b/assets/js/main.js index 53f570a..fddf3fa 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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() -}()); \ No newline at end of file + $(document).ready(function() { + _Blog.prettify() + _Blog.changeTitle() + _Blog.toggleTheme() + _Blog.toggleMobileMenu() + }); +}); \ No newline at end of file diff --git a/assets/js/page.js b/assets/js/page.js deleted file mode 100644 index 78661fb..0000000 --- a/assets/js/page.js +++ /dev/null @@ -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(); - }); -}); diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 4541104..e714077 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -14,10 +14,10 @@