From 6fcf909c4983316d7c3185aeb51cac7e1731491c Mon Sep 17 00:00:00 2001 From: Thibaud Lepretre Date: Sun, 8 Aug 2021 10:00:27 +0200 Subject: [PATCH 1/2] Fix swipe and transform - [x] sidebarBehavior 3 & 6 still have issue partially fixes #342 and #318 --- src/js/sidebar.js | 1 + src/scss/layouts/_blog.scss | 3 ++- src/scss/utils/_variables.scss | 1 + src/scss/utils/mixins/_header.scss | 6 +++--- src/scss/utils/mixins/_post-header-cover.scss | 6 +++--- tasks/config/cssmin.js | 2 +- tasks/config/uglify.js | 2 +- 7 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/js/sidebar.js b/src/js/sidebar.js index a195e15a8..1661f88d6 100755 --- a/src/js/sidebar.js +++ b/src/js/sidebar.js @@ -141,6 +141,7 @@ // Check if there is enough place for translating `#header .header-title` and `#header .right-picture` // regarding the size of `#header .header-title-link` + // TODO better to use text-overflow on $headerElements.title if (this.$header.width() - this.$sidebar.width() - this.$headerElements.titleLink.width() < 130) { blog = blog.not(this.$headerElements.title).not(this.$headerElements.rightPicture); } diff --git a/src/scss/layouts/_blog.scss b/src/scss/layouts/_blog.scss index 03f16f944..73e9355a3 100755 --- a/src/scss/layouts/_blog.scss +++ b/src/scss/layouts/_blog.scss @@ -4,4 +4,5 @@ left: 0; width: 100%; height: 100%; -} \ No newline at end of file + overflow-x: hidden; +} diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss index 109c256e2..af9855874 100755 --- a/src/scss/utils/_variables.scss +++ b/src/scss/utils/_variables.scss @@ -98,6 +98,7 @@ $screen-max: ( $screen: map-merge($screen-min, $screen-max); // Shortcuts for medias $xsmall-and-down: "only screen and (max-width : #{map-get($screen, xs-max)})" !default; +$xsmall-and-up: "only screen and (min-width : #{map-get($screen, xs-min)})" !default; $small-and-down: "only screen and (max-width : #{map-get($screen, sm-max)})" !default; $small-only: "only screen and (min-width : #{map-get($screen, sm-min)}) and (max-width : #{map-get($screen, sm-max)})" !default; $small-and-up: "only screen and (min-width : #{map-get($screen, sm-min)})" !default; diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss index ab1bdeb36..049379135 100755 --- a/src/scss/utils/mixins/_header.scss +++ b/src/scss/utils/mixins/_header.scss @@ -5,10 +5,10 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } - @media #{$small-and-up} { + @media #{$xsmall-and-up} { .header-title { &.pushed { - @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz'); + @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, md-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz'); } } .header-right-picture { @@ -24,7 +24,7 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } - @media #{$medium-and-up} { + @media #{$xsmall-and-up} { .header-title { &.pushed { @include prefix(transform, translate3d(-#{math.div(map-get($sidebar, lg-screen-width), 2) - 1}, 0, 0), 'webkit' 'moz'); diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss index 0f1fd0526..1797f3187 100755 --- a/src/scss/utils/mixins/_post-header-cover.scss +++ b/src/scss/utils/mixins/_post-header-cover.scss @@ -29,7 +29,7 @@ @mixin post-header-cover-pushed-md { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); - width: calc(100% - #{map-get($sidebar, md-screen-width)}); + /*background-position-x: calc(-#{map-get($sidebar, md-screen-width)});*/ } } @@ -37,7 +37,7 @@ @mixin post-header-cover-pushed-lg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); - width: calc(100% - #{map-get($sidebar, lg-screen-width)}); + /*background-position-x: calc(-#{map-get($sidebar, lg-screen-width)});*/ } } @@ -45,6 +45,6 @@ @mixin post-header-cover-pushed-xlg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); - width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); + /*background-position-x: calc(-#{map-get($sidebar, xlg-screen-width)});*/ } } diff --git a/tasks/config/cssmin.js b/tasks/config/cssmin.js index a42c9a059..cad901b3c 100755 --- a/tasks/config/cssmin.js +++ b/tasks/config/cssmin.js @@ -1,4 +1,4 @@ -const { nanoid } = require('nanoid'); +const {nanoid} = require('nanoid'); module.exports = function(grunt) { grunt.config.set('cssmin', { diff --git a/tasks/config/uglify.js b/tasks/config/uglify.js index b3a0d8eee..b8aefa087 100755 --- a/tasks/config/uglify.js +++ b/tasks/config/uglify.js @@ -1,4 +1,4 @@ -const { nanoid } = require('nanoid'); +const {nanoid} = require('nanoid'); module.exports = function(grunt) { var website = {}; From 0ed9ff3764e6c862f329b648aac8a54e108af4dc Mon Sep 17 00:00:00 2001 From: Thibaud Lepretre Date: Tue, 10 Aug 2021 14:49:57 +0200 Subject: [PATCH 2/2] Add support for touch swipe left to close sidebar --- layouts/partials/head.html | 3 ++- layouts/partials/script.html | 2 +- src/js/sidebar.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index aa1075f47..563a2a8af 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -42,7 +42,8 @@ - {{ if .Site.Params.comment.gitalk.enable }} + + {{ if .Site.Params.comment.gitalk.enable }} {{ end }} diff --git a/layouts/partials/script.html b/layouts/partials/script.html index 43edca038..f64e76213 100644 --- a/layouts/partials/script.html +++ b/layouts/partials/script.html @@ -1,5 +1,5 @@ - + {{ if eq .Site.Params.syntaxHighlighter "highlight.js" }} {{ else if eq .Site.Params.syntaxHighlighter "prism.js" }} diff --git a/src/js/sidebar.js b/src/js/sidebar.js index 1661f88d6..5d7f13c43 100755 --- a/src/js/sidebar.js +++ b/src/js/sidebar.js @@ -48,6 +48,37 @@ self.closeSidebar(); } }); + + var xDown = null; + var yDown = null; + + $(document).on('touchstart', function(e) { + if (self.$sidebar.hasClass('pushed')) { + var firstTouch = (e.touches || e.originalEvent.touches)[0]; + xDown = firstTouch.clientX; + yDown = firstTouch.clientY; + } + }).on('touchmove', function(e) { + if ((!xDown || !yDown) || !self.$sidebar.hasClass('pushed')) { + return; + } + + var xUp = e.touches[0].clientX; + var yUp = e.touches[0].clientY; + + var xDiff = xDown - xUp; + var yDiff = yDown - yUp; + + if (Math.abs(xDiff) > Math.abs(yDiff)) { + if (xDiff > 0) { + self.closeSidebar(); + } + } + + xDown = null; + yDown = null; + }); + // Detect resize of the windows $(window).resize(function() { // Check if the window is larger than the minimal medium screen value